Uniapp 条件编译详解

Uniapp 条件编译详解

条件编译是 Uniapp 中非常重要的功能，它允许开发者针对不同平台编写特定的代码，从而实现一套代码多端运行的效果。

一、基本语法

1. 以 #ifdef 或 #ifndef 开头

// #ifdef 平台名称
平台特定代码
// #endif

// #ifndef 平台名称
非该平台代码
// #endif

2. 多平台判断

// #ifdef MP-WEIXIN || H5
微信小程序或H5平台代码
// #endif

二、平台标识符

三、使用场景

1. 模板中使用

<!-- 只在微信小程序中显示 -->
<!-- #ifdef MP-WEIXIN -->
<view>微信小程序特有内容</view>
<!-- #endif -->

<!-- 在H5和App中显示 -->
<!-- #ifdef H5 || APP -->
<view>H5和App显示的内容</view>
<!-- #endif -->

2. 样式中使用

/* 只在App中生效的样式 */
/* #ifdef APP */
.my-view {
  padding-top: 20px;
}
/* #endif */

/* 非H5平台的样式 */
/* #ifndef H5 */
.my-text {
  font-size: 16px;
}
/* #endif */

3. JavaScript中使用

// 平台特定的API调用
// #ifdef MP-WEIXIN
wx.login({
  success(res) {
    console.log(res.code);
  }
});
// #endif

// #ifdef H5
console.log('这是在浏览器环境中');
// #endif

4. 页面路由处理

// 不同平台跳转方式不同
function navigateTo(url) {
  // #ifdef H5
  window.location.href = url;
  // #endif
  
  // #ifdef MP-WEIXIN
  wx.navigateTo({ url });
  // #endif
  
  // #ifdef APP
  uni.navigateTo({ url });
  // #endif
}

四、高级用法

1. 多条件组合

// #ifdef MP-WEIXIN || MP-ALIPAY
// 微信或支付宝小程序特有逻辑
// #endif

2. 条件编译块嵌套

// #ifdef APP
// #ifdef IOS
console.log('这是iOS平台');
// #endif
// #ifdef ANDROID
console.log('这是Android平台');
// #endif
// #endif

3. 文件整体条件编译

可以在文件顶部添加条件编译，整个文件只在特定平台被引入：

// #ifdef MP-WEIXIN
// 整个文件只在微信小程序中有效
export default {
  data() {
    return {
      weixinSpecificData: true
    }
  }
}
// #endif

五、manifest.json 中的条件编译

{
  "mp-weixin": {
    /* 微信小程序特有配置 */
  },
  "h5": {
    /* H5特有配置 */
  },
  "app-plus": {
    /* App特有配置 */
  }
}

六、package.json 中的条件编译

{
  "uni-app": {
    "scripts": {
      "mp-weixin": {
        "title": "微信小程序"
      },
      "h5": {
        "title": "H5"
      }
    }
  }
}

七、注意事项

1. 注释语法必须正确：条件编译注释必须使用 // 而不能使用 /* */
2. 空格要求：#ifdef 和平台名称之间必须有空格
3. 大小写敏感：平台标识符必须完全匹配（如 MP-WEIXIN 不能写成 mp-weixin）
4. 文件条件编译：文件整体条件编译时，文件内容必须全部包含在条件编译块中
5. 性能影响：条件编译不会增加最终包的体积，因为编译时会移除其他平台的代码

八、实际应用示例

1. 平台特定组件

<template>
  <view>
    <!-- 公共部分 -->
    <view>所有平台都显示的内容</view>
    
    <!-- 平台特定部分 -->
    <!-- #ifdef MP-WEIXIN -->
    <weixin-specific-component />
    <!-- #endif -->
    
    <!-- #ifdef H5 -->
    <h5-specific-component />
    <!-- #endif -->
  </view>
</template>

<script>
// 平台特定的组件引入
// #ifdef MP-WEIXIN
import weixinSpecificComponent from './weixin-component.vue';
// #endif

// #ifdef H5
import h5SpecificComponent from './h5-component.vue';
// #endif

export default {
  components: {
    // #ifdef MP-WEIXIN
    weixinSpecificComponent,
    // #endif
    
    // #ifdef H5
    h5SpecificComponent
    // #endif
  }
}
</script>

2. API 兼容处理

function getStorage(key) {
  // #ifdef MP-WEIXIN
  return wx.getStorageSync(key);
  // #endif
  
  // #ifdef H5
  return localStorage.getItem(key);
  // #endif
  
  // #ifdef APP
  return uni.getStorageSync(key);
  // #endif
}

通过合理使用条件编译，可以大大减少为不同平台维护多套代码的工作量，同时又能保证各平台的体验最佳。