最近有个需求,原生 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 进行交互。
语法:
/* * name: 设置 MessageHandler 的第二个参数,iOS 那边来接收 * messageBody: 发送的内容 */ window.webkit.messageHandlers.<name>.postMessage(<messageBody>)
示例:
window.webkit.messageHandlers.getMessenger.postMessage(data)
WebViewJavascriptBridge
针对 Android 设备,这里使用的 WebViewJavaScriptBridge
方法,用于 WKWebView
& UIWebView
中 OC
和 JS
交互。
示例:
/* * data: 发送的数据 * responseData: 请求返回的结果 */ window.WebViewJavascriptBridge.send(data, function (responseData) { console.log('请求结果:' + responseData) })
未经允许不得转载:w3h5 » H5与Android&iOS客户端原生APP通信交互实现
原创文章,作者:3628473679,如若转载,请注明出处:https://blog.ytso.com/228456.html