uniapp实现不同端不同效果，跨端兼容条件编译

陆先森

仅用一个页面文件，可以使在不同端有不同的显示效果，而不用新建页面文件。
这就是uniapp条件编译的作用。

条件编译介绍

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

写法：

• 以#ifdef或 #ifndef 加 %PLATFORM%(客户端类型) 开头，以 #endif 结尾。
• #ifdef：if defined 仅在某平台存在
• #ifndef：if not defined 除了某平台均存在
• %PLATFORM%：平台名称

%PLATFORM%可取值如下：

三种常见的平台：其他平台查看uniapp api

值	平台
APP-PLUS	App
H5	H5
MP-WEIXIN	微信小程序

官方写法举例：

条件编译写法	说明
#ifdef APP-PLUS 需条件编译的代码 #endif	仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif	除了 H5 平台，其它平台均存在的代码
#ifdef H5 II MP-WEIXIN 需条件编译的代码 #endif	在 H5 平台或微信小程序平台存在的代码（这里只有II，不可能出现&&，因为没有交集）

支持的文件

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

注意：条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用// 注释、css 使用/ 注释 /、vue/nvue 模板里使用

static目录的条件编译

在不同平台，引用的静态资源可能也存在差异，通过 static 的的条件编译可以解决此问题，static 目录下新建不同平台的专有目录（目录名称同 %PLATFORM% 值域,但字母均为小写），专有目录下的静态资源只有在特定平台才会编译进去。

官方例子：

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

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

整体目录条件编译

如果想把各平台的页面文件更彻底的分开，也可以在uni-app项目根目录创建platforms目录，然后在下面进一步创建app-plus、mp-weixin等子目录，存放不同平台的文件。
注意: platforms目录下只支持放置页面文件（即页面vue文件），如果需要对其他资源条件编译建议使用static 目录的条件编译