uniapp中的APP开发使用开源地图的困难之处在于的APP端不支持document、window等对象的API，而开源地图的实例化又是需要通过dom获取到节点进行地图的创建，因此正常的uniapp开发是无法使用开源地图的，需要另辟蹊径。

查阅相关资料，列举出了以下几种来解决移动端使用开源地图开发的方法，并就其使用方法以及可行性进行说明。

==uni-app 中，没有 document！！！==

方式一

使用uniapp中的renderjs进行开发

https://uniapp.dcloud.net.cn/frame?id=renderjs

renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和h5。

（WXS是一套运行在视图层的脚本语言，它的特点是运行在视图层。当需要避免逻辑层和渲染层交互通信折损时，可采用wxs。uni-app可以将wxs代码编译到微信小程序、QQ小程序、app-vue、H5上）

renderjs的主要作用有2个：

  • 大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力
  • 在视图层操作dom，运行for web的js库

功能详解

  • 大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力

逻辑层和视图层分离有很多好处，但也有一个副作用是在造成了两层之间通信阻塞。尤其是小程序和App的Android端阻塞问题影响了高性能应用的制作。

renderjs运行在视图层，可以直接操作视图层的元素，避免通信折损。

  • 在视图层操作dom，运行for web的js库 官方不建议在uni-app里操作dom，但如果你不开发小程序，想使用一些操作了dom、window的库，其实可以使用renderjs来解决。

在app-vue环境下，视图层由webview渲染，而renderjs运行在视图层，自然可以操作dom和window。

使用方法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<script module="test" lang="renderjs">
    export default {
        mounted() {
            // ...
        },
        methods: {
            // ...
        }
    }
</script>

方式二（不建议）

用 html 5+ 或者 web-view内嵌h5去实现地图

地图为单独的一个webview界面

App端的webview是非常强大的，可以更灵活的控制和拥有更丰富的API。

数据目录那一块的功能要在内嵌的html上写 或者在uniapp弄一个侧边栏

image-20230618132847453

方式三（不建议）

由于目前市面上的app大部分是由原生和H5独立或混合编写，可对原生项目进行改造，实现原生(Android)和uni-app以及html5项目混编，使其能在iOS、Android、H5、小程序等多个平台运行，从而实现跨平台开发。

第一种实现方式：在uni-app宿主项目中添加原生以及H5插件模块

第二种实现方式：在原生宿主项目中运行uni-app以及H5插件模块