混合开发-h5页面与ios、安卓之间的通信（H5篇）

• WebView(网络视图)能加载显示网页，可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页
• 首先你需要判断是哪端

• 使用navigator.userAgent获取浏览器属性

下面的可能不准确 具体的 webView的userAgent 根据ios 安卓而定

// 可能不准确 具体的 webView的userAgent 根据ios 安卓而定var ua = navigator.userAgent;trident: ua.indexOf(\'Trident\') > -1, // IE内核presto: ua.indexOf(\'Presto\') > -1, // opera内核webKit: ua.indexOf(\'AppleWebKit\') > -1, //苹果、谷歌内核gecko: ua.indexOf(\'Gecko\') > -1 && ua.indexOf(\'KHTML\') == -1, // 火狐内核mobile: !!ua.match(/AppleWebKit.*Mobile.*/) || !!ua.match(/AppleWebKit/), // 是否为移动终端ios: !!ua.match(/\\(i[^;]+;( U;)? CPU.+Mac OS X/), // IOS终端android: ua.indexOf(\'Android\') > -1 || ua.indexOf(\'Linux\') > -1, // 安卓终端iPhone: ua.indexOf(\'iPhone\') > -1, // 是否为iphone或QQHD浏览器iPad: ua.indexOf(\'iPad\') > -1, // 是否为iPadwebApp: ua.indexOf(\'Safari\') == -1, // 是否web应用程序，没有头部与底部QQbrw: ua.indexOf(\'MQQBrowser\') > -1, // QQ浏览器(手机上的)weiXin: ua.indexOf(\'MicroMessenger\') > -1, // 微信QQ: ualower.match(/\\sQQ/i) == \" qq\", // QQ App内置浏览器（需要配合使用）weiBo: ualower.match(/WeiBo/i) == \"weibo\", // 微博ucLowEnd: ua.indexOf(\'UCWEB7.\') > -1, //ucSpecial: ua.indexOf(\'rv:1.2.3.4\') > -1,webview: !(ua.match(/Chrome\\/([\\d.]+)/) || ua.match(/CriOS\\/([\\d.]+)/)) && ua.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/),ucweb: function () {try {return parseFloat(ua.match(/ucweb\\d+\\.\\d+/gi).toString().match(/\\d+\\.\\d+/).toString()) >= 8.2} catch (e) {if (ua.indexOf(\'UC\') > -1) {return true;}return false;}}(),Symbian: ua.indexOf(\'Symbian\') > -1,ucSB: ua.indexOf(\'Firofox/1.\') > -1

• navigator.userAgent.indexOf(“Android”) > -1 || navigator.userAgent.indexOf(“Linux”) > -1 为安卓手机的webView

• navigator.userAgent.indexOf(“iPhone”) > -1 为苹果手机的webView

通过判断对ios 、安卓进行不同的业务代码，例：

//此代码为 关闭webView回到原生app//处理交互 方法名要和 native app内定义的对应brak() {var u = navigator.userAgent;if (u.indexOf(\"Android\") > -1 || u.indexOf(\"Linux\") > -1) {//安卓手机window.android.backToApp();} else if (u.indexOf(\"iPhone\") > -1) {//苹果手机window.webkit.messageHandlers.backToApp.postMessage({});//{}内可传值}},

开发项目中，如APP中h5页面请求数据，需要token，页面上是没有登陆的，只能让ios、andriod通信传入页面中

//  这里需要定义方法，让IOS、Andriod调用传入 html中window.obtainToken = function(token) {window.token = token;_this.$store.state.token = token;_this.$store.state.token = token;postData();// 进行接口请求等操作};

未完待续。。。