uniapp中的RenderJS主要服务于APP和H5平台，其作用包括降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力，以及在视图层操作DOM和运行Web的JS库。
RenderJS是uni-app中一个特性，它允许开发者在页面中使用JavaScript直接渲染原生组件。这在某些情况下可以提供更高的效率和更多的功能，因为它可以直接操作原生组件。
通过RenderJS，可以在APP中操作DOM并实现与原生层的数据交互，解决H5技术栈在APP上的限制，实现高性能的地图功能和视图交互。
一、renderjs的作用是什么？
renderjs 主要服务于APP，因为uni-app为vue+js+html进行编写，整个是h5的技术栈。而app上并没有document等基础对象。那么，涉及到这些的前端类库就无法使用，例如html2、canvas、canvas2、image。而要用这些怎么办，这是用就出现了renderjs这种视图层工具来进行渲染。
运行在视图层的js
大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力（减少通讯损耗提升性能，例如一些手势或canvas动画的场景）
在视图层操作dom，运行for web的js库（可以操作dom，意味着拥有window、document等这些全局变量，在app-vue的service层没有这些）
二、renderjs怎样使用？
1.原生层数据通过监听传入renderjs层(可以通过调用原生层的方法触发)
2.直接调用renderjs层方法传出数据
三、测试代码
<template>
<view>
<view :msg="msg" :change:msg="renderScript.receiveMsg" class="renderjs" id="renderjs-view">
{{msg}}
</view>
<button @click="renderScript.emitData">直接调用renderjs中的emitData的方法</button>
<button @click="changeMsg" class="app-view">改变msg的值,直接调用renderjs中receiveMsg的值</button>
<button @click="renderScript.renferMsg">通过renderjs改变msg的值,同时调用renderjs中的emitData的方法</button>
</view>
</template>
<script>
export default {
data() {
return {
msg: '我是service层原来的msg',
};
},
methods: {
// 触发逻辑层出入renderjs数据改变
changeMsg() {
this.msg = "msg值改变了";
},
// 接收renderjs发回的数据
receiveRenderData(val) {
console.log('renderjs返回的值-->', val);
},
//接收renderjs发回的数据,同时触发:change:msg,调用enderjs中的emitData的方法
serviceClick(e){
this.msg=e
}
}
};
</script>
<script module="renderScript" lang="renderjs">
export default {
data() {
return {
name: '我是renderjs数据'
}
},
methods: {
renferMsg(event, ownerInstance) {
// 调用 service层的serviceClick方法,传值
console.log(event,ownerInstance)
ownerInstance.callMethod('serviceClick', {
test: '这是点击renderjs的区域，向service层传递变量'
})
},
// 接收逻辑层发送的数据
receiveMsg(newValue, oldValue, ownerVm, vm) {
console.log('msg变化了newValue', newValue)
console.log('msg变化了oldValue', oldValue)
console.log('msg变化了ownerVm', ownerVm)
console.log('msg变化了vm', vm)
},
// 发送数据到逻辑层
emitData(e, ownerVm) {
ownerVm.callMethod('receiveRenderData', this.name)
}
}
};
</script>
注意：1.在renderjs层不能使用uni或其他框架的API，例如uni.request、uni.getlocation等等方法，需在原生层调用后触发监听将数据传入。
2.在APP端renderjs层的data与原生层的data互不相干
3.this.$ownerInstance.callMethod方法必须通过点击事件执行
4.地图方法都要写在renderjs层中，不能使用子组件