RenderJS

renderjs是一个运行在视图层的js。它比WXS更加强大。它支持小程序端跟h5。

renderjs的主要作用有2个：

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

使用方式

设置 script 节点的 lang 为 renderjs

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

示例

• 通过renderjs， 在小程序中使用完整的echarts跟f2 (opens new window)
• demo包下载完成后，可以通过小程序开发者工具导入运行，查看示例。

功能详解

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

• bz-app的app端逻辑层和视图层是分离的，这种机制有很多好处，但也有一个副作用是在造成了两层之间通信阻塞。尤其是App的Android端阻塞问题影响了高性能应用的制作。

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

• 在hello bz-app的canvas示例中，App端使用了renderjs，由运行在视图层的renderjs直接操作视图层的canvas，实现了远超微信小程序的流畅canvas动画示例。

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

在一般场景下，不推荐使用dom操作，但是想要在小程序中使用一些有dom操作或使用window对象的类库，其实可以使用renderjs来解决

比如，常见的threejs等库都可以这么来使用

注意事项

• 目前仅支持内联使用。
• 不要直接引用大型类库，推荐通过动态创建 script 方式引用。
• 可以使用 vue 组件的生命周期(不支持 beforeDestroy、destroyed、beforeUnmount、unmounted)，不可以使用 App、Page 的生命周期。
• 视图层和逻辑层通讯方式与 WXS 一致，另外可以通过 this.$ownerInstance 获取当前组件的 ComponentDescriptor 实例。
• 注意逻辑层给数据时最好一次性给到渲染层，而不是不停从逻辑层向渲染层发消息，那样还是会产生逻辑层和视图层的多次通信，还是会卡。
• 观测更新的数据在视图层可以直接访问到。
• 小程序视图层的页面引用资源的路径相对于根目录计算，例如：./static/test.js。
• 小程序可以使用 dom、bom API，不可直接访问逻辑层数据，不可以使用 bz 相关接口（如：bz.request）。
• PC端逻辑层和视图层实际运行在同一个环境中，相当于使用 mixin 方式，可以直接访问逻辑层数据。而ios跟安卓上运行，无法直接在视图层也就是 renderjs 中直接访问到$scope上的变量（vue的data）。需要通过视图节点绑定 prop 透传，具体可以查看前面的官方示例查看具体用法。