uni-app在各平台的条件编译

逃离我推掉我的手 2022-12-28 11:09 265阅读 0赞

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

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

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

<table> 
 <thead> 
  <tr> 
   <th>条件编译写法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>#ifdef APP-PLUS <strong>需条件编译的代码</strong> #endif</td> 
   <td>仅出现在 App 平台下的代码</td> 
  </tr> 
  <tr> 
   <td>#ifndef H5 <strong>需条件编译的代码</strong> #endif</td> 
   <td>除了 H5 平台，其它平台均存在的代码</td> 
  </tr> 
  <tr> 
   <td>#ifdef H5 <strong>需条件编译的代码</strong> #endif</td> 
   <td>在 H5 平台平台存在的代码</td> 
  </tr> 
  <tr> 
   <td>#ifdef MP-WEIXIN <strong>需条件编译的代码</strong> #endif</td> 
   <td>在 微信小程序平台存在的代码</td> 
  </tr> 
 </tbody> 
</table>

**%PLATFORM% 可取值如下：**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>平台</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>APP-PLUS</td> 
   <td>App</td> 
  </tr> 
  <tr> 
   <td>APP-PLUS-NVUE或APP-NVUE</td> 
   <td>App nvue</td> 
  </tr> 
  <tr> 
   <td>H5</td> 
   <td>H5</td> 
  </tr> 
  <tr> 
   <td>MP-WEIXIN</td> 
   <td>微信小程序</td> 
  </tr> 
  <tr> 
   <td>MP-ALIPAY</td> 
   <td>支付宝小程序</td> 
  </tr> 
  <tr> 
   <td>MP-BAIDU</td> 
   <td>百度小程序</td> 
  </tr> 
  <tr> 
   <td>MP-TOUTIAO</td> 
   <td>字节跳动小程序</td> 
  </tr> 
  <tr> 
   <td>MP-QQ</td> 
   <td>QQ小程序</td> 
  </tr> 
  <tr> 
   <td>MP-360</td> 
   <td>360小程序</td> 
  </tr> 
  <tr> 
   <td>MP</td> 
   <td>微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序</td> 
  </tr> 
  <tr> 
   <td>QUICKAPP-WEBVIEW</td> 
   <td>快应用通用(包含联盟、华为)</td> 
  </tr> 
  <tr> 
   <td>QUICKAPP-WEBVIEW-UNION</td> 
   <td>快应用联盟</td> 
  </tr> 
  <tr> 
   <td>QUICKAPP-WEBVIEW-HUAWEI</td> 
   <td>快应用华为</td> 
  </tr> 
 </tbody> 
</table>

**js跟css还有html的使用方法是不同的**

html

<view>
    	
       	 需条件编译的代码           
    	
    </view>

css

/*#ifdef MP-WEIXIN*/
       	 需条件编译的代码           
    	/*#endif*/

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