uni-app renderjs通信 与具体例子
一、renderjs使用
renderjs是一个运行在视图层的js。它只支持app-vue和h5。
renderjs的主要作用有2个：
1.大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力
2.在视图层操作dom，运行for web的js库
使用时的注意事项
1.目前仅支持内联使用。
2.不要直接引用大型类库，推荐通过动态创建 script 方式引用。
3.可以使用 vue 组件的生命周期不可以使用 App、Page 的生命周期
4.视图层和逻辑层通讯方式与 WXS 一致，另外可以通过 this.$ownerInstance 获取当前组件的 ComponentDescriptor 实例。
5.观测更新的数据在视图层可以直接访问到。
6.APP 端视图层的页面引用资源的路径相对于根目录计算，例如：./static/test.js。
7.APP 端可以使用 dom、bom API，不可直接访问逻辑层数据，不可以使用 uni 相关接口（如：uni.request）
8.H5 端逻辑层和视图层实际运行在同一个环境中，相当于使用 mixin 方式，可以直接访问逻辑层数据。
二、renderjs与逻辑层通信示例
<template>
<view>
<text>renderjs区域</text>
页面 view 中监听变量msg
<!-- 监听变量msg 调用renderScript的receiveMsg方法-->
<view @click="renderScript.emitData" :msg="msg" :change:msg="renderScript.receiveMsg" class="renderjs" id="renderjs-view">
</view>
<!-- 调用renderScript的click方法-->
<button @click="changeMsg" class="app-view">app-view</button>
</view>
</template>
<script>
export default {
data() {
return {
msg: ''
};
},
methods: {
// 触发逻辑层出入renderjs数据改变
changeMsg() {
this.msg = 'hello renderjs' + Math.random() * 10;
},
// 接收renderjs发回的数据
receiveRenderData(val) {
console.log('receiveRenderData-->', val);
}
}
};
</script>
<script module="renderScript" lang="renderjs">
export default {
data() {
return {
name: 'render-vm'
}
},
mounted() {
const view = document.getElementById('renderjs-view')
const button = document.createElement('button')
button.innerText = '一个按钮'
view.appendChild(button)
},
methods: {
// 接收逻辑层发送的数据
receiveMsg(newValue, oldValue, ownerVm, vm) {
//数据变化
console.log('newValue', newValue)
console.log('oldValue', oldValue)
console.log('ownerVm', ownerVm)
console.log('vm', vm)
},
// 发送数据到逻辑层
emitData(e, ownerVm) {
ownerVm.callMethod('receiveRenderData', this.name)
}
}
};
</script>
下面是uniapp 使用 renderjs 的两个例子（具体使用方法）
三、利用renderjs 引入echarts
echarts
<template>
<view class="content">
<!-- #ifdef APP-PLUS || H5 -->
<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
<button @click="changeOption">更新数据</button>
<!-- #endif -->
<!-- #ifndef APP-PLUS || H5 -->
<view>非 APP、H5 环境不支持</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {
option: {
title: {
text: 'ECharts 示例'
},
tooltip: {},
legend: {
data: ['数据']
},
xAxis: {
data: ["一类", "二类", "三类", "四类", "五类", "六类"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
}
},
onLoad() {
},
methods: {
changeOption() {
const data = this.option.series[0].data
// 随机更新示例数据
data.forEach((item, index) => {
data.splice(index, 1, Math.random() * 40)
})
},
onViewClick(options) {
console.log(options)
}
}
}
</script>
<script module="echarts" lang="renderjs">
let myChart
export default {
mounted() {
if (typeof window.echarts === 'function') {
this.initEcharts()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
script.src = 'static/echarts.js'
script.onload = this.initEcharts.bind(this)
document.head.appendChild(script)
}
},
methods: {
initEcharts() {
myChart = echarts.init(document.getElementById('echarts'))
// 观测更新的数据在 view 层可以直接访问到
myChart.setOption(this.option)
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {
console.log(newValue,'newvalue')
// 监听 service 层数据变更
myChart.setOption(newValue)
},
onClick(event, ownerInstance) {
// 调用 service 层的方法
ownerInstance.callMethod('onViewClick', {
test: 'test'
})
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.echarts {
margin-top: 100px;
width: 100%;
height: 300px;
}
</style>
四、利用renderjs 引入高德地图
<template>
<view>
<view class="message">{{message}}</view>
<!-- :message="message" :change:message="renderTest.messageChanged"
service层一旦message发生改变，会调用 renderjs中的messageChanged的方法
-->
<!-- service层data中数据的改变操作放在service层 -->
<view @click="renderTest.onClick" :message="message" :change:message="renderTest.messageChanged" :prop="message" :change:prop="renderTest.changeWatch" id="renderId"></view>
</view>
</template>
<script>
// service 层
export default {
data() {
return {
message: "这是service的测试message"
}
},
onLoad() {
plus.navigator.closeSplashscreen()
},
methods: {
onViewClick(options) {
console.log(options)
this.message = options.test
uni.showModal({
title: "数据传递",
content: options.test
})
},
getMessage(options){
console.log("测试renderjs调用此方法："+JSON.stringify(options))
}
}
}
</script>
<style>
.message {
font-size: 22px;
margin-top: 80px;
}
</style>
<script module="renderTest" lang="renderjs">
export default {
data() {
return {
map:null
}
},
mounted() {
// console.log(this.message,"renderjs中可以使用service层传递来的数据")
// 引入高德地图
if (typeof window.AMap === 'function') {
this.initAmap()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=yourkey'
script.onload = this.initAmap.bind(this)
document.head.appendChild(script)
}
},
methods: {
initAmap() {
// 初始化
this.map = new AMap.Map('amap', {
resizeEnable: true,
center: [117.000923, 36.675807],
zoom: 11
})
let marker = new AMap.Marker({
position: this.map.getCenter()
})
markers.push(marker)
this.map.add(marker)
},
// id 为 renderId的区域，点击触发的事件
onClick(event, ownerInstance) {
// 调用 service层的onViewClick方法,传值
console.log(this.message,"************************")
ownerInstance.callMethod('onViewClick', {
test: '这是点击renderjs的区域，向service层传递变量'
})
},
messageChanged(newValue, oldValue, ownerVm, vm){
console.log("newValue*********"+newValue)
console.log("oldValue*********"+oldValue)
ownerVm.callMethod('getMessage',{
test: '123'
})
}
}
}
</script>
<style lang="scss" scoped>
#renderId {
width: 100%;
height: 2rem;
}
</style>
