uni-app 条件编译不同平台编写不同代码

条件编译

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

使用方法

以#ifdef或#ifndef加%PLATFORM%开头，以#endif结尾。

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

仅出现在App平台下的代码

#ifdef APP-PLUS
需条件编译的代码
#endif

除了H5平台，其它平台均存在的代码（注意if后面有个n）

#ifndef H5
需条件编译的代码
#endif

在H5平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）

#ifdef H5 || MP-WEIXIN
需条件编译的代码
#endif

%PLATFORM% 可取值

支持的文件

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

注意

条件编译是利用注释实现的，在不同语法里注释写法不一样，js/uts使用//注释、css使用/* 注释 */、vue/nvue/uvue模板里使用<!-- 注释 -->。

代码示例

JSON

{
  "key": "a"
  // #ifdef MP-WEIXIN
  ,"key": "b"
  // #endif
}

JS

// #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

资源目录条件编译

static目录下，新建不同平台对应的目录，专有目录下的静态资源只有在特定平台才会编译进去。

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

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

官方文档

https://uniapp.dcloud.net.cn/tutorial/platform.html#%E6%9D%A1%E4%BB%B6%E7%BC%96%E8%AF%91%E5%A4%84%E7%90%86%E5%A4%9A%E7%AB%AF%E5%B7%AE%E5%BC%82