uniapp实现条件编译

2021-11-24  本文已影响0人  上海_前端_求内推

条件编译是利用注释实现的,在不同语法里注释写法不一样,
js使用 // 注释、
css 使用 /* 注释 */、
vue/nvue 模板里使用
json文件使用 // 注释、
以下以vue/nvue 模板里使用为例
1,仅在app出现

<!--#ifdef APP-PLUS-->
        <view>
        我只会出现在app上
    </view>
<!-- #endif -->

2,仅在h5出现

<!-- #ifdef H5 -->
    <view>
        我只会出现在h5上
    </view>
<!-- #endif -->

3,仅在小程序上有

<!-- #ifdef MP-WEIXIN -->
    <view>
        我只会出现在小程序上
    </view>
<!-- #endif -->

如果在page.json里使用一定要注意,包裹在编译条件里

"tabBar": {
        "list": [{
            "text": "首页",
            "pagePath": "pages/index/index",
            "iconPath": "static/tabs/myleft_.png",
            "selectedIconPath": "static/tabs/myleft.png"
        }, {
            "text": "运营",
            "pagePath": "pages/calendar/calendar",
            "iconPath": "static/tabs/5.png",
            "selectedIconPath": "static/tabs/5-1.png"
        }, {
            "text": "消息",
            "pagePath": "pages/message/message",
            "iconPath": "static/tabs/4.png",
            "selectedIconPath": "static/tabs/4-1.png"
        }
        //#ifdef MP-WEIXIN 
        , {
            "text": "我的",
            "pagePath": "pages/user/userxiao",
            "iconPath": "static/tabs/my_.png",
            "selectedIconPath": "static/tabs/my.png"
        }
        //#endif
        //#ifdef H5 || APP-PLUS
        , {
            "text": "我的",
            "pagePath": "pages/user/user",
            "iconPath": "static/tabs/my_.png",
            "selectedIconPath": "static/tabs/my.png"
        }
        //#endif
        ]
    }
上一篇 下一篇

猜你喜欢

热点阅读