uniapp条件编译

1. 跨端兼容

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

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

• 大量写 if else，会造成代码执行性能低下和管理混乱。
• 编译到不同的工程后二次修改，会让后续升级变的很麻烦。

在 C 语言中，通过 #ifdef、#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路，为 uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。

2. 条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

• #ifdef：if defined 仅在某平台存在
• #ifndef：if not defined 除了某平台均存在
• %PLATFORM%：平台名称

%PLATFORM% 可取值如下：

值	生效条件
VUE3	HBuilderX 3.2.0+ 详情
APP-PLUS	App
APP-PLUS-NVUE或APP-NVUE	App nvue 页面
APP-ANDROID	App Android 平台 仅限 uts文件
APP-IOS	App iOS 平台 仅限 uts文件
H5	H5
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	字节跳动小程序
MP-LARK	飞书小程序
MP-QQ	QQ小程序
MP-KUAISHOU	快手小程序
MP-JD	京东小程序
MP-360	360小程序
MP	微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW	快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION	快应用联盟
QUICKAPP-WEBVIEW-HUAWEI	快应用华为

支持的文件

• .vue
• .js
• .css
• pages.json
• 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug

注意：

• 条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用 // 注释、css 使用 /* 注释 */、vue/nvue 模板里使用 <!-- 注释 -->；
• 条件编译APP-PLUS包含APP-NVUE和APP-VUE，APP-PLUS-NVUE和APP-NVUE没什么区别，为了简写后面出了APP-NVUE ；
• 使用条件编译请保证编译前和编译后文件的正确性，比如json文件中不能有多余的逗号；
• VUE3 需要在项目的manifest.json 文件根节点配置 "vueVersion" : "3"

2.1 API 的条件编译

// #ifdef  %PLATFORM%
平台特有的API实现
// #endif

当我们在使用某些api的时候，有些api是只在某一平台才能存在，如getMenuButtonBoundingClientRect()

getMenuButtonBoundingClientRect()

在小程序平台，如果原生导航栏被隐藏，仍然在右上角会有一个悬浮按钮，微信下也被称为胶囊按钮。本API用于获取小程序下该菜单按钮的布局位置信息，方便开发者布局顶部内容时避开该按钮。

坐标信息以屏幕左上角为原点。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节跳动小程序	飞书小程序	QQ小程序
x	x	√	√	√	√	x	√

那么我们在使用的时候就不能直接使用，该api的使用在h5平台及app平台会直接报错。

需求
在小程序平台获取胶囊按钮的宽度及高度。

// 注意 下面的 // 也包含在内
// #ifdef MP-WEIXIN
var val = uni.getMenuButtonBoundingClientRect()
console.log(val.width,val.height)

// #endif

2.2 组件的条件编译

<!--  #ifdef  %PLATFORM% -->
平台特有的组件
<!--  #endif -->

需求:
进入到h5页面 页面展示内容为 你好，h5
进入到小程序页面，页面展示内容为 你好 小程序

<!-- #ifdef H5 -->
<view>
    你好，h5
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>
    仅在小程序平台展示
</view>
<!-- #endif -->

2.3 样式的条件编译

/*  #ifdef  %PLATFORM%  */
平台特有样式
/*  #endif  */

需求:
在h5端文字颜色为红色
在小程序端文字颜色为蓝色

<view class="app"> 
    在h5端颜色为红色
    在小程序端样式为绿色
</view>

.app{
    /* #ifdef H5 */
    color: red;
    /* #endif */
    /* #ifdef MP-WEIXIN */
    color: green;
    /* #endif */
}

注意： 样式的条件编译，无论是 css 还是 sass/scss/less/stylus 等预编译语言中，必须使用 /*注释*/的写法。

2.4 pages.json 的条件编译

下面的页面，只有运行至 App 时才会编译进去。
 

不同平台下的特有功能，以及小程序平台的分包，都可以通过 pages.json 的条件编译来更好地实现。这样，就不会在其它平台产生多余的资源，进而减小包体积。

json的条件编译，如不同平台的key名称相同，cli项目下开发者自己安装的校验器会报错，需自行关闭这些校验器对json相同key的校验规则。如果使用HBuilderX的校验器，无需在意此问题，HBuilderX的语法校验器为此优化过。