uni-app 条件编译

2023年4月27日14:05:38

含义  :  条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的

            代码编译到不同平台。

写法规范:必须写在 <template></template> 内, <script> 和  <style> 中不能出现

                 以 <!-- #ifdef -->或 <!-- #ifndef -->加 平台名称 开头,以  <!-- #endif -->结尾。

1 仅在某平台存在    <!-- #ifdef 平台名称 -->  <!-- #endif -->       

<!-- #ifdef H5 -->
	<button>h5</button>
<!-- #endif -->

2  除了某平台均存在    <!-- #ifndef平台名称 -->  <!-- #endif --> 

		<!-- #ifndef MP-WEIXIN -->
		<button>除了小程序</button>
		<!-- #endif -->

 3  %PLATFORM%:平台名称

对应的平台名称:
APP-PLUS                                      App
APP-PLUS-NVUE                         App nvue
H5                                                  H5
MP-WEIXIN                                    微信小程序
MP-ALIPAY                                    支付宝小程序
MP-BAIDU                                     百度小程序
MP-TOUTIAO                                字节跳动小程序
MP-QQ                                          QQ小程序
MP-360                                          360小程序
MP                                                 微信小程序/支付宝小程序/百度小程序

                                                       QQ小程序/360小程序/字节跳动小程序/
quickapp-webview                         快应用通用(包含联盟、华为)
quickapp-webview-union               快应用联盟
quickapp-webview-huawei            快应用华为

例如

   条件编译写法                                                                            说明
<!-- #ifdef APP-PLUS -->
需条件编译的代码                                                     仅出现在 App 平台下的代码
#endif
                       
<!-- #ifndef H5 -->
需条件编译的代码                                                除了 H5 平台,其它平台均存在的代码
<!-- #endif -->
                  
<!-- #ifdef H5 || MP-WEIXIN -->            
需条件编译的代码                                          在 H5 平台或微信小程序平台存在的代码

<!-- #endif -->                                            (这里只有||,不可能出现&&,因为没有交集)

以上在兼容H5、app、小程序有着非常重要的作用

  • 作者:QiQi613
  • 原文链接:https://blog.csdn.net/weixin_66556453/article/details/125434610
    更新时间:2023年4月27日14:05:38 ,共 1280 字。