參見官方文檔
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>