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

  1. 云栖社区>
  2. DCloud>
  3. 博客>
  4. 正文

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

黑白小熊猫 2019-05-24 13:51:16 浏览776
展开阅读全文

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源码绕过,或者改用老的模板编译模式。

网友评论

登录后评论
0/500
评论
黑白小熊猫
+ 关注
所属云栖号: DCloud