前言
renderjs是一个运行在视图层的js,它只支持app-vue和h5, 主要服务于APP
对于UNI APP端的开发而言，由于上并没有document，不能进行相关的DOM操作，同时有关DOM渲染的第三方库(echart、openlayer、canvas等)也无法有效的使用，因此官方推出了renderjs方案，来解决上述问题。
一、renderjs作用：
大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力，减少通讯损耗提升性能
在视图层操作dom，运行for web的js库（可以操作dom，意味着拥有window、document等这些全局变量，在app-vue的service层没有这些）
二、renderjs和service层的通信
具体分为三部分：
1.在template中通过用户手动操作触发事件
2.在service层中调用方法
3.在renderjs中调用方法
从renderjs到service层：通过this.$ownerInstance.callMethod()方法可以调用service中的方法，第一个参数是方法名，第二个参数是传过去的参数
三、renderjs的使用
概述：
原生层数据通过监听传入renderjs层（可以通过调用原生层的方法触发）
直接调用renderjs层方法传出的数据
注意：
设置 script 节点的 lang 为 renderjs
script的module的名称可以随便取，module=(值任意，相当于命名空间，之后会根据这个名字调用其中的方法),但是change:参数名称必须和module保持一致，虽然不会阻断renderjs的运行，但是会报错，也会导致无法捕获数据的变化
<template>
<view class="page-body">
<!-- prop是一个名字，可以随意修改，注意：change:[name]这两个名字需要相同就行了
从service层到renderjs：首先在template中绑定一个service中定义的值，然后在同样的位置
增加：change:(属性名)=(renderjs的module名，触发的方法)来实现通信。
简单来说就是service负责数据的更改，通过template监听数据的变化来通知renderjs
this.$ownerInstance.callMethod方法必须通过点击事件执行 -->
<!-- msg是要向renderjs发送的数据，testRenderjs为renderjs模块名称，onChange是renderjs中的监听方法 -->
<view :prop="msg" :change:prop="testRenderjs.onChange" id="renderjs-view">{
{msg}}
</view>
<button @tap="changeMsgFn">点击修改options</button>
<button @tap="testRenderjs.emitData">直接调用renderjs中的emitData方法</button>
</view>
</view>
</template>
<script>
//原先的script,这里被称为service层
export default{
data(){
return{
//这里存放准备传递给renderjs的数据
msg:'我是service层原来的msg'
}
},
methods:{
//触发servuce层出入renderjs数据改变
changeMsgFn(){
//修改msg 触发change
this.msg='msg的值变了'
},
//接收renderjs发回的数据
acceptDataFromRenderjs(data){
console.log('从renderjs中接收到的数据',data)
this.msg=data.content;
}
}
}
</script>
<script module="testRenderjs" lang="renderjs">
export default{
data(){
return{
content:'我是来自renderjs的数据'
}
},
created(){
console.log('renderjs初始化完毕')
},
mounted(){
const view=document.getElementById('renderjs-view');
const button=document.createElement('button');
button.innerText='一个按钮';
view.appendChild(button);
},
methods:{
//接收逻辑层service发送到数据
onChange(newValue,oldValue,ownerInstance,instance){
console.log('service层中的options发生变化');
console.log('新值newValue',newValue);
console.log('旧值oldValue',oldValue);
//ownerInstance和this.$ownerInstance一样,可用来向service通信
//instance和ownerInstance的区别是:
//instance.$el指向的是触发事件的那个节点;ownerInstance.$el指向当前vue文件中的根节点
//instance的作用目前尚不明确,官方没有给出用法
},
//发送数据到service层
emitData(event,ownerInstance){
//event是事件对象
ownerInstance.callMethod('acceptDataFromRenderjs',{
content:this.content
})
//或者
// this.$ownerInstance.callMethod('acceptDataFromRenderjs',{
// content:this.content
// })
// 需要注意的是:只有通过在template中用户手动操作触发renderjs的方法参数是这两个:event,ownerInstance;通过其他方法
// 触发的函数参数不一样
}
}
}
</script>注意事项：
目前仅支持内联使用
不要直接引入大型类库,推荐通过创建script方法引入
可以使用vue组件的生命周期不可以使用App Page的生命周期
视图层和逻辑层通讯方式与WXS一致,另外可以通过this.$ownerInstance获取当前组件的ComponentDescriptor实例
观测更新的数据在视图层可以直接访问到
APP端视图层的页面引用资源的路径相对于根目录,例如:./static/test.js
APP端可以使用dom bom API ,不可直接访问逻辑层数据,renderjs不可使用uni或其他框架的API(如:uni.request)，需在原生层调用后触发监听将数据传入
H5端逻辑基层和视图层实际运行在同一个环境下,相当于使用mixin,可以直接访问逻辑层数据
在app端renderjs层的data与原生层的data互不相干
this.$ownerInstance.callMethod方法必须通过点击事件执行
地图方法都要写在renderjs层，不能使用子组件