renderjs usage in uni-app

对于UNI APP端的开发而言,Because there is nodocument,cannot be correlatedDOM操作,同时有关DOMRendering third-party library(echart、openlayer等)also cannot be used effectively,Hence the official launchrenderjs方案,来解决上述问题.

renderjs是一个运行在视图层的js

renderjs的主要作用有2个：

大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力
在视图层操作dom,运行for web的js库

renderjs和service层的通信

具体分为三部分：

1.在templateevents are triggered by manual user actions
2.在service层中调用方法
3.在renderjs中调用方法

从renderjs到service层：通过this.$ownerInstance.callMethod()方法可以调用service中的方法,第一个参数是方法名,The second parameter is the parameter passed in the past

使用方式

设置 script 节点的 lang 为 renderjs

script的module的名称可以随便取,module=(值任意,相当于命名空间,The method in it will then be called according to this name),但是change:参数名称必须和module保持一致,Although not blockedrenderjs的运行,但是会报错,It can also cause changes in data not to be captured

<script module="test" lang="renderjs">
	export default {
    
		mounted() {
    
			// ...
		},
		methods: {
    
			// ...
		}
	}
</script>

<template>
	<view>
		<!--  prop是个名字,可以随意改,注意:change:[name]The two names need to be the same  -->
		<!-- 从service层到renderjs：首先在template中绑定一个service中定义的值,Then add at the same location:change:(属性名)=(renderjs的module名.触发的方法)来实现通信.
简单来说就是serviceResponsible for data changes,通过templateMonitor data changes to notifyrenderjs 
			this.$ownerInstance.callMethodThe method must be executed through the click event-->

	<!-- msg是要向renderjs发送的数据,testRenderjs 为renderjs模块名称,onChange是renderjs中的监听方法 -->
		<view :prop="msg" :change:prop="testRenderjs.onChange" id="renderjs-view">{
    {
    msg}}</view>

		<button @tap="changeMsgFn">点击修改options</button>

		<button @tap="testRenderjs.emitData">直接调用renderjs中的emitData方法</button>
	</view>
</template>
<script>
	// 原先的script,这里被称为service层 
	export default {
    
		data() {
    
			return {
    
				// Stored here ready to pass torenderjs的数据  
				msg: "我是servicelayer originalmsg"
			}
		},
		methods: {
    
			// 触发service层 出入renderjs数据改变
			changeMsgFn() {
    
				//  修改msg 触发change
				this.msg = "msg的值变了"
			},
			// 接收renderjs发回的数据
			acceptDataFromRenderjs(data) {
    
				console.log('从renderjs中接收到的数据', data)
				this.msg = data.content
			}
		}
	}
</script>
<!--  testRenderjs 为renderjs模块名称,lang固定写法 -->
<script module="testRenderjs" lang="renderjs">
	export default {
    
		data() {
    
			return {
    
				content:"我是来自renderjs的数据"
			}
		},
		created() {
    
			console.log('renderjs初始化完毕')
		},
		mounted() {
    
			const view = document.getElementById('renderjs-view')
			const button = document.createElement('button')
			button.innerText = '一个按钮'
			view.appendChild(button)
		},
		methods: {
    
			// Receive logic layerservicedata sent by the layer
			onChange(newValue, oldValue, ownerInstance, instance) {
    
				console.log('service层中的options发生变化')
				console.log('新值newValue', newValue)
				console.log('旧值oldValue', oldValue)
				// ownerInstance和this.$ownerInstance一样,可用来向service层通信     
				// instance和ownerInstance的区别是：       
				// instance.$elPoints to the node that triggered the event;ownerInstance.$el指向当前vue文件中的根节点;    
				// instancerole is not yet clear,The official usage is not given   
			},
			// 发送数据到service层
			emitData(event, ownerInstance) {
    
				// event是事件对象
				
				ownerInstance.callMethod('acceptDataFromRenderjs', {
    
					content: this.content
				})
				// 或者
				/* this.$ownerInstance.callMethod('acceptDataFromRenderjs',{
    
					content:this.content
				}) */
				// 需要注意的是：Only throughtemplateTriggered by user manual operationrenderjsThe method parameters are these two：event, ownerInstance;Function parameters triggered by other methods are not the same
			}
			
		}
	}
</script>

uni-app官网文档