uniapp 不同平台使用不同的Vue组件

主要使用条件编译，见：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.使用

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

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