uni-app 中的条件编译与跨端兼容

uni-app 为了实现一套代码编译到多个平台（包括小程序，App，H5 等），引入了条件编译机制。 通过条件编译，我们可以针对不同的平台编写特定的代码，从而实现跨端兼容。

一、条件编译的作用

• 平台差异化处理: 应对不同平台 API 差异，例如，小程序和 App 中获取用户地理位置的 API 就不同。
• 功能选择性启用: 某些功能可能只在特定平台支持或者有意义，例如， App 的推送功能在 H5 中就没有必要。
• 提高性能： 避免在不支持的平台上执行大量无效代码，提高运行效率。
• 兼容旧版本： 针对性地处理旧版本平台的 API 兼容问题。
• 调试方便： 在不同的平台进行针对性的调试。

二、条件编译的语法

uni-app 的条件编译主要有两种方式：

• // #ifdef 和 // #endif： 用于包裹块级代码。
• // #ifndef 和 // #endif： 用于包裹块级代码，表示如果未定义。

<template><view><!-- #ifdef H5 --><!-- 只有在 H5 页面，才会编译这段代码--><view>H5 希望在h5页面中看见</view><!-- #endif --><!-- #ifdef MP-WEIXIN --><!-- 只有在 微信小程序 平台，才会编译这段代码--><view>微信小程序 希望在微信小程序页面中看见</view><!-- #endif --></view>
</template>

这段代码就像一个“开关”，根据不同的平台，控制不同的内容是否显示。 它允许使用同一份代码，在不同的平台上呈现不同的用户界面和功能。 这在跨平台开发中非常有用，可以有效地减少代码的重复编写和维护工作。 

三、常见平台标识符

标识符	平台
APP-PLUS	App(vue2 和 vue3 均支持)
APP-PLUS-NVUE	App(nvue 页面, vue2 和 vue3 均支持)
H5	H5 平台
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	抖音小程序/头条小程序
MP-QQ	QQ 小程序
MP-KUAISHOU	快手小程序
MP-JD	京东小程序
MP	微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序/快手小程序/京东小程序/360小程序 (vue3 特性)
NODE	Node.js 环境

注意:

• 平台标识符区分大小写。
• MP 标识符只在 vue3 中有效。

四、使用示例

1.区分 App 和 小程序 调用不同 API

// #ifdef APP-PLUS
// App 平台
uni.getLocation({success: function (res) {console.log('经度：' + res.longitude + '，纬度：' + res.latitude);}
});
// #endif// #ifdef MP-WEIXIN
// 微信小程序平台
wx.getLocation({type: 'wgs84',success (res) {console.log(res.latitude)console.log(res.longitude)}
})
// #endif

2.仅在 App 平台显示某个组件

<template><view><view>通用内容</view>// #ifdef APP-PLUS<my-app-component></my-app-component>// #endif</view>
</template><script>
export default {components: {'my-app-component': {template: `<view>这是一个组件</view>`}}
}
</script>

3.设置不同的导航栏标题

export default {onLoad() {// #ifdef APP-PLUSuni.setNavigationBarTitle({title: 'App 页面'});// #endif// #ifdef H5document.title = 'H5 页面';// #endif// #ifdef MP-WEIXINwx.setNavigationBarTitle({title: '微信小程序页面'});// #endif}
}

4.使用 v-if 进行条件编译 (vue3)

在 vue3 中, 可以在 template 中使用简单的平台判断:

<template><view><view>通用内容</view><view v-if="__PLATFORM__ === 'app'">App 平台的特有内容</view><view v-if="__PLATFORM__ === 'h5'">H5 平台的特有内容</view></view>
</template><script>
export default {data() {return {};},
};
</script>

五、总结

uni-app 的条件编译机制是一种强大的跨端兼容工具。 合理使用条件编译，可以编写一套代码，运行到多个平台，极大提高开发效率。 在使用条件编译时，要清晰的组织代码，做好测试，并避免滥用。通过结合各种最佳实践，可以有效地管理跨平台开发的复杂性，提升应用质量。