流浪小猫的博客

Hybrid App & WebViewJavascriptBridge

· xcatliu

Hybrid App（混合模式移动应用）是指介于 Web App 和 Native App 这两者之间的 App，兼具「Native App 良好用户交互体验的优势」和「Web App 跨平台开发的优势」。

实现原理§

Hybrid App 的原理很简单——在原生应用中开启一个网页。可以是全屏都交给网页，或者是一部分（比如导航栏）由原生应用实现，另一部分是一个网页。

技术细节§

H5 页面的实现§

作为前端，对这块应该已经很熟悉了，与传统的网页不同，H5 页面需要注意以下几点：

以上问题可以带着关键字 Google 一下，一般均可以解决。

处理了以上的问题之后，一个简单的 H5 页面就可以实现出来了，接下来就是 WebView 和 Native 之间的交互。

WebView 和 Native 之间的交互§

与传统的网页不同，Hybrid 的优势在于 WebView 和 Native 之间可以交互。有如下几种成熟的解决方案：

自定义 scheme 可以理解为，定义一种 xxx 协议，把网页中链接的地址设置为 xxx://do.something，当点击这个链接的时候，则会被 Native 截获，优点是简单，缺点是单向的。

WebViewJavaScriptBridge 则是在 WebView 的全局环境（window）中注入一个 bridge 对象，js 中需要对它进行初始化，监听事件，这样就可以接收到 Native 中发出的事件。同时 Native 中也监听了事件，可以收到 WebView 中发出的事件。这样就实现了双向的通信。

WebViewJavaScriptBridge 的 iOS 实现

WebViewJavaScriptBeige 的 Android 实现

iOS 和 Android 端有各自的实现，不做介绍，只简单看看 JavaScript 端的实现：

function connectWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) {
        callback(WebViewJavascriptBridge)
    } else {
        document.addEventListener('WebViewJavascriptBridgeReady', function() {
            callback(WebViewJavascriptBridge)
        }, false)
    }
}

connectWebViewJavascriptBridge(function(bridge) {

    /* Init your app here */

    bridge.init(function(message, responseCallback) {
        alert('Received message: ' + message)
        if (responseCallback) {
            responseCallback("Right back atcha")
        }
    })
    bridge.send('Hello from the javascript')
    bridge.send('Please respond to this', function responseCallback(responseData) {
        console.log("Javascript got its response", responseData)
    })
})

代码很简单，自己看吧。

建议通过 bridge 实现的功能§

其他需要注意的问题§