renderjs的使用

在uniapp中使用了某些前端库或iframe，需要操作这些库中的dom的时候，而uni上又没有document等基础对象。也就无法操作这些dom去实现一些交互逻辑，那么，涉及到这些的前端类库就无法使用，例如html2、canvas、image。而要用这些怎么办，这是用就出现了renderjs这种视图层工具来进行渲染。大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力

使用方法：

1. 在原有script下方再添加script，其中lang="renderjs"固定, module=“demo”，module的名字任意起

2. 可以通过 this.$ownerInstance 获取当前组件的 ComponentDescriptor 实例。类似于vm

3. 视图层绑定事件通过 module名称 . 逻辑层定义方法，有两个参数，1.事件对象event，2. 当前组件实例ComponentDescriptor

4. 两个script间的通信需要通过：this.$ownerInstance 全局组件实例或者事件参数ComponentDescriptor 身上的callMethod方法，去抛出方法、传值，类似于vue组件间emit

5. 可以使用 vue 组件的生命周期不可以使用 App、Page 的生命周期

视图层使用

逻辑层事件

renderjs&script ——> script

普通script

演示代码

<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方法,传值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>

renderjs的使用相关推荐

HQChart使用教程63-uniapp使用renderjs+hqchart(h5)
HQChart使用教程63-uniapp使用renderjs+hqchart 序步骤 1. 安装依赖模块 2. 创建 renderjs qhchart模块 3. 使用HQChartCtrl对hqch ...
uniapp app端运用renderjs使用turnjs，打造电子书仿真翻书效果
1.首先: renderjs是一个运行在视图层的js.它比WXS更加强大.它只支持app-vue和web. turn.js官网在这里: Turn.js: The page flip effec ...
uniapp + renderjs + heatmap.js 实现热力图
uniapp + renderjs + heatmap.js 实现热力图 app项目中需要热力图展示,第一次用uniapp的renderjs操作dom,遇到了一些坑,包括引入组件,请求传参啥的项目安 ...
uniapp app端使用html2canvas和renderjs实现生成海报图
uniapp app端使用html2canvas和renderjs实现生成海报图原本app端是无法使用html2canvas的因为,app端不支持浏览器js. 不过我在uniapp里面看到了rend ...
uni-app 使用vue的语法+小程序的标签和API。
开发规范为了实现多端兼容,综合考虑编译速度.运行性能等因素,uni-app 约定了如下开发规范: 页面文件遵循 Vue 单文件组件 (SFC) 规范组件标签靠近小程序规范,详见uni-app 组件 ...
三种主流快平台技术测评，你更青睐谁？
[CSDN 编者按]每当我们评估新技术时要问的第一个问题就是"它会给我们的业务和客户带来哪些价值?",工程师们很容易对闪闪发光的新事物着迷,却经常会忽略这些新事物其实可能对我们的客 ...
2021-12-2 uniapp地图定位的研究
文章重点是我研究的历程与成果,另外一些遇到的小问题分析. 学习目标: 这次的研究只针对两个需求:一个是将中文的地址在地图上标记出来,另外一个是唤起第三方的地图做路线规划以及导航,在这个基础上,我们都知 ...
uniapp打包发布至app端 echarts图表不显示问题
原因:uni中非web端运行在V8引擎中,不支持web端的window.document.navigator等浏览器的API,只支持标准ES语法.因此借助网上的参考,进行Echarts组件封装,借助r ...
uniapp 简单有效判断手指滑动方向
@touchstart="touchStart"@touchend="touchEnd"@touchmove='move' 首先是在uniapp中运用这三个方 ...

renderjs的使用

renderjs的使用相关推荐

最新文章

热门文章