Hybrid前端jsbridge設計原理分析

時下app分如下幾種技術選型

1. Webapp，框架有cordova，ionic等
2. Hybrid，即Native+h5方式
3. React Native, weex方向
4. 純Native，這個沒啥好說的
5. flutter，明日之星 本文只描述Hybrid中的jsbrige部分實現原理，不會涉及Native部分的webview如何設計，關於webview的文章太多了，能夠參考別的文章

通訊原理

預先定義好schema，如myapp://... 經過前端發送僞鏈接請求iframe.src

var iframe = document.createElement('iframe')
        iframe.style.display = 'none'
        iframe.src = schema
        var body = document.body
        body.appendChild(iframe)
        setTimeout(function () {
            body.removeChild(iframe)
            iframe = null
        })
複製代碼

能夠看到，在某個按鈕或者行爲須要與原生端通訊時建立一個iframe而後再移除，若是不移除iframe，則會在body裏出現大量無用的iframe標籤，這裏簡單說一下Native怎麼去攔截這個僞連接請求。 在WebviewClient裏override一個方法：

@Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if (url.startsWith(SCHEMA)) {
            ...
            return true;
        }
    }
複製代碼

參數傳遞

實際項目中，確定是要傳遞參數給Native接收的，能夠對這樣封裝

for (key in data) {
            if (data.hasOwnProperty(key)) {
                schema += '&' + key + data[key]
            }
        }
複製代碼

這樣就能夠拼接出&key=value這種形式，Native端能夠寫一個方法獲取到key和value的值而後去作相應的處理。

方法回調

有的時候bridge事件處理完以後須要告訴前端一些消息回饋，那麼前端須要封裝一個callbackName傳給Native端

var callbackName = ''
        if (typeof callback === 'string') {
            callbackName = callback
        } else {
            callbackName = action + Date.now()
            console.log('callbackName: ' + callbackName)
            window[callbackName] = callback
        }
        schema += 'callback=' + callbackName
複製代碼

特別注意：這裏有一個Date.now()，做用是爲了不回調方法重複，且避免在ios手機上不斷點擊形成界面阻塞UI失去響應。

Native端執行回調寫法：

public static void call(WebView webview, String js) {
        if (webview != null) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
                webview.evaluateJavascript(js, null);
            } else {
                webview.loadUrl("javacript:" + js);
            }
        }
    }
複製代碼

用法舉例

jsbrige封裝完畢後，能夠測試，以分享爲例：

window.bridge.share({
        title: '...',
        content: '...'
      }, function (result) {
        if (result.success) {
          alert('分享成功')
        }
      })
複製代碼

基於vue的封裝

只需載入brige.js便可

import './bridge'
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')
複製代碼

總結

1. 在ios上不要使用UIWebview，使用WkWebview。
2. android要注意webview內存泄漏問題。
3. 前端要控制打包體積，不推薦用webpack，由於會生成大量的webpack的封裝代碼。
4. 推薦使用rollup輕量級前端工程化打包，不會生成多餘的js代碼。
5. 推薦使用多頁模式，Native端經過pushwindow等方法，把跳轉權交給Native端。