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

二、样式模块

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

/* #ifdef MP */
.container {padding: 20rpx;
}
/* #endif */

三、视图模块

1、仅在小程序展示按钮

<!-- 小程序特有按钮 -->
// #ifdef MP
<button @click="onMpClick">小程序按钮</button>
// #endif

四、对于的标识

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

打完收工！