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>