本文将深入探讨 H5 与 App 交互的几种常见模式。

首先声明，本文涉及的 H5 与 App 交互协议和模式没有什么特别独到之处，相反，它们恰恰是在业界既有经验基础上结合项目实际归纳提炼出来的。因此，文中涉及的技术和代码可以看作是行业经验落地的产物，不涉秘，也不是权威做法，仅供业界同仁参考。

本文内容如下：

概述

H5，在中国被专门用来指代开发内嵌于手机应用中的网页的技术，外国好像并没有这个说法。从技术上讲，H5 是 HTML5 即 Hyper Text Markup Language（超文本标记语言）第 5 版的简称。而 HTML 只是开发网页要用到的多种技术之一。除了 HTML，还要用 CSS 设计界面，用 JavaScript 实现交互，甚至要用 Node.js 实现服务端逻辑。为什么 H5 会被用来笼统地指代这些技术呢？我猜一是因为它简单，二是移动端网页开发技术又恰好需要这么一个概念。

移动端网页运行在手机应用内嵌的浏览器引擎中，这个没有 UI 的内核容器统称 WebView，即 iPhone 的 UIWebView（iOS 2.0–12.0）、WKWebView（iOS 8.0+，macOS 10.10+）和 Android 的 WebView。总之，WebView 就是在手机应用中运行和展示网页的界面和接口（神奇的是，英文 Interface，既可以翻译成 “界面” 也可以翻译成“接口”）。

H5 与原生应用的交互都是通过原生应用中的 WebView 实现的。通过这个环境，H5 可以调用原生应用注入其中的原生对象的方法，原生应用也可以调用 H5 暴露在这个环境中的 JavaScript 对象的方法，从而实现指令与数据的传输。

比如，在 Android 应用中，WebView类有一个公有方法addJavascriptInterface，签名为：

public void addJavascriptInterface (Object object, String name)

调用这个方法可以向 WebView 中以指定的名称name注入指定的 Java 对象object。这样，WebView 中的 JavaScript 就可以通过name调用object的方法。比如：

class JsObject {
    @JavascriptInterface
    public String toString() { return "injectedObject"; }
 }
 webview.getSettings().setJavaScriptEnabled(true);
 webView.addJavascriptInterface(new JsObject(), "injectedObject");
 webView.loadData("", "text/html", null);
 webView.loadUrl("javascript:alert(injectedObject.toString())");

在 iOS 或 macOS 中，需要通过创建WKWebView类的实例在应用中嵌入网页，交互过程类似。

基础接口