什么是render.js
官网介绍：
官网链接：uniapp.dcloud.io/tutorial/re…
简单理解就是可以用来操作dom，重点是可以在app端操作dom，正常情况下app中是获取不到document的，使用了renderjs就可以在app中操作了。 举个例子：我在开发项目中使用了一个树形表格组件，但是这个组件不支持插槽，所有列表只能通过配置数据 代码如下：
我在请求到数据后直接遍历数组将操作的按钮拼成了一段html字符串
页面效果：
此时操作列的红色文字就是上面的span标签 由于组件只提供了行点击事件所以得自己给标签绑定事件，这时候就用到了document，但是绑定了事件只在h5中生效，app端就没反应，因为app没有document，如果想要使用document就需要renderjs 写法如下：
在script标签同级再写一个script标签并指定lang属性为renderjs，在renderjs的script中的写法和vue的script的写法一样，可以使用 vue 组件的生命周期，但是不可以使用 App、Page 的生命周期。
在原来的script标签中定义一个方法用来处理点击事件：
我这里是拿到点击的那一行的数据然后跳转到新增页面，具体操作按自己的实际业务来。
贴上renderjs的完整代码：
我这里引入了Jquery，引入方式参考了官方的echarts demo
注意红框里的内容，一定要把this.$ownerInstance通过参数传进去
方法中接收
触发script中的方法：
第一个参数是方法名，第二个是需要传递的参数。 贴上部分script代码：
export default {
data(){
return {}
},
methods: {
toAdd(option) {
console.log(option);
const {wbsId, taskId, taskName} = option
uni.navigateTo({
url: `/pages/acceptance/inspectionlot/addData?pointId=${this.pointId}&wbsId=${wbsId}&taskId=${taskId}&taskName=${taskName}`
})
},
}
}
</script>
<script module="acceptance" lang="renderjs">
export default {
mounted() {
const script = document.createElement('script')
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
script.src = 'static/js/jquery-3.1.1.min.js'
script.onload = this.initEvent.bind(this, this.$ownerInstance)
document.head.appendChild(script)
},
methods: {
initEvent(ownerInstance) {
// 通过事件委托给按钮添加事件
// 添加事件前先清除事件避免重复绑定
$(document).off("touchend")
// 新增
$(document).on('touchend', '.add', function() {
const wbsId = this.getAttribute('wbsId');
const taskId = this.getAttribute('taskId');
const taskName = this.getAttribute('taskName');
// 调用 service 层的方法
ownerInstance.callMethod('toAdd', {
wbsId: wbsId,
taskId: taskId,
taskName: taskName
})
});
},
}
}
</script>
