12.小程序组件支持

uni-app 支持在 App 和 小程序 中使用小程序自定义组件，
从HBuilderX2.4.7起，H5端也可以运行微信小程序组件。
平台差异说明

此文档要求开发者对各端小程序的自定义组件有一定了解，没接触过小程序自定义组件的可以参考：

• 微信小程序自定义组件
• 百度小程序自定义组件
• 支付宝小程序自定义组件
• 字节跳动小程序自定义组件
• QQ小程序自定义组件

目录结构

┌─wxcomponents                  微信小程序自定义组件存放目录
│   └──custom                   微信小程序自定义组件
│        ├─index.js
│        ├─index.wxml
│        ├─index.json
│        └─index.wxss
├─mycomponents                  支付宝小程序自定义组件存放目录
│   └──custom                   支付宝小程序自定义组件
│        ├─index.js
│        ├─index.axml
│        ├─index.json
│        └─index.wxss
├─swancomponents                百度小程序自定义组件存放目录
│   └──custom                   百度小程序自定义组件
│        ├─index.js
│        ├─index.swan
│        ├─index.json
│        └─index.wxss
├─pages
│  └─index
│        └─index.vue
│
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json

使用方式

引入组件

在 pages.json 对应页面的 style -> usingComponents 引入组件：

{
    "pages": [
        {
            "path": "index/index",
            "style": {
                "usingComponents": {
                    // #ifdef APP-PLUS || MP-WEIXIN || MP-QQ
                     "custom": "/wxcomponents/custom/index"
                    // #endif
                    // #ifdef MP-BAIDU
                     "custom": "/swancomponents/custom/index"
                    // #endif
                    // #ifdef MP-ALIPAY
                     "custom": "/mycomponents/custom/index"
                    // #endif
                }
            }
        }
    ]
}

在页面中使用

<!-- 页面模板 (index.vue) -->
<view>
    <!-- 在页面中对自定义组件进行引用 -->
    <custom name="uni-app"></custom>
</view>

代码示例

下面以微信小程序官方自定义组件示例 miniprogram-slide-view 为例演示小程序自定义组件的使用方式。 其他组件使用示例见GitHub：wxcomponents-template。 插件市场有一个完整的vant weapp 引用好的示例工程，详见https://ext.dcloud.net.cn/plugin?id=302。
目录结构

┌─components
├─wxcomponents
│   └──miniprogram-slide-view
│        ├─index.js
│        ├─index.wxml
│        ├─index.json
│        └─index.wxss
│
├─pages
│  └─slide-view
│        └─slide-view.vue
│
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json

pages.json

{
    "pages": [
        {
            "path": "slide-view/slide-view",
            "style": {
                "navigationBarTitleText": "slide-view",
                "usingComponents": {
                    "slide-view": "/wxcomponents/miniprogram-slide-view/index"
                }
            }
        }
    ]
}

slide-view.vue

<template>
    <view class='slide'>
        <slide-view width="750" height="110" slide-width="500">
            <view slot="left" class="l">
                <image src="/static/file_transfer.jpg" class="img"></image>
                <view class='text'>
                    <view class='title'>文件传输助手</view>
                    <view class='time'>7:00 PM</view>
                </view>
            </view>
            <view slot="right" class="r">
                <view class='read'>标为已读</view>
                <view class='delete'>删除</view>
            </view>
        </slide-view>
    </view>
</template>
<script>
    export default {}
</script>
<style>
    .slide {
        border-bottom: 1px solid #DEDEDE;
    }
    .l {
        background-color: white;
        height: 110rpx;
        width: 750rpx;
        display: flex;
        flex-direction: row;
    }
    .r {
        height: 110rpx;
        display: flex;
        direction: row;
        text-align: center;
        vertical-align: middle;
        line-height: 110rpx;
    }
    .read {
        background-color: #ccc;
        color: #fff;
        width: 350rpx;
    }
    .delete {
        background-color: red;
        color: #fff;
        width: 150rpx;
    }
    .img {
        width: 90rpx;
        height: 90rpx;
        border-radius: 10rpx;
        margin: 10rpx 15rpx;
    }
    .text {
        display: flex;
        flex-direction: row;
    }
    .title {
        margin-top: 15rpx;
        font-size: 33rpx;
    }
    .time {
        margin-top: 15rpx;
        color: #ccc;
        font-size: 25rpx;
        margin-left: 330rpx;
    }
</style>

注意事项

• 小程序组件需要放在项目特殊文件夹 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，而不是页面级配置。
• 注意数据和事件绑定的差异，使用时应按照**vue**的数据和事件绑定方式
  • 属性绑定从 attr="{{ a }}"，改为 :attr="a"；从 title="复选框{{ item }}" 改为 :title="'复选框' + item"
  • 事件绑定从 bind:click="toggleActionSheet1" 改为 @click="toggleActionSheet1"
  • 阻止事件冒泡 从 catch:tap="xx" 改为 @tap.native.stop="xx"
  • wx:if 改为 v-if
  • wx:for="{{ list }}" wx:key="{{ index }}" 改为v-for="(item,index) in list"
  • 原事件命名以短横线分隔的需要手动修改小程序组件源码为驼峰命名，比如：this.$emit('left-click') 修改为 this.$emit('leftClick')（HBuilderX 1.9.0+ 不再需要修改此项）

详细的小程序转uni-app语法差异可参考文档https://ask.dcloud.net.cn/article/35786。