uni-app之RenderJS指南

很多时候，我们希望我们开发的App或者H5能运行一些For Web的库，例如ThreeJS、F2、ECharts等，或单纯希望能方便操作DOM，制作一些高性能动画。

这种情况我们就可以使用RenderJS。

建议先看上一篇的WXS指南，会更方便了解RenderJS。

RenderJS和WXS的实现原理类似，都运行在渲染层，但是因为RenderJS放弃了小程序端兼容，因此可以更直接的操作web端的DOM和BOM。

RenderJS入门指南

与WXS的区别

不支持微信小程序，只支持 H5、APP；

以 Vue 组件写法运行在渲染层，支持 Vue 组件生命周期，无 WXS 语法限制（可以使用 es6语法）；

<!-- 支持vue组件写法 -->
<script module="test" lang="renderjs">
export default {
  data() {
    return {}
  },
  mounted() {
    // ...
  },
  methods() {
    // ...
  }
}
</script>

可以使用 dom、bom API；

// 可以直接访问dom、bom API
if (!window.test) {
  // ...
}
document.getElementById('#test')

可以直接使用 this.$ownerInstance 获取当前组件的 ComponentDescriptor 实例；
观测更新的数据在 view 层可以直接访问到；

view层的页面运行在根目录，其相对路径相对于根目录计算。

const script = document.createElement('script')
// 运行在根目录，不管当前页面/组件在什么路径下，相对路径都是使用根目录路径
// 例如big-lib.js 在 <根目录>/static/lib/big-lib.js
script.src = 'static/lib/big-lib.js'
script.onload = () => {
  // ... 脚本加载完成回调
}
document.head.appendChild(script)

使用RenderJS需要注意的一些点

不要直接引用大型js库，推荐通过动态创建 script 方式引用（见上面代码片段）；
动态创建时 js库文件一定要在 static 目录；
renderjs可以直接获取到观测更新数据，但是在APP中一定要使用:prop=”xxx” :change:prop=”xxx”绑定，不然无法获取，在h5中由于实现方式不一致，可以直接获取页面/组件数据。所以为了兼容三端，最好是防止RenderJS和当前组件/页面命名冲突，且不要去获取非观测数据。

renderjs使用示例

<template>
  <view 
    :prop="options" 
    :change:prop="testRenderJs.optionsChange" 
    class="content"
  >
  </view>
</template>
<script module="testRenderJs" lang="renderjs">
export default {
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 可以获取观测更新数据
      console.log(this.options)
    },
    optionsChange() {
      // ...
    }
  }
}
</script>
<script>
export default {
  data() {
    return {
      options: {
        enable: false,
      }
    }
  }
}
</script>

那今天关于renderjs的入门指南就到这啦，想了解更多详细信息，可以参考下面的官方文档：

uni-app renderjs文档：https://uniapp.dcloud.io/frame?id=renderjs