2.9 小程序组件支持

uni-app 支持在 App 和小程序中使用小程序自定义组件。

平台差异说明

此文档小白教程网要求开发者对各端小程序的自定义组件有一定了解

目录结构

┌─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

                     "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>

代码示例

小白教程网www.2d5.net

下面以微信小程序官方自定义组件示例

小白教程网www.2d5.net

目录结构

┌─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>

        <slide-view width="750" height="110" slide-width="500">

            <view slot="left">

                <image src="/static/file_transfer.jpg"></image>

                <view>

                    <view>文件传输助手</view>

                    <view>7:00 PM</view>

                </view>

            </view>

            <view slot="right">

                <view>标为已读</view>

                <view>删除</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>

注意事项

n  小程序组件需要放在项目特殊文件夹 wxcomponents（或 mycomponents、swancomponents）。HBuilderX 建立的工程 wxcomponents 文件夹在 项目根目录下。vue-cli 建立的工程 wxcomponents 文件夹在 src 目录下。可以在 vue.config.js 中自定义其他目录。

n  当需要在 vue 组件中使用小程序组件时，注意在 pages.json 的 globalStyle 中配置 usingComponents，而不是页面级配置。

n  注意数据和事件绑定的差异，使用时应按照 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。

【uniapp参考资料】

（1）uni-app跨平台开发 入门到实战 

https://ke.qq.com/course/package/26512

（2）uni-app 完整商城界面设计实战  

https://ke.qq.com/course/2381059

（3）基于vue的uniapp商城完整项目源代码 

https://ke.qq.com/course/3064977

（4）毕业设计网

http://www.pc-365.net

（5）小程序编程网

http://www.4317.org

（6）计算机编程网

http://www.05423.com