uni-app引入小程序自定义组件

最新推荐文章于 2025-10-09 09:27:41 发布

原创最新推荐文章于 2025-10-09 09:27:41 发布 · 4.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #uniapp

小程序专栏收录该内容

4 篇文章

订阅专栏

本文档详细介绍了在uni-app项目中如何创建和使用微信小程序自定义组件。包括设置组件目录结构、在pages.json中引入组件以及在页面模板中调用组件的具体步骤。

参见官方文档

https://uniapp.dcloud.io/frame?id=%e5%b0%8f%e7%a8%8b%e5%ba%8f%e7%bb%84%e4%bb%b6%e6%94%af%e6%8c%81

1.新建wxcomponents文件夹，存放组件

    
┌─wxcomponents                  微信小程序自定义组件存放目录
│   └──custom                   微信小程序自定义组件
│        ├─index.js
│        ├─index.wxml
│        ├─index.json
│        └─index.wxss
├─pages
│  └─index
│        └─index.vue
│
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json

2.使用方式

在 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
                }
            }
        }
    ]
}

3.在页面中引入使用

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