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 只能创建一个连接，有需求的用户可改用老的模板编译模式。