主要使用条件编译，见：uni-app判断运行的平台

1.存放目录（官方推荐的是在根目录或者src目录下，也可以在vue.config.js文件中配置为其他目录）：

平台

支持情况

小程序组件存放目录

H5

支持微信小程序组件（2.4.7+）

wxcomponents

App（不含nvue）

支持微信小程序组件

wxcomponents

微信小程序

支持微信小程序组件

wxcomponents

支付宝小程序

支持支付宝小程序组件

mycomponents

百度小程序

支持百度小程序组件

swancomponents

字节跳动小程序、飞书小程序

支持字节跳动小程序、飞书小程序组件

ttcomponents

QQ小程序

支持QQ小程序组件

wxcomponents

快手小程序

支持快手小程序组件

kscomponents

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

2.引用+注册

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

{
    "pages": [{
        "path": "index/index",  // 使用style的地址
        "style": {              // 定义不同平台使用的文件
            // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
            "usingComponents": {
                "custom": "/wxcomponents/custom/index"
            },
            // #endif
            // #ifdef MP-BAIDU
            "usingComponents": {
                "custom": "/swancomponents/custom/index"
            },
            // #endif
            // #ifdef MP-ALIPAY
            "usingComponents": {
                "custom": "/mycomponents/custom/index"
            },
            // #endif
            "navigationBarTitleText": "uni-app"  // 注册该文件的style
        }
    }]
}

3.使用

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

　　或者直接使用<uni-app/>标签使用。

作者：꧁执笔小白꧂