uni-app（13）— 条件注释实现跨端兼容

此文为uni-app 总结笔记（13）— 条件注释实现跨端兼容

条件注释实现跨段兼容 官方API文档

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

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

#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称

平台标识

值	平台	参考文档
APP-PLUS	5+App	HTML5+ 规范
H5	H5
MP-WEIXIN	微信小程序	微信小程序
MP-ALIPAY	支付宝小程序	支付宝小程序
MP-BAIDU	百度小程序	百度小程序
MP-TOUTIAO	头条小程序	头条小程序
MP-QQ	QQ小程序	（目前仅cli版支持）
MP	微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序

组件的条件注释

代码演示

<!-- #ifdef H5 -->
<view>
  在h5页面会显示
</view>
<!-- #endif -->

<!-- #ifdef MP-WEIXIN -->
<view>
  在微信小程序会显示
</view>
<!-- #endif -->

<!-- #ifdef APP-PLUS -->
<view>
  在app会显示
</view>
<!-- #endif -->

api的条件注释

代码演示

onLoad () {
  //#ifdef MP-WEIXIN
  console.log('只在微信小程序显示')
  //#endif
  
  //#ifdef H5
  console.log('只在h5页面显示')
  //#endif
}

样式的条件注释

代码演示

/* #ifdef H5 */
view{
  height: 100px;
  line-height: 100px;
  background: red;
}
/* #endif */

/* #ifdef MP-WEIXIN */
view{
  height: 100px;
  line-height: 100px;
  background: green;
}
/* #endif */

效果展示：

H5端

小程序端：