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

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.安卓，苹果手机 pcif (/(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)){   //IEreturn ;   }elseif(/firefox/i.test(browserName)){   //Firefoxreturn ;   }elseif(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){   //Chromereturn ;   }elseif(/opera/i.test(browserName)){   //Operareturn ;   }elseif(/webkit/i.test(browserName) &&!(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))){   //Safarireturn ;   }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>微信公众号关注组件</view><view><!-- uni-app未封装，但可直接使用微信原生的official-account组件--><!-- #ifdef MP-WEIXIN --><official-account></official-account><!-- #endif --></view>
</view>

api条件编译

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

样式条件编译

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

pages.json 的条件编译

下面的页面，只有运行至 App 时才会编译进去。

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

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

uniapp判断当前运行环境 app h5 微信小程序
仅3.4.10+版本以上才支持,如果您的hbuilderX版本不是这个版本的需要先升级一下版本 hbuilderx下载选择3.4.11及以上版本 const type = uni.getSystem ...
在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案
主要是跟vue2相关的开发环境与框架. 本人选型方案结合自身知识系统(vue2,webstorm),综上相关框架了解,选择了以下方案: 开发环境:HBuilder X + Webstorm 框 ...
详细判断浏览器运行环境
作者:JowayYoung 仓库:Github.CodePen 博客:掘金.思否.知乎.简书.头条.CSDN 公众号:IQ前端联系我:关注公众号后有我的微信哟特别声明:原创不易,未经授权不得对此文 ...
蚂蚁分类信息系统原生微信小程序百度小程序
蚂蚁分类信息系统原生微信小程序百度小程序,系统采用uniapp开发,小程序接口独立开发,兼容蚂蚁分类信息系统数据库.支持微信支付,百度支付
uniapp一套代码开发app和微信小程序
为什么选择uniapp开发? 为什么选择uniapp进行开发? 1.uniapp对于独自开发是相当友好的,一套代码可以兼容app(安卓,ios),小程序,h5等,一定程度上降低了开发的成本,个人开发的 ...
ShopXO开源电商系统源码支持PC+H5支付宝小程序微信小程序百度小程序头条amp；抖音小程序QQ小程序APP等
介绍: ShopXO开源电商体系,国内抢先企业级.支撑PC+H5.支付宝小程序.微信小程序.百度小程序.头条&抖音小程序.QQ小程序.APP等- 支撑多库房.多商户形式运营(组件插件化.即插即 ...
ShopXO开源电商系统源码支持PC+H5支付宝小程序微信小程序百度小程序头条抖音小程序QQ小程序APP等
介绍: ShopXO开源电商体系,国内抢先企业级.支撑PC+H5.支付宝小程序.微信小程序.百度小程序.头条&抖音小程序.QQ小程序.APP等- 支撑多库房.多商户形式运营(组件插件化.即插即 ...
uniapp 判断用户是否安装app, 没有则安装
场景: A分享一个活动页面给B, B点击后,需要判断是否有app,如果有,直接跳转到活动页: 如果没有,需要下载app 判断是否安装某app: plus.runtime.isApplicationEx ...
ShopWind 开源电商系统 V3.4.3 发布，uni-app 商城案例，PC+APP+H5 + 小程序
ShopWind 是一款基于 Yii2.0 框架深度重构的 B2B2C.O2O 行业的电商系统软件,您可以轻松创建和发布属于自己品牌的专业的电商平台,进行全方位的品牌宣传和产品推广.ShopWind ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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