uni-app renderjs通信
renderjs使用 renderjs是一个运行在视图层的js。它只支持app-vue和h5。 renderjs的主要作用有2个：
大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力 在视图层操作dom，运行for web的js库
使用时的注意事项 目前仅支持内联使用。 不要直接引用大型类库，推荐通过动态创建 script 方式引用。 可以使用 vue 组件的生命周期不可以使用 App、Page 的生命周期 视图层和逻辑层通讯方式与 WXS 一致，另外可以通过 this.$ownerInstance 获取当前组件的 ComponentDescriptor 实例。 观测更新的数据在视图层可以直接访问到。 APP 端视图层的页面引用资源的路径相对于根目录计算，例如：./static/test.js。 APP 端可以使用 dom、bom API，不可直接访问逻辑层数据，不可以使用 uni 相关接口（如：uni.request） H5 端逻辑层和视图层实际运行在同一个环境中，相当于使用 mixin 方式，可以直接访问逻辑层数据。 renderjs与逻辑层通信示例
下面是uniapp 使用 renderjs 的两个例子（具体使用方法） 利用renderjs 引入echarts echarts
<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;
background-color: #00818A;
}
</style>
