uni-app renderjs通信与具体例子

钻石葫芦 發表於 2022-8-25 10:21:00

一、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 方式，可以直接访问逻辑层数据。 
<h2 id="uni-apprenderjs通信与具体例子-二、renderjs与逻辑层通信示例">二、renderjs与逻辑层通信示例</h2>
<template>
  <view>
<text>renderjs区域</text>
页面 view 中监听变量msg

        <view @click="renderScript.emitData" :msg="msg" :change:msg="renderScript.receiveMsg" class="renderjs" id="renderjs-view">
        </view>

 
        <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 的两个例子（具体使用方法）
<h2 id="uni-apprenderjs通信与具体例子-三、利用renderjs引入echarts">三、利用renderjs   引入echarts</h2>
 echarts
<template>
<view class="content">

<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
<button @click="changeOption">更新数据</button>


<view>非 APP、H5 环境不支持</view>

</view>
</template>
 
<script>
export default {
data() {
return {
option: {
title: {
text: 'ECharts 示例'
},
tooltip: {},
legend: {
data: ['数据']
},
xAxis: {
data: ["一类", "二类", "三类", "四类", "五类", "六类"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: 
}]
}
}
},
onLoad() {
 
},
methods: {
changeOption() {
const data = this.option.series.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>
 
<h2 id="uni-apprenderjs通信与具体例子-四、利用renderjs引入高德地图">四、利用renderjs   引入高德地图</h2>
 
<template>
<view>
<view class="message">{{message}}</view>

 
<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: ,
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>
  
来源：https://www.cnblogs.com/fqs123456/p/16623389.html

頁: [1]

琼殿技术论坛's Archiver

uni-app renderjs通信 与具体例子

uni-app renderjs通信与具体例子