认识renderjs

很多时候我们都需要在视频未播放的时候使用视频第一帧画面当作视频封面。今天借助uniapp的renderjs来实现下在app环境上如何实现。

官网地址
吐槽一下这是我见到的最潦草的官网教程，甚至没有教你如何使用renderjs。

了解renderjs

什么是renderjs？
renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和web。

renderjs有什么作用？

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

对于我们最重要的作用应该就是可以在app环境操作dom，但是注意不要滥用，因为app里面操作dom本来就是官网不推荐的

使用renderjs

首先我们看下他的使用方式

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

这是官网教程里面的唯一一点代码，好在他至少告诉可我们使用renderjs只需要在script 标签上面添加lang="renderjs"就可以了，而上面的module则是renderjs的名称，在为元素绑定方法的时候可以使用。

我们一般把普通的script标签当作逻辑层或者服务层，而renderjs部分称作是视图层。先来看看这两之间的关系：

1. 两个层级之间数据相互独立，互补干涉，也就是说两个层级的data里面可以存在相同的属性名。两个层级里面使用this只能拿到自己层级的数据。
2. 视图层里data里面的数据不能直接在页面显示
3. 可以通过用户触发事件的方式实现视图层向逻辑层传输数据，例如click事件，注意这里发现不能在方法里面添加参数，加了则方法失效，方法默认有两个参数，参数一是事件对象，参数二则也是一个实例对象，里面有一个callMethod方法可以去触发逻辑层的方法以此实现数据传递。

<template>
	<button @mousemove="test.click">anniu</button>
</template>
<script>
	export default {
		methods: {
			getRenderjsData(data) {
				console.log(data); // 我是视图层数据
			}
		}
	}
</script>
<script lang="renderjs" module="test">
	export default {
		data() {
			return {
				num: 2
			}
		},
		methods: {
			click(event, ownerInstance) {
				//ownerInstance.callMethod可以触发逻辑层的方法并传递参数
				console.log(event, ownerInstance);
				ownerInstance.callMethod('getRenderjsData', '我是视图层数据')
			}
		}
	}
</script>

4. 我们还可以通过监听逻辑成的数据 + change:属性名的方法实现逻辑成对视图层的数据传递。

<view class="advert_invset" :prop="num" :change:prop="test.serverDataNumChange">
<script lang="renderjs" module="test">
	export default {
		methods: {
			serverDataNumChange(newValue,oldValue,ownerInstance,instance) {
				this.$ownerInstance.callMethod('getRenderjsData', '222')
				// newValue 数据新值
				// oldValue 数据旧值
				// ownerInstance 用于层级通讯，ownerInstance.$el指向当前vue文件中的根节点 
				// instance节点实例   instance.$el指向的是触发事件的那个节点
			}
		},
	}
</script>

上面的prop是可以随便取名的，只要与chang后面跟的属性名一致就行。chang绑定的方法会有四个默认参数，分别为监听数据的最新值，旧值，ownerInstance（用来向逻辑层传递数据），节点实例。

完整的代码示例

<template>
	<view class="advert_invset" :prop="num" :change:prop="test.serverDataNumChange">
		{{num}}
		<!-- 不能直接使用视图层数据 -->
		<!-- {{test.num}} -->
		<button @mousemove="test.click">anniu</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 1
			}
		},
		methods: {
			getRenderjsData(num) {
				console.log(num); // 2
			}
		}
	}
</script>
<script lang="renderjs" module="test">
	export default {
		data() {
			return {
				num: 2
			}
		},
		mounted() {
			console.log(123123);
			this.$ownerInstance.callMethod('getRenderjsData', '222')
		},
		methods: {
			click(event, ownerInstance) {
				// event事件对象
				// 需要注意的是:只有通过在template中用户手动操作触发renderjs的方法参数是这两个:event,ownerInstance;
				// 也可以直接使用this.$ownerInstance
				ownerInstance.callMethod('getRenderjsData', this.num)
			},
			serverDataNumChange(newValue,oldValue,ownerInstance,instance) {
				this.$ownerInstance.callMethod('getRenderjsData', '222')
				// newValue 数据新值
				// oldValue 数据旧值
				// ownerInstance 用于层级通讯，ownerInstance.$el指向当前vue文件中的根节点 
				// instance节点实例   instance.$el指向的是触发事件的那个节点
			}
		},
	}
</script>