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

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

要回复文章请先登录注册

DCloud_UNI_HT

DCloud_UNI_HT

回复 s***@126.com :
单独发一个帖子,提供一下demo,邀请我。
2019-04-24 12:04
s***@126.com

s***@126.com

回复 DCloud_UNI_HT :
hbuilderx 版本:1.9.2。
APP和H5没问题,微信小程序组件样式不加载(微信开发平台已是最新版),其它小程序没测试
2019-04-24 11:51
DCloud_UNI_HT

DCloud_UNI_HT

回复 s***@126.com :
复现不到你说的问题,请详细说明一下 出现问题的 hbuilderx 版本,以及平台详细信息。
2019-04-24 09:27
DCloud_UNI_HT

DCloud_UNI_HT

回复 1***@qq.com :
什么平台下 出现的问题,hbuilderx 是什么版本的 ?
2019-04-24 09:26
s***@126.com

s***@126.com

回复 1***@qq.com :
对 微信小程序端,子组件样式不加载,这个BUG难道没人提出来吗?
2019-04-20 09:06
1***@qq.com

1***@qq.com

子组件样式不生效。编译时不把子组件的样式编译出来。
2019-04-19 11:59