当前位置：首页 > news >正文

Uniapp 条件编译详解

news 2025/8/15 6:02:24

Uniapp 条件编译详解

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

一、基本语法

1. 以 #ifdef 或 #ifndef 开头

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

2. 多平台判断

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

二、平台标识符

平台	标识符	说明
微信小程序	MP-WEIXIN
支付宝小程序	MP-ALIPAY
百度小程序	MP-BAIDU
字节跳动小程序	MP-TOUTIAO
QQ小程序	MP-QQ
H5	H5	浏览器环境
App	APP	包括APP-PLUS和APP-NVUE
iOS	APP-PLUS或IOS	App的iOS平台
Android	APP-PLUS或ANDROID	App的Android平台
快应用	QUICKAPP-WEBVIEW	华为快应用

三、使用场景

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 H5window.location.href = url;// #endif// #ifdef MP-WEIXINwx.navigateTo({ url });// #endif// #ifdef APPuni.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"}}}
}

七、注意事项

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

八、实际应用示例

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';
// #endifexport default {components: {// #ifdef MP-WEIXINweixinSpecificComponent,// #endif// #ifdef H5h5SpecificComponent// #endif}
}
</script>

2. API 兼容处理

function getStorage(key) {// #ifdef MP-WEIXINreturn wx.getStorageSync(key);// #endif// #ifdef H5return localStorage.getItem(key);// #endif// #ifdef APPreturn uni.getStorageSync(key);// #endif
}