最近有个需求，原生 APP 使用 webView 内嵌 H5 页面，APP 未登录状态下打开 H5 页面，在页面中登录，再返回 APP 时要保持登录状态（APP 也要同步登录）。
首先写一个方法，来获取设备信息：./getDevice.js
/*
* 获取设备信息
* */
export function getDevice() {
let ua = navigator.userAgent
return {
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.*/), //是否为移动终端
iOS: !!ua.match(/(i[^;] ;( U;)? CPua. Mac OS X/), //ios终端
Android: ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1, //android终端
iPhone: ua.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
iPad: ua.indexOf('iPad') > -1, //是否iPad
webApp: ua.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
weixin: ua.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
qq: ua.match(/sQQ/i) == " qq" //是否QQ
}
}然后封装一个处理与 APP 通信的方法：./appBridge.js
import {getDevice} from './getDevice'
export function appBridge(token, url, device) {
var app = device
var data = {}
if (!app) {
app = getDevice()
}
if (app == "iOS" || app == "iPhone" || app == "iPad") {
console.log('设备信息：iOS')
/*
* Apple 系列设备
* name: getMessenger 发送的方法
* data: { 发送的内容
* oppcToken: oppcToken
* }
* */
data = {
oppcToken: token
}
window.webkit.messageHandlers.getMessenger.postMessage(data);
} else if (getDevice() == "Android") {
/*
* Android 设备
* data: { 发送的内容
* oppcToken: oppcToken
* }
* responseData: 请求返回数据
* */
data = {
oppcToken: token
}
window.WebViewJavascriptBridge.send(data, function (responseData) {
console.log('请求结果：' responseData)
})
} else if (app == "H5") {
/*
* 浏览器&H5
* */
console.log('设备信息：H5')
if (url) {
window.location.href = url
}
}
}在需要的页面调用：./index.vue
import { appBridge } from './appBridge'
appBridge(token, url, device)这里我查了一下上面的两个方法：
MessageHandler
WKWebView 有一个内容交互控制器，该对象提供了通过 JS 向 WKWebView 发送消息的途径。需要设置 MessageHandler ，我把这个功能简称为 MessageHandler 。
通常用于 H5 javaScript 与 iOS 进行交互。
语法：
代码语言：javascript复制/*
* name: 设置 MessageHandler 的第二个参数，iOS 那边来接收
* messageBody: 发送的内容
*/
window.webkit.messageHandlers.<name>.postMessage(<messageBody>)示例：
代码语言：javascript复制window.webkit.messageHandlers.getMessenger.postMessage(data)WebViewJavascriptBridge
针对 Android 设备，这里使用的 WebViewJavaScriptBridge 方法，用于 WKWebView & UIWebView 中 OC 和 JS 交互。
示例：
代码语言：javascript复制/*
* data: 发送的数据
* responseData: 请求返回的结果
*/
window.WebViewJavascriptBridge.send(data, function (responseData) {
console.log('请求结果：' responseData)
})未经允许不得转载：w3h5-Web前端开发资源网 » H5与Android&iOS客户端原生APP通信交互实现
