uni-app条件注释实现跨端兼容

陈醋拌饭

已于 2022-07-22 16:19:35 修改

阅读量380

点赞数

分类专栏： uni-app 文章标签：小程序 uni-app

于 2020-12-18 09:24:17 首次发布

本文链接：https://blog.csdn.net/weixin_44167504/article/details/111352625

版权

uni-app 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

uni-app条件注释实现跨端兼容

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

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

组件的条件注释

<!-- #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 */