当前位置： 首页 > news >正文

「混合开发」H5与原生App交互流程方案全面解析

news 来源：原创 2025/6/10 5:49:52

目录

内嵌H5调用iOS内的方法

1. 背景

2. 解决方案

2.1 创建WebView

2.2 注册原生方法

2.3 H5调用原生方法

3. 序列图

H5 调用 Android：详细指南

整体流程

每一步的详细说明

步骤1：在Android项目中设置WebView

步骤2：定义JavaScript接口

步骤3：加载H5网页

步骤4：在H5中调用Android方法

步骤5：处理Android的方法返回值

状态图

序列图

h5页面运行环境判断

一、先上代码：js封装

二、js封装代码的一些说明

三、配合vue封装个自定义指令

 

1.本文将介绍如何在H5页面中调用iOS原生方法，实现混合开发的功能。

2.本文将介绍如何在H5页面中调用Android原生方法，实现混合开发的功能。

3. h5页面运行环境判断

为什么H5能直接调用？

  • 环境注入：App启动WebView时，会向JS环境注入特定对象：

    • Android：注入window.Android对象

    • iOS：注入window.webkit.messageHandlers容器

  • 协议约定：双方提前约定方法名和参数格式

  • 桥梁作用：WebView充当通信代理，转发JS调用到原生代码

内嵌H5调用iOS内的方法

1. 背景

随着移动互联网的快速发展，原生应用与H5页面的结合成为了一种常见的开发方式。而在一些特定的场景中，我们需要在H5页面中调用iOS原生方法来实现一些功能，比如调用相册、获取地理位置等等。

2. 解决方案

在iOS中，我们可以通过JavaScriptCore框架来实现H5与iOS原生方法的交互。下面将介绍具体的实现步骤。

2.1 创建WebView

首先，我们需要在iOS原生应用中创建一个WebView，用于加载H5页面。可以使用WKWebView或UIWebView来实现，这里以WKWebView为例。

