H5 与 App、网页之间的通信

前言

本文整理工作中 H5 嵌入 Android、iOS 与 PC 网页后,如何与各端通信。(提供 H5 端的代码)

环境判断

javascript 复制代码
  const ua = navigator.userAgent.toLowerCase()
  const isAndroid = /android/i.test(ua)
  const isIos = /iphone|ipod|ios/i.test(ua)
  const isIpad = /ipad/i.test(ua)
  const isMobile = isAndroid || isIos || isIpad
  const isWx = /micromessenger/i.test(ua) // 微信
  const isWxWork = /wxwork/.test(ua) // 企业微信
  const isQq = /QQ\/([\d\.]+)/i.test(ua) // QQ
  const isQz = ua.indexOf('qzone/') > -1 // QQ空间
  const isByteDance = /bytedancewebview/i.test(ua) // 字节跳动
  const isTickTok = /ttwebview/i.test(ua) // 抖音

Android

javascript 复制代码
if (isAndroid) {
  // 通知 app 打开弹窗, 并传参。方法在 app 中定义
  window.androidFunc.openDialog(JSON.stringify({ id: 1 })) 
}
// 监听app主动触发刷新事件
window.appReload = (params) => {}

iOS/iPad

javascript 复制代码
if (isIos) {
  // 通知 app 打开弹窗, 并传参。方法在 app 中定义 
  window.webkit.messageHandlers.openDialog.postMessage({ id: 1 })
}
// 监听app主动触发刷新事件
window.appReload = (params) => {}

PC

这里讨论网页通过 iframe 方式嵌入 H5 的方式

javascript 复制代码
// 网页嵌套 H5
<iframe ref="detIframe" :src="url" frameborder="0" style="width: 100%; height: 100%"></iframe>

// H5发送消息
// 这里可以指定具体可接收消息的窗口
window.parent.postMessage({ open: true }, url)
// 也可不指定
window.parent.postMessage({ open: true }, '*')

// PC接收消息
window.addEventListener("message", receiveMessage, false)
function receiveMessage(event) {  
  // 检查消息的来源是否是我们期望的  
  if (event.origin !== "http://example.com") return
  // 处理接收到的数据  
  console.log("Received message:", event.data);  
}

// PC 发送消息
this.$refs.detIframe.contentWindow.postMessage(
  {
	data: data,
  },
  url
)

H5 与 App 之间的通信方式

以下内容来自文言一心

1. URL Scheme

URL Scheme是一种在移动应用中定义自定义URL协议的方式,通过它可以实现App与H5之间的跳转和通信。H5页面可以通过链接到特定的URL Scheme来触发App执行某些操作,反之亦然。

举个例子:

html 复制代码
<!-- 打开微信 -->
<a href="weixin://">打开微信</a>

<!-- 打开支付宝 -->
<a href="alipays://">打开支付宝</a>

<!-- 打开支付宝的扫一扫 -->
<a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫</a>

<!-- 打开支付宝的蚂蚁森林 -->
<a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>

2. Deep Linking

Deep Linking是一种允许用户直接打开App中特定页面或功能的链接技术。它通常与URL Scheme结合使用,使得H5页面可以直接跳转到App的某个深层页面。

3. Universal Links(iOS)和App Links(Android)

Universal Links是苹果推出的一种技术,允许用户在Safari浏览器中直接打开App的特定页面,而无需先跳转到App的首页。类似地,Android平台有App Links,也实现了类似的功能。

4. WebView与JavaScript桥接

如果App内嵌了一个WebView来展示H5页面,那么可以通过WebView的JavaScript接口与原生代码进行通信。通常,这涉及到在原生代码中注入JavaScript代码,或者通过WebView的特定方法来调用原生方法。

5. 第三方库和框架

有一些第三方库和框架提供了更便捷的方式来实现App与H5之间的通信,比如React Native的WebView组件就提供了与H5页面通信的功能。

相关推荐
逐·風2 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫2 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子3 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享4 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄5 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf6 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨6 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL6 小时前
npm入门教程1:npm简介
前端·npm·node.js