在web前端开发中，很多时候都需要和原生app开发人员来交互，或者有很多需要兼容的地方，甚至为了规避移动端各种无端报错，或者其中一端报错等等问题：
首先就是最常用遇到app开发中的安卓与iOS：
（1）安卓与iOS因为操作系统不同，从调用其中的方法就需要知道h5页面到底位于哪一端，下面就是判断操作系统来分辨两者：
1 var u = navigator.userAgent; 2 3 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 4 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 5 if(isAndroid){ 6 console.log("调用Android方法") 7 window.android.function(); 8 }else if(isiOS){ 9 console.log("调用iOS方法") 10 window.webkit.messageHandlers.***.function(); 11 }
（2）判断是移动端浏览器打开还是PC端浏览器打开：
1 if(/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) { 2 //移动端打开 3 console.log("手机端打开执行") 4 5 } else { 6 7 //pc端打开 8 console.log("PC端打开执行") 9 10 }
（3）判断微信、qq、还是微博内部打开（微信内置浏览器与qq内置浏览器 与微博内置浏览器 ）：
1 function is_weixn_qq() { 2 3 var ua = navigator.userAgent.toLowerCase(); 4 5 if(ua.match(ua.match(/MicroMessenger/i) == "micromessenger")) { 6 // 下面是我在网上复制别人的代码，其中的展示引导图根据自己项目需求做就可以（下面三者都可） 7 $('#weixin-tip').show();//微信引导图（点击右上角按钮选择浏览器打开）； 8 9 return true; 10 11 } 12 13 if(ua.match(/QQ\/[0-9]/i)) { 14 15 $('#weixin-tip').show();//qq引导图（点击右上角按钮选择浏览器打开）； 16 17 return true; 18 19 } 20 21 if (ua.match(/WeiBo/i) == "weibo") { 22 23 //在新浪微博客户端打开 24 25 return true; 26 27 } 28 29 return false; 30 31 }
（4）日常功能的实现：进入页面时，根据不同情景后端会在当前页面url后面拼接参数，利用获取不同参数实现不同前端展示或逻辑：
1 获取当前url通用方法： 2 3 function getQueryString(name) { 4 5 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 6 7 var r = window.location.search.substr(1).match(reg); 8 9 if(r != null) 10 11 return decodeURIComponent(r[2]); 12 13 return null; 14 15 } 16 17 var a = getQueryString('a') ? getQueryString('a') : ''; //a为拼接的参数名 18 19 if(a == 1) { 20 21 $('.myfooter').show(); 22 23 $('.box').css('padding-bottom', '1.4rem'); 24 25 } else { 26 27 $('.myfooter').hide(); 28 29 $('.box').css('padding-bottom', '0'); 30 31 }
关于第四点，因为本人对于正则并不懂，所以就封装了一个获取url参数js：
1 var getUrlParams = function(){ 2 //因为对于内嵌页面来说，基本上传参都是拼接url，所以这里直接获取url，query的参数 3 //获取url参数 4 var query = window.location.search.substring(1); 5 //每个参数键值对 6 var vars = query.split("&"); 7 //创建一个对象来接收这些键值对 8 var json = {} 9 10 for (var i=0;i<vars.length;i++) { 11 // 循环中，以“=”来截断键与值 12 var pair = vars[i].split("="); 13 // 赋值 14 json[pair[0]] = pair[1] 15 } 16 //返回 17 return json; 18 }
这样就清楚多了，根据自己的喜好来。
参考链接：https://www.jianshu.com/p/6a43508957d2
字太难看，不想动笔，此章为印，加深记忆，往后若遇，来此考古。
