DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2019-04-18 12:53
  • 更新:2022-11-26 18:02
  • 阅读:57180

uni-app自定义组件模式开发注意事项

分类:uni-app

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 只能创建一个连接,有需求的用户可改用老的模板编译模式。
9 关注 分享
sonicsunsky 秋凡 今天回复我了吗 1***@qq.com 3***@qq.com u***@u-read.cn 3***@qq.com gigi 东方飞鱼

要回复文章请先登录注册

水手

水手

回复 gsgundam :
微信小程序 组件 onload onShow 都正常执行,就app 不执行
2019-10-09 11:35
w***@163.com

w***@163.com

回复 是在下输了 :
请问解决了吗?
2019-10-09 10:17
w***@163.com

w***@163.com

回复 4***@qq.com :
请问这个问题解决了吗
2019-10-09 10:15
w***@163.com

w***@163.com

回复 老司机开个车 :
我也是这个问题,请问您解决了吗
2019-10-09 10:15
w***@163.com

w***@163.com

echarts按照步骤改后,不报错,但是没有显示图表
2019-10-09 10:07
z***@hotmail.com

z***@hotmail.com

大坑套小坑,小坑套老坑,坑里还有水,水里还有钉,下去就没影
2019-09-27 15:58
gsgundam

gsgundam

回复 6***@qq.com :
我目前的解决方式是把onShow的代码放到另外一个方法里(例如onParentShow),然后在父级里调用组件里这个onParentShow……反正感觉怪怪的,这种强制升级很要命,兼容性太弱了
2019-09-27 14:38
是在下输了

是在下输了

echarts按上面的步骤改了之后,不报错,但是没有显示图表,外层的view也加了宽高,这是为什么?
2019-09-25 10:51
超长

超长

EPERM: operation not permitted, mkdir,为什么连编译都无法编译了,小程序报错,H5正常
2019-09-23 17:51
6***@qq.com

6***@qq.com

组件onLoad生命周期用不了,可以用created代替,但是页面需要传参的话,created是无法接收到上个页面传来的参数。。。还有一点很致命的,就是onShow函数营业不起作用了,怎么搞,求求求救。。
2019-09-23 15:46