跨端兼容

注释编译

写法：以 #ifdef 或 #ifndef 加 H5 开头，以**#endif** 结尾。

• #ifdef : 仅在某平台显示
• #ifndef : 除了某平台都存在
• H5 : 平台名称

平台值

值	平台
APP-PLUS	App
APP-PLUS-NVUE	App nvue
H5	H5
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	字节跳动小程序
MP-QQ	QQ 小程序
MP-360	360 小程序
MP	微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ 小程序/360 小程序
QUICKAPP-WEBVIEW	快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION	快应用联盟
QUICKAPP-WEBVIEW-HUAWEI	快应用华为

示例代码：

<!-- #ifdef H5 -->
		<view>
			这里是h5显示
		</view>
<!-- #endif -->

<!-- #ifndef H5 -->
		<view>
			除了h5页面都会显示
		</view>
<!-- #endif -->

<!--  #ifdef H5||MP-WEIXIN -->
    <view>
        h5页面与微信小程序都显示
    </view>
<!-- #endif  -->

注意事项

条件编译是利用注释实现的，在不同语法里注释写法不一样，js 使用 // 注释、css 使用 /_ 注释 _/、vue/nvue 模板里使用 <!-- 注释 -->

示例代码：

JS 的注释编译

显示;
// #ifdef  H5
uni.setStorage({}); //
// #endif
不显示;
// #ifndef  H5
uni.setStorage({}); //
// #endif

组件注释编译

显示
<!--  #ifdef H5 -->
    <view>
        这里是h5显示
    </view>
<!--  #endif -->
不显示
<!--  #ifndef H5 -->
    <view>
        这里是h5显示
    </view>
<!--  #endif -->

css 样式注释编译

显示
/*  #ifdef H5 */
#app{
    color:red
}
/*  #endif  */
不显示

/*  #ifndef H5 */
#app{
    color:red
}
/*  #endif  */

static 静态资源条件编译

在不同平台，引用的静态资源可能也存在差异，通过 static 的的条件编译可以解决此问题，static 目录下新建不同平台的专有目录（目录名称同 %PLATFORM% 值域,但字母均为小写），专有目录下的静态资源只有在特定平台才会编译进去。

如以下目录结构，a.png 只有在微信小程序平台才会编译进去，b.png 在所有平台都会被编译。 ┌─static
│ ├─mp-weixin
│ │ └─a.png
│ └─b.png
├─main.js
├─App.vue
├─manifest.json
└─pages.json

注意

• Android 和iOS平台不支持通过条件编译来区分，如果需要区分 Android、iOS 平台，请通过调用 uni.getSystemInfo 来获取平台信息。支持 ifios、ifAndroid 代码块，可方便编写判断。