uni-app跨端开发实战：条件编译与平台API的优雅兼容方案

1. 为什么需要条件编译跨端开发最大的痛点就是平台差异。就拿电商应用来说微信小程序有专属的登录接口wx.login但H5只能用普通表单登录小程序调用支付必须用wx.requestPayment而App端可能需要对接支付宝SDK。这些API差异就像不同方言直接混用代码肯定会报错。我去年做过一个跨境电商项目需要同时兼容微信小程序、H5和iOS/Android双端。最头疼的就是用户系统设计——小程序能用微信一键登录但其他平台得走手机号验证流程。如果写四套独立代码维护成本直接翻倍。后来用uni-app的条件编译同一套代码里用特殊注释标记平台专属逻辑编译时自动过滤无关代码就像给不同平台准备了专属语音包。2. 条件编译基础语法2.1 注释标记的妙用条件编译的核心是这些特殊注释// #ifdef MP-WEIXIN wx.login() // 仅微信小程序生效 // #endif /* #ifdef H5 */ alert(H5弹窗) // 仅H5生效 /* #endif */注意不同文件的注释写法.js文件用//注释.css文件用/* */注释.vue模板用!-- --注释有次我误在CSS里用了JS的双斜杠注释导致样式编译后直接消失。记住这个坑注释类型必须匹配文件类型。2.2 多平台组合判断可以用||连接多个平台// #ifdef H5 || APP-PLUS uni.navigateTo() // H5和App生效 // #endif还支持取反操作// #ifndef MP-WEIXIN console.log(非微信环境) // #endif3. 电商项目实战案例3.1 用户登录模块微信环境用静默授权其他平台走短信验证// #ifdef MP-WEIXIN wx.login({ success(res) { store.commit(SET_WXCODE, res.code) } }) // #endif // #ifndef MP-WEIXIN const sendSMSCode () { // 短信验证逻辑 } // #endif3.2 支付功能适配支付是最需要平台判断的场景function pay(orderId) { // #ifdef MP-WEIXIN wx.requestPayment({ timeStamp: , package: prepay_id res.prepay_id }) // #endif // #ifdef APP-PLUS const alipay require(alipay-sdk) alipay.exec(tradePay, { orderId }) // #endif // #ifdef H5 window.location.href /pay?orderId${orderId} // #endif }3.3 图片选择兼容多媒体接口在各端差异很大// #ifdef MP-WEIXIN uni.chooseMedia({ mediaType: [image] }) // #endif // #ifdef H5 const input document.createElement(input) input.type file input.click() // #endif // #ifdef APP-PLUS plus.gallery.pick() // #endif4. 高级兼容技巧4.1 运行时环境判断有些场景需要运行时动态判断const platform uni.getSystemInfoSync().platform if(platform ios) { // iOS专属动画 } else { // 安卓备用方案 }4.2 样式条件编译CSS也需要平台适配/* #ifdef MP-WEIXIN */ button { margin-bottom: env(safe-area-inset-bottom) } /* #endif */ /* #ifdef H5 */ body { overflow-x: hidden } /* #endif */4.3 组件级条件编译在vue模板中隐藏平台专属组件!-- #ifdef MP-WEIXIN -- button open-typeshare分享/button !-- #endif --5. 避坑指南语法校验陷阱条件编译注释内的代码也要符合基础语法规则。有次我在#ifdef里写了只有微信支持的语法忘记加#endif导致其他平台编译报错作用域污染不同平台的变量建议用立即执行函数隔离// #ifdef H5 (function() { const h5Var h5 // 不会污染全局 })() // #endif调试技巧在chrome调试H5时可以用// #ifdef true强制启用某段代码调试性能优化平台判断尽量前置避免在循环中做条件编译实际项目中我建议先整理各平台API差异矩阵再用条件编译逐个击破。最近帮客户优化跨端项目通过系统化使用条件编译代码量减少了40%维护效率提升明显。