条件注释实现跨端兼容

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

写法: 以 #ifdef 加平台标识 开头，以 #endif 结尾。

#ifdef H5
  console.log('这是一个H5页面');
#endif

常见平台标识

值	平台	参考文档
APP-PLUS	5+APP	HTML5+规范
H5	H5
MP-WEIXIN	微信小程序	微信小程序
MP-ALIPAY	支付宝小程序	支付宝小程序
MP-BAIDU	百度小程序	百度小程序
MP-TOUTIAO	头条小程序	头条小程序
MP-QQ	QQ 小程序	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 */