uniapp判断当前运行环境 app h5 微信小程序百度小程序_带着梦想扬帆启航_uniapp判断当前环境

irpas 02-07 1494

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

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

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

uniPlatform 可取值如下：

值生效条件appAppwebH5mp-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-PLUSAppAPP-PLUS-NVUE或APP-NVUEApp nvueH5H5MP-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条件编译