js判断移动端浏览器类型,微信浏览器、支付宝小程序、微信小程序等

时间:2024-07-31 11:06:44

起因

现在市场上各种跨平台开发方案百家争鸣各有千秋,个人认为最成熟的还是hybird方案,简单的说就是写H5各种嵌入,当然作为前端工程师最希望的也就是公司采用hybird方案当作技术路线。

所谓的hybird方案很多时候单独指h5嵌入app页面,本专辑讲的却比这个要广泛很多,作者想写一个基础框架嵌入所有移动端app,包括app壳子、微信公众号、微信小程序、支付宝页面、支付宝小程序等,而且是一套代码可以同时嵌入各种app,这样最大程度上节约开发成本,当然我们的框架也会注意到开发质量,如前面文章提到的移动端页面切换动画也是为了提升用户体验。

大hybird方案必须要处理的是判断当前程序运行在什么环境中,故有此篇判断浏览器类型的合集。

微信浏览器

微信公众号或微信内直接打开链接

var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
// 在微信中打开
}

微信小程序

// html 引入
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
// js中如下判断
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
wx.miniProgram.getEnv((res)=>{
if (res.miniprogram) {
// 在微信小程序中打开
}
})
}

支付浏览器

支付宝浏览器中

var ua = navigator.userAgent.toLowerCase();
if (ua.match(/Alipay/i)=="alipay") {
// 在支付宝中打开
}

支付宝小程序中

// html 引入
<script type="text/javascript" src="https://appx/web-view.min.js"></script>
// js中如下判断
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/Alipay/i)=="alipay") {
my.getEnv((res)=>{
if (res.miniprogram) {
// 在支付宝小程序中打开
}
})
}

app壳子

在app壳子中往往使用往ua里面添加唯一标识符来做标识。

var ua = navigator.userAgent.toLowerCase();
if (ua.match(/myapp/i)=="myapp") {
// 在自家app壳子里面
}

其他的没有标识的app,最后的倔强

可以使用路径上新增参数的方式去识别,当识别到参数就在session保存起来,这样作用周期就是某一次打开,防止了数据污染。

完整版js

我习惯命名browser-env.js

// 自家app壳子的ua标识
const SELF_APP_UA_KEY = 'myapp' const browserEnv = {
enum: {
BROWSER: 0, // 浏览器访问, SELFAPP: 10, // 自己家app WX: 20, // 微信浏览器
WX_MINIPROGRAM: 21, // 微信小程序 ALI: 30, // 支付宝浏览器
ALI_MINIPROGRAM: 31,// 支付宝小程序 // ... 更多扩展
},
webType: 0,
initWebType: function (type) {
// 设置值,并且让其不可改变,防止开发随意篡改。
Object.defineProperty( this, "webType", {
value: type,
writable: false,
configurable: false
});
},
// 识别浏览器类型
identifyBrowser() {
// ua和枚举的浅层映射放这里,ua能匹配的都这么处理
let codeKey = {
'micromessenger': this.enum.WX,
'alipay': this.enum.ALI
}
// 添加自家app映射
codeKey[SELF_APP_UA_KEY] = this.enum.SELFAPP; // 获取ua
let ua = navigator.userAgent.toLowerCase();
let type = this.enum.BROWSER
for (let key in codeKey) {
let mk = `/${key}/i`;
if (ua.match(mk) == key) {
type = codeKey[key]
}
} // ua 匹配不出来的,继续匹配 // 延迟引入JSSDK往后处理,不讲究可以直接写入html
if (type == this.enum.WX) {
wx.miniProgram.getEnv((res)=>{
if (res.miniprogram) {
type = this.enum.WX_MINIPROGRAM
}
})
} else if (type == this.enum.ALI) {
my.getEnv((res)=>{
if (res.miniprogram) {
type = this.enum.ALI_MINIPROGRAM
}
})
} this.initWebType(type)
},
install(Vue) {
this.identifyBrowser() Vue.config.globalProperties.$browserEnv = browserEnv;
},
} export default browserEnv;

老规矩,全局引入

import browserEnv from '@/utils/browser-env.js'
app.use(browserEnv)

使用,个人觉得使用枚举更加清晰吧,一顿写数字其实也挺好

if (this.$browserEnv.webType == this.$browserEnv.enum.WX) {
// 在微信中
}

原创不易,转载请注明出处,欢迎留言提议。