uni-app中使用条件编译（7）

深藏阁楼爱情的钟 2023-03-01 14:00 7阅读 0赞

## 跨端兼容： ##

uni-app 已将常用的组件、JS API 封装进框架中，开发者按照 uni-app 规范开发可以保证多平台兼容，大部分业务均可直接满足。但每一个平台有自己的一些特性，因此会存在一些无法跨平台的情况。

在 C 语言中，通过 \#ifdef、\#ifndef的方式，为windows、mac 等不同的 os 编译不同的代码。 uni-app 参考这个思路，为 uni-app 提供了条件编译手段。

## 条件编译： ##

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

**写法**：以 \#ifdef 或 \#ifndef 加 %PLATFORM% 开头，以 \#endif 结尾。

*  \#ifdef  是if defined的缩写，表示仅在某平台存在
 *  \#idndef 是if not defined的缩写，表示除了某平台均存在
 *  %PLATFORM%  表示平台的名称

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;">条件编译写法</td> 
   <td style="text-align:center;vertical-align:middle;">说明</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;"> <p>#ifdef APP-PLUS</p> <p>需条件编译的代码</p> <p>#endif</p> </td> 
   <td style="text-align:center;vertical-align:middle;">表示仅出现在App平台下的代码</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;"> <p>#ifndef H5</p> <p>需要条件编译的代码</p> <p>#endif</p> </td> 
   <td style="text-align:center;vertical-align:middle;">表示除了H5平台，其它平台均存在的代码</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;"> <p>#ifdef H5 || MP-WEIXIN</p> <p>需要条件编译的代码</p> <p>#endif</p> </td> 
   <td style="text-align:center;vertical-align:middle;">在H5平台或微信小程序平台存在的代码（ps：这里只有或|| ，不可能出现&amp;&amp;，因为没有交集）</td> 
  </tr> 
 </tbody> 
</table>

%PLATFORM% 可取值如下：

<table> 
 <thead> 
  <tr> 
   <th style="text-align:center;vertical-align:middle;">值</th> 
   <th style="text-align:center;vertical-align:middle;">平台</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;">APP-PLUS</td> 
   <td style="text-align:center;vertical-align:middle;">App</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;">APP-PLUS-NVUE</td> 
   <td style="text-align:center;vertical-align:middle;">App nvue</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;">H5</td> 
   <td style="text-align:center;vertical-align:middle;">H5</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;">MP-WEIXIN</td> 
   <td style="text-align:center;vertical-align:middle;">微信小程序</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;">MP-ALIPAY</td> 
   <td style="text-align:center;vertical-align:middle;">支付宝小程序</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;">MP-BAIDU</td> 
   <td style="text-align:center;vertical-align:middle;">百度小程序</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;">MP-TOUTIAO</td> 
   <td style="text-align:center;vertical-align:middle;">字节跳动小程序</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;">MP-QQ</td> 
   <td style="text-align:center;vertical-align:middle;">QQ小程序</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;">MP-360</td> 
   <td style="text-align:center;vertical-align:middle;">360小程序</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;">MP</td> 
   <td style="text-align:center;vertical-align:middle;">微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;">quickapp-webview</td> 
   <td style="text-align:center;vertical-align:middle;">快应用通用（包含联盟、华为）</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;">quickapp-webview-union</td> 
   <td style="text-align:center;vertical-align:middle;">快应用联盟</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;">quickapp-webview-huawei</td> 
   <td style="text-align:center;vertical-align:middle;">快应用华为</td> 
  </tr> 
 </tbody> 
</table>

条件编译支持的文件：

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

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

### API的条件编译 ###

**写法：**

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

如下代码仅在App下出现，示例如下：

created() {
    			// #ifdef APP-PLUS
    			console.log('在App中打印')
    			// #endif
    			
    			// #ifdef MP-WEIXIN
    			console.log('在微信小程序中打印')
    			// #endif
    		},

### 组件的条件编译 ###

**写法：**

平台特有的组件

示例：

<text>我是在App平台编译的代码</text>
    		
    		
    		
    		<text>我是在H5平台编译的代码</text>

### 样式的条件编译 ###

**写法：**

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

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

示例：

### page.json 的条件编译 ###

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

// #ifdef APP-PLUS
    	{
    		"path": "pages/me/me",
    		"style": {
    			"navigationBarTitleText": "我的"
    		}
    	}
    	// #endif

全部 page.json 文件如下：

{
    	"pages": [{
    		"path": "pages/index/index",
    		"style": {
    			"navigationBarTitleText": "首页"
    		}
    	},
    	// #ifdef APP-PLUS
    	{
    		"path": "pages/me/me",
    		"style": {
    			"navigationBarTitleText": "我的"
    		}
    	}
    	// #endif
    	],
    	"globalStyle": {
    		"navigationBarTextStyle": "white",
    		"navigationBarTitleText": "uni-app",
    		"navigationBarBackgroundColor": "#007AFF",
    		"backgroundColor": "#FFFFFF"
    	},
    	"tabBar": {
    	    "color": "#8B8B8B", // 表示tabBar item项中文字默认的颜色
    	    "selectedColor": "#F63515", // 表示tabBar item项中文字选中的颜色
    	    "borderStyle": "black",// 表示tabBar 上边框的颜色，目前只支持 black/white
    	    "backgroundColor": "#ffffff",// 表示 tabBar 的背景颜色
    	    "list": [{
    	        "pagePath": "pages/index/index", // 表示第一tab项的页面路径
    	        "iconPath": "static/image/home_default.png", // 表示当前 tab 未选中时所显示的图标路径
    	        "selectedIconPath": "static/image/home_select.png", // 表示当前 tab 选中时所显示的图标文件路径
    	        "text": "首页" // 表示当前 tab 的文字
    	    }, {
    	        "pagePath": "pages/me/me",
    	        "iconPath": "static/image/me_default.png",
    	        "selectedIconPath": "static/image/me_select.png",
    	        "text": "我的"
    	    }]
    	}
    }

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

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

### 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 目录的条件编译][static]

### 注意： ###

*  Android 和 iOS 平台不支持通过条件编译来区分，如果需要区分 Android、iOS 平台，请通过调用 uni.getSystemInfo 来获取平台信息。支持`ifios`、`ifAndroid`代码块，可方便编写判断。
 *  有些跨端工具可以提供js的条件编译或多态，但这对于实际开发远远不够。uni-app不止是处理js，任何代码都可以多端条件编译，才能真正解决实际项目的跨端问题。另外所谓多态在实际开发中会造成大量冗余代码，很不利于复用和维护。举例，微信小程序主题色是绿色，而百度支付宝小程序是蓝色，你的应用想分平台适配颜色，只有条件编译是代码量最低、最容易维护的。
 *  有些公司的产品运营总是给不同平台提不同需求，但这不是拒绝uni-app的理由。关键在于项目里，复用的代码多还是个性的代码多，正常都是复用的代码多，所以仍然应该多端。而个性的代码放到不同平台的目录下，差异化维护。

[static]: https://uniapp.dcloud.io/platform?id=static-%E7%9B%AE%E5%BD%95%E7%9A%84%E6%9D%A1%E4%BB%B6%E7%BC%96%E8%AF%91