一、当前背景
uni-app 已将常用的组件、JS API 封装到框架中,开发者按照 uni-app 规范开发即可保证多平台兼容,大部分业务均可直接满足。
但每个平台有自己的一些特性,因此会存在一些无法跨平台的情况。
- 大量写 if else,会造成代码执行性能低下和管理混乱。
- 编译到不同的工程后二次修改,会让后续升级变的很麻烦。
在 C 语言中,通过 #ifdef、#ifndef 的方式,为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路,为 uni-app 提供了条件编译手段,在一个工程里优雅的完成了平台个性化实现。
二、条件注释定义
条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。
三、条件注释的语法
写法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。
- #ifdef:if defined 仅在某平台存在
- #ifndef:if not defined 除了某平台均存在
- %PLATFORM%:平台名称
条件编译写法
说明
#ifdef APP-PLUS
需条件编译的代码
#endif仅出现在 App 平台下的代码
#ifndef H5
需条件编译的代码
#endif除了 H5 平台,其它平台均存在的代码
#ifdef H5 || MP-WEIXIN
需条件编译的代码
#endif在 H5 平台或微信小程序平台存在的代码(这里只有||,不可能出现&&,因为没有交集)
%PLATFORM% 可取值如下:
值
平台
APP-PLUS
App
APP-PLUS-NVUE或APP-NVUE
App nvue
H5
H5
MP-WEIXIN
微信小程序
MP-ALIPAY
支付宝小程序
MP-BAIDU
百度小程序
MP-TOUTIAO
字节跳动小程序
MP-QQ
QQ小程序
MP-360
360小程序
MP
微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW
快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION
快应用联盟
QUICKAPP-WEBVIEW-HUAWEI
快应用华为
四、组件的条件注释
<!-- #ifdef %PLATFORM% -->
平台特有的组件
<!-- #endif -->
示例,如下公众号关注组件仅会在微信小程序中出现:
<view>
<!-- uni-app未封装,但可直接使用微信原生的official-account组件-->
<!-- #ifdef MP-WEIXIN -->
<view>微信公众号关注组件</view>
<official-account></official-account>
<!-- #endif -->
</view>
五、Api的条件注释
// #ifdef %PLATFORM%
平台特有的API实现
// #endif
// #ifdef APP-PLUS 消息通知弹窗
plus.push.createMessage("该上课了", JSON.stringify({
id: "999",
type: "course"
}))