uni-app跨端兼容的实现方式(条件编译)

229 阅读2分钟

条件编译

条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台

**写法:**以 #ifdef 或 #ifndef 加 %PLATFORM%  开头,以 #endif 结尾。

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

支持的文件

  • .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"

static 目录的条件编译

在不同平台,引用的静态资源可能也存在差异,通过 static 的条件编译可以解决此问题,static 目录下新建不同平台的专有目录,

目录名称说明
app-plusApp
h5H5
mp-weixin微信小程序
mp-alipay支付宝小程序
mp-baidu百度小程序
mp-qqQQ小程序
mp-toutiao字节小程序
mp-lark飞书小程序
mp-kuaishou快手小程序
mp-jd京东小程序

专有目录下的静态资源只有在特定平台才会编译进去。

如以下目录结构,a.png 只有在微信小程序平台才会编译进去,b.png 在所有平台都会被编译。

	
┌─static
│  ├─mp-weixin
│  │  └─a.png
│  └─b.png
├─main.js
├─App.vue
├─manifest.json
└─pages.json
	

整体目录条件编译

如果想把各平台的页面文件更彻底的分开,也可以在uni-app项目根目录创建platforms目录,然后在下面进一步创建app-plusmp-weixin等子目录,存放不同平台的文件。

注意

  • platforms目录下只支持放置页面文件(即页面vue文件),如果需要对其他资源条件编译,建议使用static 目录的条件编译

正确注释和快速选中

在 HBuilderX 中,ctrl+alt+/ 即可生成正确注释(js:// 注释、css:/* 注释 */、vue/nvue模板: <!-- 注释 -->)。

注意

  • Android 和 iOS 平台不支持通过条件编译来区分,如果需要区分 Android、iOS 平台,请通过调用 uni.getSystemInfo 来获取平台信息。支持ifiosifAndroid代码块,可方便编写判断。