uni-app renderjs通信

喜欢说两句的猫依漓漓 發表於 2021-11-24 17:48:00

renderjs使用 renderjs是一个运行在视图层的js。它只支持app-vue和h5。
renderjs 不能使用 uni.$on和 uni.$emit 通信。 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与逻辑层通信示例 <template> <view> <text>renderjs区域</text> <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>
 
———————————————— 版权声明：本文为CSDN博主「辛巴德2018」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_39217871/article/details/109623217 
来源：https://www.cnblogs.com/telwanggs/p/15599244.html

頁: [1]

琼殿技术论坛's Archiver

uni-app renderjs通信