Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
646dc552
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3172
Star
105
Fork
804
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
93
列表
看板
标记
里程碑
合并请求
67
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
93
Issue
93
列表
看板
标记
里程碑
合并请求
67
合并请求
67
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
未验证
提交
646dc552
编写于
8月 23, 2022
作者:
DCloud_Heavensoft
提交者:
Gitee
8月 23, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update docs/tutorial/renderjs.md.
Signed-off-by:
heavensoft
<
wanganxp@163.com
>
上级
22f16d6a
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
10 addition
and
4 deletion
+10
-4
docs/tutorial/renderjs.md
docs/tutorial/renderjs.md
+10
-4
未找到文件。
docs/tutorial/renderjs.md
浏览文件 @
646dc552
## renderjs
`renderjs`
是一个运行在视图层的js。它比
[
WXS
](
/tutorial/miniprogram-subject.html#wxs
)
更加强大。它只支持app-vue和h5
。
`renderjs`
是一个运行在视图层的js。它比
[
WXS
](
miniprogram-subject.md#wxs
)
更加强大。它只支持app-vue和web
。
`renderjs`
的主要作用有2个:
-
大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力
-
在视图层操作dom,运行for web的
js库
1.
大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力
2.
在视图层操作dom,运行 for web 的
js库
**平台差异说明**
...
...
@@ -11,6 +11,10 @@
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√(2.5.5+,仅支持vue)|√|x|x|x|x|x|
-
nvue的视图层是原生的,无法运行js。但提供了bindingx技术来解决通信阻塞。
[
详见
](
nvue-api.md#bindingx
)
-
微信小程序下替代方案是wxs,这是微信提供的一个裁剪版renderjs。
[
详见
](
miniprogram-subject.md#wxs
)
-
web下不存在逻辑层和视图层的通信阻塞,也可以直接操作dom,所以在web端使用renderjs主要是为了跨端复用代码。如果只开发web端,没有必要使用renderjs。
### 使用方式
设置 script 节点的 lang 为 renderjs
...
...
@@ -34,13 +38,14 @@
### 功能详解
-
大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力
逻辑层和视图层分离有很多好处,但也有一个副作用是在造成了两层之间通信阻塞。尤其是小程序和
App的Android端阻塞问题影响了高性能应用的制作。
uni-app的app端逻辑层和视图层是分离的,这种机制有很多好处,但也有一个副作用是在造成了两层之间通信阻塞。尤其是
App的Android端阻塞问题影响了高性能应用的制作。
`renderjs`
运行在视图层,可以直接操作视图层的元素,避免通信折损。
在hello uni-app的canvas示例中,App端使用了
`renderjs`
,由运行在视图层的
`renderjs`
直接操作视图层的canvas,实现了远超微信小程序的流畅canvas动画示例。具体在
[
hello uni-app
](
https://m3w.cn/uniapp
)
示例中体验,对比App端和小程序端的性能差异。
-
在视图层操作dom,运行for web的js库
官方不建议在uni-app里操作dom,但如果你不开发小程序,想使用一些操作了dom、window的库,其实可以使用
`renderjs`
来解决。
在app-vue环境下,视图层由webview渲染,而
`renderjs`
运行在视图层,自然可以操作dom和window。
...
...
@@ -56,6 +61,7 @@
*
不要直接引用大型类库,推荐通过动态创建 script 方式引用。
*
可以使用 vue 组件的生命周期不可以使用 App、Page 的生命周期
*
视图层和逻辑层通讯方式与
[
WXS
](
/tutorial/miniprogram-subject.html#wxs
)
一致,另外可以通过 this.$ownerInstance 获取当前组件的 ComponentDescriptor 实例。
*
注意逻辑层给数据时最好一次性给到渲染层,而不是不停从逻辑层向渲染层发消息,那样还是会产生逻辑层和视图层的多次通信,还是会卡
*
观测更新的数据在视图层可以直接访问到。
*
APP 端视图层的页面引用资源的路径相对于根目录计算,例如:./static/test.js。
*
APP 端可以使用 dom、bom API,不可直接访问逻辑层数据,不可以使用 uni 相关接口(如:uni.request)
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录