微信小程序之uniapp与微信小程序原生框架的通信

一、前言

​ 这是我第一次学习微信小程序，在使用Hbuilder做黑马优购的时候想使用微信原生的组件来美化或者优化小程序的页面时，遇到一些坑，在次记录一下，网上关于这种在uniapp下使用微信小程序的文章很少，所以就有我的这篇文章，旨在让更多的人少走弯路。

二、如何uniapp中使用微信小程序自定义组件？今天带你来学习一下。

1. 组件必须放在wxcomponents目录下

2. 在pages.json的全局样式globalstyle中引入组件的路径并重命名该组件名称

3. 然后在App.vue引入对应的index.wxss样式

4.直接在父组件的vue.js以标签的形式插入父组件中

到此微信组件就能正常被uniapp-ui项目所使用了

三、注意事项

注意事项1

uni-app在支持vue组件之外，也实现了对小程序自定义组件的兼容。

小程序组件不是vue组件，并且每家小程序都有自己的组件规范，比如微信小程序的组件是wxml格式。

小程序组件不是全端可用，支持度最广的微信小程序自定义组件，也只能支持微信小程序、app-vue、web，其他平台无法兼容。

如果需求上只需兼容有限平台，也可以使用小程序组件。否则仍然推荐使用vue组件。

注意事项2

• 小程序组件需要放在项目特殊文件夹 wxcomponents（或 mycomponents、swancomponents）。HBuilderX 建立的工程 wxcomponents 文件夹在 项目根目录下。vue-cli 建立的工程 wxcomponents 文件夹在 src 目录下。可以在 vue.config.js 中自定义其他目录
• 小程序组件的性能，不如vue组件。使用小程序组件，需要自己手动setData，很难自动管理差量数据更新。而使用vue组件会自动diff更新差量数据。所以如无明显必要，建议使用vue组件而不是小程序组件。比如某些小程序ui组件，完全可以用更高性能的uni ui替代。
• 当需要在 vue 组件中使用小程序组件时，注意在 pages.json 的 globalStyle 中配置 usingComponents，而不是页面级配置。
• 注意数据和事件绑定的差异，组件使用时应按照的数据和事件绑定方式
  • 属性绑定从 attr=""，改为 :attr="a"；从 title="复选框" 改为 :title="'复选框' + item"
  • 事件绑定从 bind:click="toggleActionSheet1" 改为 @click="toggleActionSheet1"，目前支付宝小程序不支持 vue 的事件绑定方式，具体参考：支付宝小程序组件事件监听示例
  • 阻止事件冒泡 从 catch:tap="xx" 改为 @tap.native.stop="xx"
  • wx:if 改为 v-if
  • wx:for="" wx:key="" 改为v-for="(item,index) in list"

注意事项3

绑定的属性值不能是常量，否则绑定失效，注意父子组件之间的通信方式。

四、总结

​ 微信小程序自定义组件要想被uniapp项目所使用，就要把它引入到全局配置文件（pages.json）下，对应的wxss也要导入App.vue下，最后以标签的形式插入父组件中，

最后说一下，这里的父子组件的通信方式和微信小程序的组件之间的通信方式完全一样，换肤不换色。查看组件的通信方式请查看

微信小程序父子组件的通信