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

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 东方飞鱼

要回复文章请先登录注册

zhangdaren

zhangdaren

回复 zhangdaren :
找到了,是mounted,纳闷的是页面支持onload,组件只支持mounted,而h5又只支持created,变来变去的,花费的试错成本很大啊
2019-05-19 15:59
zhangdaren

zhangdaren

需要注意的是,组件不支持 onLoad 等页面的生命周期。

那onload用什么替代呀?有没有人说?现在用自定义组件模式编译不错,不使用也报错。。。。。
2019-05-19 15:15
田心水原

田心水原

回复 DCloud_UNI_HT :
已经开了帖子,两天无人问津:https://ask.dcloud.net.cn/question/70811
2019-05-15 18:59
绝影凌霄

绝影凌霄

循环体内echarts 不显示算不算bug呢
2019-05-14 09:49
田心水原

田心水原

回复 DCloud_UNI_HT :
这个问题只要使用自定义模式下的slot解构,应该都会碰到的问题,slot内的组件使用父作用域的data应该是最基本的需求,难道没有其他人碰到吗?
2019-05-14 09:45
DCloud_UNI_HT

DCloud_UNI_HT

回复 田心水原 :
应该是没问题的,单开一个帖子,详细描述问题,或者附一个简单的demo。
2019-05-13 13:26
田心水原

田心水原

回复 DCloud_UNI_HT :
自定义模式下,slot渲染的组件只能使用传递过来的解构的数据,不能使用本页面的其他数据,这个问题怎么解决?
2019-05-13 10:38
1***@qq.com

1***@qq.com

uParse 组件和 rich-text 组件,哪个性能好?
2019-04-26 17:50
DCloud_UNI_HT

DCloud_UNI_HT

回复 s***@126.com :
问题没有复现,是否语法错误,是否没有安装插件,有没有报错 ?
2019-04-26 17:09
s***@126.com

s***@126.com

回复 DCloud_UNI_HT :
自定义组件模式 ,只要用SCSS编译,组件样式就不加载了
2019-04-26 16:01