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

简介: uni-app 自 1.8版本开始,新增支持自定义组件模式,该编译模式组件性能更高,支持更多的Vue语法。 请开发者尽快升级老版项目为自定义组件模式,老版的模板编译模式将不再维护。 Tips: uni-app 不同编译模式差异,参考:https://ask.

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().in(this);
  • uni.createCanvasContext() 的调整
// 错误
uni.createCanvasContext();

// 正确
uni.createCanvasContext('#canvas',this);
  • uParse 富文本解析组件的调整

    优化了 `uParse 组件` 的性能,如老项目有使用,请直接替换最新组件,使用方式不变:[https://ext.dcloud.net.cn/plugin?id=183](https://ext.dcloud.net.cn/plugin?id=183)
    其实插件市场有更多三方增强的uparser组件可用,可以搜一下。
    
  • ECharts 图表组件的调整

替换最新的 mpvue-echarts 组件, 源码地址:https://github.com/dcloudio/hello-uniapp/blob/master/components/mpvue-echarts/src/echarts.vue

使用方式修改 :在 echarts 组件 :onInit 属性中添加代码,添加 ec-canvas 样式,移除:echarts="echarts"

// @/pages/template/echarts/echarts.vue
<template>
    <view class="container">
        // 添加 ec-canvas 样式保证组件排版,同时移除旧的:echarts="echarts"
        <mpvue-echarts class="ec-canvas" :onInit="onInit" canvasId="line" ref="lineChart" />
    </view>
</template>
<script>
    export default {
        // ...
        methods: {
            // ...
            onInit(canvas, width, height) {
                // 在方法第一行添加如下代码
                echarts.setCanvasCreator(() => canvas);
                // ...
            }
            // ...
        }
    }
</script>

其实插件市场有更多优秀的三方增强的图表组件可用,可以搜一下。

  • css 调整
    在编译成微信小程序原生组件的时候,会在组件外增加一层父节点。有可能样式会受到影响,比较典型的就是 flex 布局,请在微信端完成一遍测试。
  • 组件生命周期
    编译成原生组件的时候,组件的生命周期请严格参考 组件生命周期 中的说明。

需要注意的是,组件不支持 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文件。
  • 在独立v8下运行时,目前不支持crypto.getRandomValues方法,一些区块链应用的框架会用到此api,建议修改js源码绕过,或者改用老的模板编译模式。
相关文章
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
549 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
662 1
|
1月前
|
移动开发 小程序 测试技术
自定义多级联动选择器指南(uni-app)
在本文中,探讨了如何在uni-app中创建自定义多级联动选择器组件。这个组件具有强大的多端支持,可适用于H5、APP、微信小程序、支付宝小程序等多种平台。
40 1
自定义多级联动选择器指南(uni-app)
|
24天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
1月前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
85 9
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
209 1
|
21天前
|
机器人
布谷直播App系统源码开发之后台管理功能详解
直播系统开发搭建管理后台功能详解!
|
1月前
|
NoSQL PHP Redis
布谷语音app源码服务器环境配置及技术开发语言
布谷语音app源码服务器环境配置及技术语言研发。。
|
1月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
366 0
|
1月前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
544 0
下一篇
无影云桌面