This page is translated by Google Cloud Translation API

Switch to Chinese

renderjs

renderjs is a js that runs in the view layer. It is more powerful than WXS. It only supports app-vue and web.

renderjs has two main functions:

1. Significantly reduce the communication loss between the logic layer and the view layer, and provide high-performance view interaction capabilities
2. Operate the dom in the view layer and run the js library for web

Platform difference description

App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序
√(2.5.5+, vue only)	√	x	x	x	x	x

• The view layer of nvue is native and cannot run js. However, bindingx technology is provided to solve communication blocking. See details
• The alternative under the WeChat MiniApp is wxs, which is a tailored version of renderjs provided by WeChat. See
• There is no communication block between the logic layer and the view layer under the web, and the DOM can also be directly manipulated, so the use of renderjs on the web side is mainly for cross-end reuse of code. If you only develop the web side, there is no need to use renderjs.

Usage mode

Set lang of script node to renderjs

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

Example

• uses the complete echarts on app and h5 through renderjs

Function details

• Greatly reduce the communication loss between the logic layer and the view layer, and provide high-performance view interaction capability

The app-side logic layer of uni-app is separated from the view layer. This mechanism has many benefits, but it also has a side effect of blocking communication between the two layers. In particular, the blocking problem on the Android side of the App affects the production of high-performance applications.

renderjs runs on the view layer and can be used to directly manipulate the elements of the view layer to avoid communication loss.

In the canvas example of hello uni-app, renderjs is used on the App side, and the renderjs running in the view layer directly operates the canvas of the view layer, realizing a smooth canvas animation example far exceeding the WeChat applet. Specifically, experience it in the example of hello uni-app, and compare the performance difference between the App side and the applet side.

• Operate the dom in the view layer and run the js library for web

The official does not recommend operating dom in uni-app, but if you do not develop small programs and want to use some libraries that operate dom and window, you can actually use renderjs to solve it.

In the app-vue environment, the view layer is rendered by the webview, and renderjs runs on the view layer, which can naturally operate dom and window.

This is an example of running the full version of echart based on renderjs: renderjs version of echart

In the same way, libraries such as f2 and threejs can all be used in this way.

Precautions

• Currently, only inline use is supported.
• Do not directly reference large class libraries, it is recommended to reference by dynamically creating scripts.
• 可以使用 vue 组件的生命周期(不支持 beforeDestroy、destroyed、beforeUnmount、unmounted)，不可以使用 App、Page 的生命周期
• 视图层和逻辑层通讯方式与 WXS 一致，另外可以通过 this.$ownerInstance 获取当前组件的 ComponentDescriptor 实例。
• Note that when the logic layer gives data to the rendering layer, it is best to give it to the rendering layer at one time, instead of constantly sending messages from the logic layer to the rendering layer, which will still cause multiple communications between the logic layer and the view layer, or will be stuck
• The observation updated data can be directly accessed in the view layer.
• The path of the page reference resource in the APP side view layer is computed relative to the root directory, for example:./static/test.js.
• APP 端可以使用 dom、bom API，不可直接访问逻辑层数据，不可以使用 uni 相关接口（如：uni.request）
• H5 端逻辑层和视图层实际运行在同一个环境中，相当于使用 mixin 方式，可以直接访问逻辑层数据。
• vue3 项目不支持 setup script 用法。