网络知识 娱乐 uniapp判断当前运行环境 app h5 微信小程序 百度小程序

uniapp判断当前运行环境 app h5 微信小程序 百度小程序

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

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

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

uniPlatform 可取值如下:

生效条件
appApp
webH5
mp-weixin微信小程序
mp-alipay支付宝小程序
mp-baidu百度小程序
mp-toutiao字节跳动小程序
mp-lark飞书小程序
mp-qqQQ小程序
mp-kuaishou快手小程序
mp-jd京东小程序
MP-360360小程序
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% 可取值如下:

生效条件
VUE3HBuilderX 3.2.0+ 详情
APP-PLUSApp
APP-PLUS-NVUE或APP-NVUEApp nvue
H5H5
MP-WEIXIN微信小程序
MP-ALIPAY支付宝小程序
MP-BAIDU百度小程序
MP-TOUTIAO字节跳动小程序
MP-LARK飞书小程序
MP-QQQQ小程序
MP-KUAISHOU快手小程序
MP-JD京东小程序
MP-360360小程序
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条件编译