renderjs

renderjs 是一个运行在视图层的js。它比 WXS更加强大。它只支持 H5。

renderjs的主要作用有2个：

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

平台差异说明

H5	微信小程序	小红书小程序	快手小程序	抖音小程序
√	x	x	x	x

• 微信小程序下替代方案是wxs，这是微信提供的一个裁剪版 renderjs 。详见
• web下不存在逻辑层和视图层的通信阻塞，也可以直接操作dom，所以在web端使用renderjs主要是为了跨端复用代码。如果只开发web端，没有必要使用renderjs。

使用方式

设置 script 节点的 lang 为 renderjs

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

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

示例

• 通过 renderjs ，在 h5 端使用完整的 echarts

功能详解

• 大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力

renderjs运行在视图层，可以直接操作视图层的元素，避免通信折损。

• 在视图层操作 dom ，运行 for web 的 js 库

官方不建议在 qinjs 里操作 dom，但如果你不开发小程序，想使用一些操作了 dom、window 的库，其实可以使用 renderjs 来解决。

这是一个基于 renderjs 运行 echart 完整版的示例：renderjs版echart

同理， f2 、 threejs 等库都可以这么用。

注意事项

• 目前仅支持内联使用。
• 不要直接引用大型类库，推荐通过动态创建 script 方式引用。
• 可以使用 vue 组件的生命周期(不支持 beforeDestroy、destroyed、beforeUnmount、unmounted)，不可以使用 App、Page 的生命周期
• 视图层和逻辑层通讯方式与 WXS 一致，另外可以通过 this.$ownerInstance 获取当前组件的 ComponentDescriptor 实例。
• 注意逻辑层给数据时最好一次性给到渲染层，而不是不停从逻辑层向渲染层发消息，那样还是会产生逻辑层和视图层的多次通信，还是会卡
• 观测更新的数据在视图层可以直接访问到。
• H5 端逻辑层和视图层实际运行在同一个环境中，相当于使用 mixin 方式，可以直接访问逻辑层数据。
• vue3 项目不支持 setup script 用法。