起因
现在市场上各种跨平台开发方案百家争鸣各有千秋，个人认为最成熟的还是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) {
// 在微信中
}
原创不易，转载请注明出处，欢迎留言提议。