uni-app 自 1.8版本开始,新增支持自定义组件模式
,该编译模式组件性能更高,支持更多的Vue语法。
请开发者尽快升级老版项目为自定义组件模式,老版的模板编译模式将不再维护。
Tips: uni-app 不同编译模式差异,参考:https://ask.dcloud.net.cn/article/35843
开发者启用自定义组件模式
后,在进行自定义组件开发(页面开发不影响)时,需注意如下约束
id
为保留属性名,不能作为 props 传递,微信小程序自定义组件限制props
中不能定义data
为属性名,百度小程序限制props
不支持date
类型数据传递,微信小程序自定义组件限制uni.createSelectorQuery()
和uni.createIntersectionObserver()
的调整
// 错误
uni.createSelectorQuery();
uni.createIntersectionObserver();
// 正确
uni.createSelectorQuery().in(this);
uni.createIntersectionObserver(this, options);
uni.createCanvasContext()
的调整
// 错误
uni.createCanvasContext();
// 正确
uni.createCanvasContext('#canvas',this);
Array.length
改为计算属性
// 错误
<view v-if="{Array.length >= 0}"></view>
// 正确
<view v-if="{count}" ></view>
computed: {
count() {
return (Array.length >= 0)
}
}
-
uParse
富文本解析组件的调整
优化了uParse 组件
的性能,如老项目有使用,请直接替换最新组件,使用方式不变:https://ext.dcloud.net.cn/plugin?id=183
其实插件市场有更多三方增强的uparser组件可用,可以搜一下。 -
ECharts
图表组件的调整
替换最新的ucharts
组件, 源码地址:https://ext.dcloud.net.cn/plugin?id=271
使用方式参考 :http://doc.ucharts.cn/1074673
其实插件市场有更多优秀的三方增强的图表组件可用,可以搜一下。 -
css
调整
在编译成微信小程序原生组件的时候,会在组件外增加一层父节点。有可能样式会受到影响,比较典型的就是 flex 布局,请在微信端完成一遍测试。
在字节跳动小程序组件内引入字体会失效,解决方式:在 App.vue 内的 style 节点引入字体。 -
组件内
css
选择器使用
在微信小程序真机运行时,组件内如果使用了 tagName, ID, attribute 三种选择器时,会导致控制台出现告警信息。 所以我们在编写组件时,需要尽量避免使用上述三种选择器。 -
组件生命周期
编译成原生组件的时候,组件的生命周期请严格参考 组件生命周期 中的说明。
需要注意的是,组件不支持 onLoad 等页面的生命周期。 -
仅支持解构插槽
Prop
(支持设置默认值,但不提供重命名)
<!—不支持—>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
<!—支持—>
<template v-slot:default="{user}">
{{ user.firstName }}
</template>
- 组件中引用图片等静态资源时,一定要使用绝对路径,即
/static/logo.png
这样。其实,无论是页面还是组件,引用静态资源时统一采用绝对路径的方式是最优方案。
App额外注意事项
- App使用自定义组件模式,Android会增加6M左右的包体积。原因是App端增加了一个独立的v8以减少js的阻塞。iOS不变化,因为iOS的jscore是iOS自带的。
- 离线打包的项目需要在原生工程里引入 :离线sdk包里的liblibWeex.a库 和 weex-main-jsfm.js 和 weex-polyfill.js文件。
- 在自定义组件编译模式下,HBuilderX 2.4.0+ 支持 crypto.getRandomValues 方法,一些区块链应用的框架会用到此api
- 在自定义组件编译模式下,uni.request 和 websocket 暂时不支持传输 ArrayBuffer 类型的数据,且 websocket 只能创建一个连接,有需求的用户可改用老的模板编译模式。
86 个评论
要回复文章请先登录或注册
zhangdaren
zhangdaren
田心水原
绝影凌霄
田心水原
DCloud_UNI_HT
田心水原
1***@qq.com
DCloud_UNI_HT
s***@126.com