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% 可取值如下:

生效条件
VUE3HBuilderX 3.2.0+ 详情
APP-PLUSApp
APP-PLUS-NVUE或APP-NVUEApp nvue 页面
APP-ANDROIDApp Android 平台 仅限 uts文件
APP-IOSApp iOS 平台 仅限 uts文件
H5H5
MP-WEIXIN微信小程序
MP-ALIPAY支付宝小程序
MP-BAIDU百度小程序
MP-TOUTIAO字节跳动小程序
MP-LARK飞书小程序
MP-QQQQ小程序
MP-KUAISHOU快手小程序
MP-JD京东小程序
MP-360360小程序
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用于获取小程序下该菜单按钮的布局位置信息,方便开发者布局顶部内容时避开该按钮。

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

平台差异说明

AppH5微信小程序支付宝小程序百度小程序字节跳动小程序飞书小程序QQ小程序
xxx

那么我们在使用的时候就不能直接使用,该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的语法校验器为此优化过。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