Uniapp---条件编译指令

在做小程序开发的时候，经常会需要用到在不同的平台进行适配。

最常见的就是：微信小程序（默认）有时候方便预览和查看需要再次打包H5作为移动端，这个时候部分代码就需要做适配：

一、JS代码模块

1、仅在小程序平台编辑的代码

// #ifdef MP
// 仅在小程序平台编译的代码
console.log('这段代码只在小程序平台运行');
// #endif

2、仅在微信小程序编译

// #ifdef MP-WEIXIN
wx.login({
  success(res) {
    console.log('微信登录成功', res.code);
  }
});
// #endif

3、不同的登录方式

// #ifdef MP-WEIXIN
wx.showToast({ title: '微信小程序' });
// #endif
// #ifdef MP-ALIPAY
my.showToast({ content: '支付宝小程序' });
// #endif
// #ifdef H5
console.log('H5登录');
// #endif

示例：

<script>
    export default {
        onLoad(){
            // #ifdef  H5
            console.log("我只是在H5显示");
            // #endif
            // #ifdef  MP-WEIXIN
            console.log("我只是在小程序显示");
            // #endif
        }
    }
</script>

二、样式模块

1、仅在小程序中展示的样式

<style lang="scss">
    view {
        // #ifdef H5
        color: red;
        // #endif
        // #ifdef MP-WEIXIN
        color: blue;
        // #endif
    }
</style>

三、视图模块

1、仅在小程序展示按钮

<template>
    <view>
        <!-- #ifdef H5 -->
        <view class="">我希望在h5看见</view>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN  -->
        <view class="">在小程序看见</view>
        <!-- #endif -->
    </view>
</template>

四、对于的标识

MP-WEIXIN：微信小程序
MP-ALIPAY：支付宝小程序
MP-BAIDU：百度小程序
MP-TOUTIAO：字节跳动小程序
MP-QQ：QQ小程序
MP-KUAISHOU：快手小程序
MP：所有小程序平台（通用）
H5：H5端
APP-PLUS：App端（5+ Runtime）
APP-NVUE：App端的nvue页面

五、注意事项

1、标签成对出现

// #ifdef 必须成对出现，即必须有 // #endif 结束。

2、可使用逻辑运算符

||（或）：// #ifdef MP-WEIXIN || MP-ALIPAY
&&（且）：// #ifndef H5 && APP-PLUS

打完收工！