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

目录

内嵌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 WebKit

class ViewController: UIViewController, WKUIDelegate, WKScriptMessageHandler {
    var webView: WKWebView!
    
    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = 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? String
            let 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

首先，在你的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;

    @Override
    protected 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;
    }

    @JavascriptInterface
    public 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>