hbuilderX最新版本现在已经支持在代码中获取当前所处环境

仅3.4.10+版本以上才支持，如果您的hbuilderX版本不是这个版本的需要先升级一下版本 hbuilderx下载
选择3.4.11及以上版本

const type = uni.getSystemInfoSync().uniPlatform
console.log(type) // app

uniPlatform 可取值如下：

值	生效条件
app	App
web	H5
mp-weixin	微信小程序
mp-alipay	支付宝小程序
mp-baidu	百度小程序
mp-toutiao	字节跳动小程序
mp-lark	飞书小程序
mp-qq	QQ小程序
mp-kuaishou	快手小程序
mp-jd	京东小程序
MP-360	360小程序
quickapp-webview	快应用通用(包含联盟、华为)
quickapp-webview-union	快应用联盟
quickapp-webview-huawei	快应用华为

我们也可以通过这个方法获取到设备的品牌以及型号

获取设备品牌
const brand= uni.getSystemInfoSync().deviceBrand
获取设备型号
const model= uni.getSystemInfoSync().deviceModel
获取设备类型
const deviceType= uni.getSystemInfoSync().deviceType

还有很多新增的系统信息 具体可以查看uniapp获取系统信息

还有一种方法就是通过js 来获取当前环境
javascript的navigator对象是Window对象的一个属性，指向了一个包含浏览器相关信息的对象。navigatot中包含了一些常用到的属性，如

navigator.appVersion 浏览器的版本号

navigator.appName 浏览器的名称

navigator.language 浏览器使用的语言

navigator.platform 浏览器使用的平台

navigator.userAgent 浏览器的user-agent信息

其中userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。

一般来讲，它是在 navigator.appCodeName 的值之后加上斜线和 navigator.appVersion 的值构成的。

例如：Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322)。

我们可以通过这个方法来判断当前运行环境

1.微信内置浏览器环境

var ua = window.navigator.userAgent.toLowerCase()
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
//当前为微信内置浏览器环境
}

2.安卓，苹果手机 pc

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { 
//判断iPhone|iPad|iPod|iOS
} else if (/(Android)/i.test(navigator.userAgent)) { 
//判断Android
} else { 
//pc
};

3.还可以判断浏览器的类型

function userBrowser(){   
 
var browserName=navigator.userAgent.toLowerCase();   
 
if(/msie/i.test(browserName) && !/opera/.test(browserName)){   
 
//IE
 
return ;   
 
}elseif(/firefox/i.test(browserName)){   
 
//Firefox
 
return ;   
 
}elseif(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){   
 
//Chrome
 
return ;   
 
}elseif(/opera/i.test(browserName)){   
 
//Opera
 
return ;   
 
}elseif(/webkit/i.test(browserName) &&!(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))){   
 
//Safari
 
return ;   
 
}else{   
 //unKnow  
 }   
}

如果你仅仅是想在代码编译的时候判断环境 ， 那么通过条件编译便可以进行判断

条件编译写法	说明
#ifdef APP-PLUS
需条件编译的代码
#endif
仅出现在 App 平台下的代码
#ifndef H5
需条件编译的代码
#endif
除了 H5 平台，其它平台均存在的代码
#ifdef H5 || MP-WEIXIN
需条件编译的代码
#endif
在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）

%PLATFORM% 可取值如下：

值	生效条件
VUE3	HBuilderX 3.2.0+ 详情
APP-PLUS	App
APP-PLUS-NVUE或APP-NVUE	App nvue
H5	H5
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	快应用华为

组件或者内容条件编译

<!--  #ifdef  %PLATFORM% -->
平台特有的组件或者html内容
<!--  #endif -->

示例，如下公众号关注组件仅会在微信小程序中出现：

<view>
    <view>微信公众号关注组件
		        <official-account></official-account>
		    <!-- #endif -->
    </view>
</view>

api条件编译

// #ifdef  %PLATFORM%
平台特有的API实现
// #endif

在这里插入图片描述

样式条件编译

/*  #ifdef  %PLATFORM%  */
平台特有样式
/*  #endif  */

在这里插入图片描述
pages.json 的条件编译

下面的页面，只有运行至 App 时才会编译进去。
在这里插入图片描述

具体的条件编译使用方法，可以去官网了解uniapp条件编译