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 | 快应用华为 |
组件或者内容条件编译
平台特有的组件或者html内容
示例,如下公众号关注组件仅会在微信小程序中出现:
<view>
<view>微信公众号关注组件</view>
<view>
<official-account></official-account>
</view>
</view>
api条件编译
// #ifdef %PLATFORM%
平台特有的API实现
// #endif
样式条件编译
/* #ifdef %PLATFORM% */
平台特有样式
/* #endif */
pages.json 的条件编译
下面的页面,只有运行至 App 时才会编译进去。
具体的条件编译使用方法,可以去官网了解uniapp条件编译