import WebKitclass ViewController: UIViewController, WKUIDelegate, WKScriptMessageHandler {var webView: WKWebView!override func loadView() {let webConfiguration = WKWebViewConfiguration()webView = WKWebView(frame: .zero, configuration: webConfiguration)webView.uiDelegate = selfview = webView}override func viewDidLoad() {super.viewDidLoad()// 加载H5页面if let url = Bundle.main.url(forResource: "index", withExtension: "html") {webView.loadFileURL(url, allowingReadAccessTo: url.deletingLastPathComponent())}// 注册JavaScript与原生方法的消息通信webView.configuration.userContentController.add(self, name: "nativeMethod")}
}
2.2 注册原生方法

在iOS原生应用中，我们需要注册一些原生方法，供H5页面调用。可以通过WKScriptMessageHandler协议来实现。

extension ViewController {func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {if message.name == "nativeMethod" {let body = message.body as? [String: Any]let method = body?["method"] as? Stringlet params = body?["params"] as? [String: Any]if method == "openCamera" {openCamera()} else if method == "getLocation" {getLocation()}}}func openCamera() {// 打开相机逻辑}func getLocation() {// 获取地理位置逻辑}
}
2.3 H5调用原生方法

在H5页面中，我们可以通过JavaScript代码来调用iOS原生方法。可以使用window.webkit.messageHandlers对象来发送消息给iOS原生应用。

function callNativeMethod(method, params) {window.webkit.messageHandlers.nativeMethod.postMessage({ method: method, params: params });
}// 调用原生相机方法示例
callNativeMethod("openCamera");// 调用原生地理位置方法示例
callNativeMethod("getLocation");

3. 序列图

下面是一个使用Sequence Diagram插件绘制的序列图，说明了H5调用iOS原生方法的流程。

iOS原生应用H5页面iOS原生应用H5页面调用原生方法执行原生方法


 

H5 调用 Android：详细指南

在现代的应用开发中，H5（HTML5）和原生Android应用之间的交互变得越来越重要。通过这种交互，开发者可以充分利用两者的优势，提高用户体验。在本文中，我将为你详细介绍如何实现H5调用Android的过程，包括每一步的详细步骤、代码示例以及图示表示。

整体流程

下面是H5调用Android的流程表：

步骤描述
1在Android项目中设置WebView
2定义JavaScript接口
3加载H5网页
4在H5中调用Android方法
5处理Android的方法返回值

每一步的详细说明

步骤1：在Android项目中设置WebView

首先，在你的Android项目中创建一个WebView，以便加载H5页面。

// MainActivity.java
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;public class MainActivity extends AppCompatActivity {private WebView webView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);// 找到WebView组件webView = findViewById(R.id.webView);// 允许JavaScript执行webView.getSettings().setJavaScriptEnabled(true);// 加载H5页面webView.setWebViewClient(new WebViewClient());webView.loadUrl("file:///android_asset/index.html"); //加载本地H5页面}
}

代码说明：

  • getSettings().setJavaScriptEnabled(true);：允许在WebView中执行JavaScript，这样H5能够调用安卓的方法。
  • loadUrl(...)：加载你的H5页面，可以是本地文件或网络地址。
步骤2：定义JavaScript接口

你需要定义一个JavaScript接口，使H5能够调用Android的方法。

import android.webkit.JavascriptInterface;public class WebAppInterface {MainActivity mActivity;WebAppInterface(MainActivity c) {mActivity = c;}@JavascriptInterfacepublic void showToast(String toast) {Toast.makeText(mActivity, toast, Toast.LENGTH_SHORT).show();}
}// 在MainActivity中
webView.addJavascriptInterface(new WebAppInterface(this), "Android");

代码说明：

  • @JavascriptInterface注解让H5中的JavaScript可以访问Android的方法。
  • showToast(String toast)是供H5调用的一个示例方法。
步骤3：加载H5网页

H5页面的内容可以是一个简单的HTML文件，比如index.html：

<!DOCTYPE html>
<html>
<head><title>H5 to Android</title><script type="text/javascript">function callAndroid() {// 调用Android方法Android.showToast("Hello from H5!");}</script>
</head>
<body>H5调用Android<button onclick="callAndroid()">调用Android</button>
</body>
</html>

代码说明：

  • onclick="callAndroid()"：当用户点击按钮时，将调用callAndroid函数，该函数将通过Android接口调用showToast方法。
步骤4：在H5中调用Android方法

之前的代码已经涵盖了这一部分。用户点击按钮时，H5会调用Android的showToast方法。

步骤5：处理Android的方法返回值

如果你的Android方法需要返回值，确保你在JavaScript接口中做相应的处理。例如，假设你要在Android中返回当前时间：

@JavascriptInterface
public String getCurrentTime() {return java.text.DateFormat.getDateTimeInstance().format(new java.util.Date());
}

然后在H5中调用它：

function fetchTime() {// 获取当前时间并显示var currentTime = Android.getCurrentTime();alert("Current Time: " + currentTime);
}

状态图

以下是H5与Android之间的状态转移图示，描述了用户如何触发操作：

H5页面调用AndroidAndroid执行返回结果

序列图

下面是H5调用Android的序列图：

AndroidH5AndroidH5调用showToast("Hello from H5!")显示Toast消息

h5页面运行环境判断

  • 判断h5页面所处的运行环境，以便针对不同的环境做兼容性或差异化处理；
  • 由于很多时候需要一进页面就第一时间做处理，所以异步的判断方法都不予考虑，必须是能实时获取的;
  • 那么自然的，判断UA是最好、最方便的方式。

一、先上代码：js封装

platform.js：

const ua = window.navigator.userAgent.toLowerCase()// android平台
const isAndroid = (() => {return /Android|Adr/i.test(ua)
})()// ios平台
const isIos = (() => {return /iPhone|iPod|iPad/i.test(ua)
})()// 微信生态
const isWechat = (() => {return /MicroMessenger/i.test(ua)
})()// 微信小程序
const isWxmp = (() => {return /miniProgram/i.test(ua) || window.__wxjs_environment === 'miniprogram'
})()// 钉钉环境
const isDingding = (() => {return /DingTalk/i.test(ua)
})()// 自家的android客户端
const isInnerAdr = (() => {return isAndroid && /dianyidian/i.test(ua)
})()// 自家的ios客户端
const isInnerIos = (() => {return isIos && /dianyidian/i.test(ua)
})()// 自家的app客户端
const isInnerApp = (() => {return isInnerAdr || isInnerIos
})()// 站内
const isInner = (() => {return isInnerAdr || isInnerIos || isWxmp
})()// 站外
const isOuter = (() => {return !isInner
})()export default {isAndroid,isIos,isWechat,isWxmp,isDingding,isInnerAdr,isInnerIos,isInnerApp,isInner,isOuter
}

 

二、js封装代码的一些说明

  • 微信生态，包括微信小程序、微信内置浏览器、微信公众号等
  • 针对hybrid混合开发模式中的webview内嵌h5页，需要判断自家的客户端，这时需要让客户端开发人员修改webview的UA，添加上特殊的UA标识，用来给h5做判断，比如我这里的标识就是dianyidian。
  • 关于站内站外的划分因人而异，自己决定，使用方便就好。
  • 导出的每一个属性值都是boolean类型，true或false。
  • 在自家ios客户端接入阿里百川后发现UA被莫名的覆盖了，这种情况可以额外加个判断处理：
// 自家ios客户端
const isInnerIos = (() => {if (isIos && /baichuan/i.test(ua)) {// 兼容ios客户端跳转阿里百川授权后再打开webview的userAgent被百川覆盖的问题return true}return isIos && /dianyidian/i.test(ua)
})()
  • 以上都是实际项目中经过考验了的，放心使用。

三、配合vue封装个自定义指令

  • 指令作用：根据页面运行环境给元素添加相应的class类名，这样就可以在css样式里很方便的对不同环境做不同的处理。
  • 指令封装：
// 先引入上述封装的platform.js
import platform from '@/utils/platform'export default {bind (el) {Object.keys(platform).forEach(v => {if (platform[v]) {el.classList.add(v)}})}
}
  • 使用示例：
<template><div class="demo" v-platforms>使用示例</div>
</template><script>
import platforms from '@/directive/platforms/index'export default {directives: { platforms }
}
</script><style lang='less' scoped>
.demo {color: red;&.isAdr {// 安卓平台下的自定义样式处理}&.isIos {// ios平台下的自定义样式处理}&.isWxmp {// 微信小程序下的自定义样式处理}// 其他环境下也一样，任性的加......
}
</style>

相关文章：

  • Tomcat Jetty 和 UnderTow 的粗略对比
  • 动手学深度学习13.3. 目标检测和边界框-笔记练习（PyTorch）
  • nodejs安装
  • （Note）基于Pytorch手搓RNN参考
  • 轻量级关键点 blaze pose 2025
  • 旋量理论：刚体运动的几何描述与机器人应用
  • 统计学（第8版）——假设检验学习笔记（考试用）
  • 树突状细胞与肿瘤
  • MAZANOKE结合内网穿透技术实现跨地域图像优化服务的远程访问过程
  • 华为云上的K8S怎么使用对象存储配置pod文件持久化。
  • claude3.7高阶玩法，生成系统架构图，国内直接使用
  • centos 7 部署awstats 网站访问检测
  • AWS中国云的定时任务（AWS EventBridge+AWS Lambda）
  • HBase学习：通俗易懂的实例解析
  • AWS EKS 集群日志上报观测云实践
  • HTML(一)
  • 如何控制electron的应用在指定的分屏上打开[特殊字符]
  • MFE(微前端) Module Federation：Webpack.config.js文件中每个属性的含义解释
  • HTML 标签
  • [docker]镜像操作：关于docker pull、save、load一些疑惑解答
  • 网站左侧漂浮导航/互联网营销模式
  • 专业网站建设套餐/广东深圳今天最新通知
  • 用爱奇艺会员做视频网站违法吗/开发一个app平台大概需要多少钱?
  • 嘉兴建设局网站/哈尔滨seo整站优化
  • 网站做简介/百度大搜
  • wordpress hook/谷歌seo博客