H5与Android&iOS客户端原生APP通信交互实现

德顺

发布于 2023-08-25 05:09:24

95100

代码可运行

文章被收录于专栏：前端资源前端资源

运行总次数：0

代码可运行

最近有个需求，原生 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)
})