在Uni-APP中使用RenderJs

发布 2020-10-28
更新 2024-01-20
阅读

本文最后更新于$day天前，文中所描述的信息可能已发生改变。

1、前言

RenderJs是UniApp最近推出运行在视图层的js。它比WXS更加强大。它只支持app-vue和h5。主要功能是用来支持一些需要操作DOM的JS插件，或者需要高性能canvas的工具。例如运行F2、echarts图表等。但是官方文档比较简单，H5展现基本问题不大，如果要编译到App，则会出现问题。调试也麻烦，所以我写这篇文章补充一下一些常见问题，然后开始写一下教程。

①、RenderJs运行的层叫【视图层】，Uniapp原生Script叫【逻辑层】，千万不要搞混。

②、他们互相正常不能直接调用，逻辑层要调用视图层需要使用一个叫【watcher】，官方也只有一笔带过。

③、视图层不能直接使用逻辑层中data的数据，需要在Dom中绑定。

④、切记要注意要让【逻辑层】先执行，获取到数据后，通过watcher调用视图层绘制图表，因为我还没不清楚他们执行顺序，官方也没明确。

2、RenderJs写法

1	<script module="echarts" lang="renderjs"></script>

module是必须命名，以便可以在绑定数据时通过数据改变，触发【视图层】的函数。这个名字是随意的。

1
2
3

<template>
<view id="echarts"></view>
</template>

id记得要写上，以便在【视图层】使用 document.getElementById 获取到需要操作的页面。

在【视图层】，生命周期类似。我们添加一些代码进去。

<script module="echarts" lang="renderjs">
export default {
mounted() {

//挂载后执行。
},
methods: 
initEcharts() {
myChart = echarts.init(document.getElementById('echarts'))
// 观测更新的数据在 view 层可以直接访问到
myChart.setOption(this.option)
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
myChart.setOption(newValue);
alert(this.debugtxt)

},
onClick(event, ownerInstance) {
// 调用 service 层的方法
ownerInstance.callMethod('onViewClick', {
test: 'test'
})
}
}
}
</script>

代码都是官方文档的，但是他基本上没有详细说明为什么要这样做。

我们先要知道，【视图层】要获取数据必须在template中绑定，如果要从【逻辑层】调用【视图层】数据，也必须通过template绑定一个事件进行触发，！！不能直接调用！！，你在Html5中，可以实现的方法，到APP端会全部失效。这个非常致命。我们来解析一下template中代码的意思。

1	<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts" ></view>

@click 当view点击的时候，通过【模块名.事件】触发【视图层】函数

:prop 其实这个名字改什么都可以， :变量名=”逻辑层数据” ，通过这个方法绑定你在逻辑层数据，以便可以方便【视图层】调用。

:change:prop 这个是从【逻辑层】调用【视图层】的一个重要地方。 :change:变量通过观察在【逻辑层】中的数据，来触发【视图层】 updateEcharts 函数。在官方canvas的Demo中，用上了以下代码：

1 2	<canvas canvas-id="canvas" class="canvas" :start="startStatus" :change:start="animate.start" :data-width="canvasWidth" :data-height="canvasWidth"></canvas>

官方通过改变startStatus状态，来实现从【逻辑层】调用【视图层】的函数。

//逻辑层代码，在198行
             
// #ifdef APP-PLUS  H5
   this.startStatus = true
// #endif

最后，从【视图层】调用【逻辑层】的函数，相对简单，即ownerInstance.callMethod 即可。

3、参考文档

https://ext.dcloud.net.cn/plugin?id=1207 renderjs-echarts-demo

https://uniapp.dcloud.net.cn/frame?id=renderjs 官方介绍

内置的 Hello uni-app 中 canvas.vue 有介绍如何使用高性能canvas及兼容小程序。

https://blog.csdn.net/jones2000/article/details/106933985 HQChart使用教程63-uniapp使用renderjs+hqchart(h5)

4、结尾

由于用了renderjs已经放弃了小程序端，在使用图表多应用下，也是唯一办法，原本使用uCharts,但是图表样式无法完全配合，只能另觅方法。希望F2能完整移植到uni-app。看看以后有没有办法吧，使用renderjs也是一个灵活的办法。