uniapp中使用render.js进行openers、arcgis等地图操作

uniapp中使用render.js进行openers、arcgis等地图操作

一、为啥需要render.js

        render.js主要作用于APP上，因为Uniapp本质为vue+js+html进行开发，整个技术栈还是H5，对DOM元素进行操作。而APP中没用Dom元素这个概念。因此利用render.js这个视图层的工具来进行渲染。

备注：

app中视图层和逻辑层的概念：

视图层：就是我们看到的APP上的元素，类似于web中的HTML那些

逻辑层：就是APP上实现各种操作的东西，类似于web的js干的事情。

二、render.js干啥的

        运行在视图层的js，大幅度降低逻辑层和视图层的通讯损耗，提高视图交互能力。

在视图层操作DOM，运行web的js库。可以操作DOM。

三、怎么使用render.js

3.1  基本用法

        在原先vue文件内的的script标签的同级新增一个script，设置lang=renderjs，module=(值任意，相当于命名空间，之后会根据这个名字调用其中的方法)。

//test为render.js模块的名称，lang是固定写法  lang="renderjs"表示这个script内是render.js
<script module="test" lang="renderjs">
	export default {
		mounted() {
			// ...
		},
		methods: {
			// ...
		}
	}
</script>

使用注意事项：

1、render.js的生命周期不和uniapp相同，而是和vue相同。

2、可以使用 vue 组件的生命周期(不支持 beforeDestroy、destroyed、beforeUnmount、unmounted)，不可以使用 App、Page 的生命周期

3、视图层和逻辑层通讯方式与 WXS 一致，另外可以通过 this.$ownerInstance 获取当前组件的 ComponentDescriptor 实例。

4、注意逻辑层给数据时最好一次性给到渲染层，而不是不停从逻辑层向渲染层发消息，那样还是会产生逻辑层和视图层的多次通信，还是会卡。

5、观测更新的数据在视图层可以直接访问到

6、APP 端视图层的页面引用资源的路径相对于根目录计算，例如：./static/test.js

特别注意事项：

1.在renderjs层不能使用uni或其他框架的API，例如uni.request、uni.getlocation等等方法，需在原生层调用后触发监听将数据传入。

2.在APP端renderjs层的data与原生层的data互不相干

3.this.$ownerInstance.callMethod方法必须通过点击事件执行

4.地图方法都要写在renderjs层中，不能使用子组件，所以都要传值到render.js中操作，不能再子组件中调用地图的API方法。
5、在template中使用一开始给renderjs的命名加.的方式调用其中的方法