前端 uniapp 多端条件编译

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

使用方法

以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #ifndef 结尾。

  • #ifdef:if defined 仅在某平台存在
  • #ifndef:if not defined 除了某平台均存在
  • %PLATFORM%:平台名称
条件编译写法 说明
#ifdefAPP-PLUS 需条件编译的代码 #endif 仅出现在 App 平台下的代码
#ifndefH5 需条件编译的代码 #endif 除了 H5 平台,其它平台均存在的代码(注意if后面有个n)
#ifdefH5 || MP-WEIXIN 需条件编译的代码 #endif 在 H5 平台或微信小程序平台存在的代码(这里只有||,不可能出现&&,因为没有交集)
javascript 复制代码
/**
 *  html:
 */
<!-- #ifdef H5 -->
   <div id="global-float-button-app"></div>
<!-- #endif -->

/**
 *  js:
 */
// #ifdef MP
  url: `${uni.$http.baseUrl}${UPMS_API}commonRest/newFileUpLoad`,
// #endif

/**
 *  css:
 */
  /*  #ifdef MP-TOUTIAO  */
  /deep/ button::after {
    display: none;
  }

  /*  #endif  */

%PLATFORM% 可取值:

生效条件 版本支持
VUE3 uni-app js引擎版用于区分vue2和3,详情 HBuilderX 3.2.0+
VUE2 uni-app js引擎版用于区分vue2和3,详情
UNI-APP-X 用于区分是否是uni-app x项目 详情 HBuilderX 3.9.0+
uniVersion 用于区分编译器的版本 详情 HBuilderX 3.9.0+
APP App
APP-PLUS uni-app js引擎版编译为App时
APP-PLUS-NVUE或APP-NVUE App nvue 页面
APP-ANDROID App Android 平台 详情
APP-IOS App iOS 平台 详情
APP-HARMONY App HarmonyOS Next 平台
H5 H5(推荐使用 WEB
WEB web(同H5 HBuilderX 3.6.3+
MP-WEIXIN 微信小程序
MP-ALIPAY 支付宝小程序
MP-BAIDU 百度小程序
MP-TOUTIAO 抖音小程序
MP-LARK 飞书小程序
MP-QQ QQ小程序
MP-KUAISHOU 快手小程序
MP-JD 京东小程序
MP-360 360小程序
MP 微信小程序/支付宝小程序/百度小程序/抖音小程序/飞书小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW 快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION 快应用联盟
QUICKAPP-WEBVIEW-HUAWEI 快应用华为

支持的文件:

  • .vue/.nvue/.uvue
  • .js/.uts
  • .css
  • pages.json
  • 各预编译语言文件,如:.scss、.less、.stylus、.ts、.pug

注意:

  • 条件编译是利用注释实现的,在不同语法里注释写法不一样,js/uts使用 // 注释、css 使用 /* 注释 */、vue/nvue/uvue 模板里使用 <!-- 注释 -->

  • 条件编译APP-PLUS包含APP-NVUE和APP-VUE,APP-PLUS-NVUE和APP-NVUE没什么区别,为了简写后面出了APP-NVUE ;

  • 对于未定义平台名称,可能是名称写错了,也可能是低版本HBuilderX还不认识这个平台。此时的条件编译,#ifdef 中的代码不会生效,而 #ifndef 中的代码会生效;

  • 使用条件编译请保证编译前编译后文件的语法正确性,即要保障无论条件编译是否生效都能通过语法校验。比如:json文件中不能有多余的逗号,js中不能重复导入;

相关推荐
雪芽蓝域zzs8 小时前
uniapp 国密sm2加密
uni-app
打不着的大喇叭18 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
zengzehui18 小时前
uniapp启动图被拉伸问题
uni-app
iOS阿玮20 小时前
AppStore教你一招免备案的骚操作!
uni-app·app·apple
ModyQyW2 天前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
耶啵奶膘2 天前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
耶啵奶膘3 天前
uniapp——地图路线绘制map
uni-app
shadouqi3 天前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
走,带你去玩3 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
菌菇汤3 天前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app