3、编译器

uni-app能实现一套代码、多端运行,核心是通过编译器 + 运行时实现的:

uni-app项目根据所依赖的Vue版本不同,编译器的实现也不同:

条件编译处理多端差异

uni-app 已将常用的组件、API封装到框架中,开发者按照 uni-app 规范开发即可保证多平台兼容,大部分业务均可直接满足。

但每个平台有自己的一些特性,因此会存在一些无法跨平台的情况。

在 C 语言中,通过 #ifdef#ifndef 的方式,为 Windows、Mac 等不同 OS 编译不同的代码。

uni-app 团队参考这个思路,为 uni-app 提供了条件编译手段,在一个工程里优雅的完成了平台个性化实现。

使用方式

#ifdef#ifndef%PLATFORM% 开头,以 #endif 结尾。

#ifdef APP-PLUS
	仅出现在 App 平台下的代码
#endif

#ifndef H5
	除了 H5 平台,其它平台均存在的代码(注意if后面有个n)
#endif

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

%PLATFORM% 可取值如下

生效条件 版本支持
VUE3 uni-app js引擎版用于区分vue2和3 HBuilderX 3.2.0+
VUE2 uni-app js引擎版用于区分vue2和3
UNI-APP-X 用于区分是否是uni-app x项目 HBuilderX 3.9.0+
uniVersion 用于区分编译器的版本 HBuilderX 3.9.0+
APP App
APP-PLUS uni-app js引擎版编译为App时
APP-PLUS-NVUE或APP-NVUE App nvue 页面
APP-ANDROID App Android 平台
APP-IOS App iOS 平台
APP-HARMONY App HarmonyOS Next 平台
H5 H5(推荐使用 WEB
WEB web(同H5 HBuilderX 3.6.3+
MP-WEIXIN 微信小程序
MP-ALIPAY 支付宝小程序
MP-BAIDU 百度小程序
MP-TOUTIAO 抖音小程序
MP-LARK 飞书小程序
MP-QQ QQ小程序
MP-KUAISHOU 快手小程序
MP-JD 京东小程序
MP-360 360小程序
MP-HARMONY 鸿蒙元服务 HBuilderX 4.34+
MP-XHS 小红书小程序
MP 微信小程序/支付宝小程序/百度小程序/抖音小程序/飞书小程序/QQ小程序/360小程序/鸿蒙元服务
QUICKAPP-WEBVIEW 快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION 快应用联盟
QUICKAPP-WEBVIEW-HUAWEI 快应用华为

注意:

{
  "key": "a"
  // #ifdef MP-WEIXIN
  ,"key": "b"
  // #endif
}
// #ifdef MP-WEIXIN
import a as aWx from 'a/wx'
// #endif
// #ifndef MP-WEIXIN
import a as aIndex from 'a/index'
// #endif
var a
// #ifdef MP-WEIXIN
a = aWx
// #endif
// #ifndef MP-WEIXIN
a = aIndex
// #endif