uniapp判断h5/微信小程序/app端+实战展示

2025/10/18 18:31:21 来源：https://blog.csdn.net/weixin_48998573/article/details/140499989 浏览: 次关键词：uniapp判断h5/微信小程序/app端+实战展示

在这里插入图片描述

文章目录

导文
- - 使用条件编译的基本语法
  - 常见的平台标识符
  - 示例
  - 实战展示
  - 使用场景举例
  - 注意事项

导文

这里是导文

当你在开发Uni-app时，需要根据不同的平台（比如App端、H5端、微信小程序等）来执行不同的代码逻辑，可以使用条件编译来实现这一点。Uni-app支持类似于预处理指令的条件编译，这些指令在编译时根据不同的平台选择性地包含或排除代码片段。

使用条件编译的基本语法

条件编译指令的基本语法如下：

/*#ifdef 平台标识符*/// 在该平台下执行的代码
/*#endif*/

其中，#ifdef 表示如果该平台标识符定义了，则编译器将包含这部分代码。如果未定义，则会被忽略。

常见的平台标识符

Uni-app中常见的平台标识符包括但不限于：

APP-PLUS：App端，包括iOS和Android。
H5：网页端，即在浏览器中运行的H5应用。
MP-WEIXIN：微信小程序端。
MP-ALIPAY：支付宝小程序端。
MP-BAIDU：百度小程序端。
MP-TOUTIAO：字节跳动（今日头条）小程序端。
MP-QQ：QQ小程序端。

示例

假设你有一段需要根据不同平台展示不同UI或执行不同逻辑的代码，可以这样编写：

/*#ifdef APP-PLUS*/// App端特有的逻辑console.log('Running on App-Plus');
/*#endif*//*#ifdef H5*/// 在浏览器端（H5）执行的逻辑console.log('Running on H5');
/*#endif*//*#ifdef MP-WEIXIN*/// 微信小程序端执行的逻辑console.log('Running on WeChat Mini Program');
/*#endif*/

实战展示

在这里插入图片描述

 // 获取胶囊高度capsuleHeight() {/*#ifdef H5*/console.log("H5端");return `50px`;/*#endif*//*#ifdef MP-WEIXIN*/return `${uni.getMenuButtonBoundingClientRect().height +uni.getMenuButtonBoundingClientRect().top}px`;/*#endif*/},