在Uni-APP中使用RenderJs

本文最后更新于$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 获取到需要操作的页面。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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状态,来实现从【逻辑层】调用【视图层】的函数。

1
2
3
4
5
//逻辑层代码,在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也是一个灵活的办法。