uni-app 不同平台使用不同的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.使用

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

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

posted @   ꧁执笔小白꧂  阅读(584)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示