uni-app引入小程式自定義元件

參見官方文檔

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>