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

最近有个需求,原生 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 有一个内容交互控制器,该对象提供了通过 JSWKWebView 发送消息的途径。需要设置 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 & UIWebViewOCJS 交互。

示例:

/*
* data: 发送的数据
* responseData: 请求返回的结果
*/
window.WebViewJavascriptBridge.send(data, function (responseData) {
  console.log('请求结果:' + responseData)
})


未经允许不得转载:w3h5 » H5与Android&iOS客户端原生APP通信交互实现

赞 (3)
分享到: +

评论 沙发

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)