UNI-APP_uni-app中的#ifdef #ifndef #endif的用处，实现兼容多端平台

亦凉 2023-01-04 15:59 573阅读 0赞

# 一、\#ifdef \#ifndef \#endif三者的意思 #

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>#ifdef</td> 
   <td>仅在某个平台上使用</td> 
  </tr> 
  <tr> 
   <td>#ifndef</td> 
   <td>在除了这个平台的其他平台上使用(非此平台使用）</td> 
  </tr> 
  <tr> 
   <td>#endif</td> 
   <td>结束条件编译</td> 
  </tr> 
 </tbody> 
</table>

# 二、2.平台标识的意思 #

<table> 
 <thead> 
  <tr> 
   <th>标识</th> 
   <th>平台</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>APP-PLUS</td> 
   <td>5+App</td> 
  </tr> 
  <tr> 
   <td>MP</td> 
   <td>微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序</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>H5</td> 
   <td>H5</td> 
  </tr> 
  <tr> 
   <td>APP-PLUS-NVUE</td> 
   <td>5+App nvue</td> 
  </tr> 
 </tbody> 
</table>

在Hbuilder编辑器中输入\#号会有相应提示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]

# 三、结合使用例子 #

例子1（仅在5+app平台上此代码生效）

/* js使用// html使用  */
    
    <view>仅在5+app平台上显示代码</view>
    
    
    methods: { 
    	// #ifdef APP-PLUS
    	click(){ 
    		console.log('仅在5+app平台上生效的事件')
    	},
    	// #endif
    }

例子2（非5+app平台上此代码生效）

/* js使用// html使用  */
    
     <view>只要不是5+app平台上此代码会显示</view>
    
    
    methods: { 
    	// #ifndef APP-PLUS
    	click(){ 
    		console.log('非5+app平台上生效的事件')
    	},
    	// #endif
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]: /images/20221119/5cb6d878e5ac4ea89c42b9f7292949ad.png