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源码绕过,或者改用老的模板编译模式。
相关文章
|
8天前
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
3天前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
102 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
5天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
9天前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
10天前
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
|
2天前
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
8天前
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
43 0
|
8天前
|
移动开发 监控 小程序
TP6+Uni-app框架开发,2025年最新圈子系统功能展示,圈子app流量主模式
圈子系统基于TP6+Uni-app框架开发,支持多端账号同步并可快速生成APP。它适用于行业、地方、社交、游戏、兴趣等多种圈子场景,提供广告展示、商品销售、推广结算、交易佣金、入驻费用、会员增值及线上线下活动等多元盈利模式,帮助商户精准定位用户,实现流量变现和业务增长。
|
6天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
12 0
|
26天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。

热门文章

最新文章