H5 與 APP 互動!

littleLane發表於2018-04-04
H5APP

目前，原生的 APP 主要分為 IOS 和 Android 兩大類。 IOS 沒什麼好說的，美國蘋果公司獨家打造的作業系統，用以抗衡 Google 公司出的 Android 作業系統。其他什麼小米出的 MIUI 、錘子出的 Smartisan OS 等等一些都是基礎 Android 改造的，也就是說底層還是 Android。

當然，現在前端火起來了，隨之而來的就是 H5 和 APP 互動越來越頻繁了，H5 要呼叫 APP 原生方法該怎麼操作了，APP 要調起 H5 方法又該怎麼操作呢？接下來，我們會一一講解！

H5 與 IOS 互動

申明：由於本人也不是做 IOS APP 開發的，所以只能是諮詢這邊 IOS APP 開發的同學，有錯誤的地方還希望大家指出。

由於這邊的 IOS APP 開發用的是 ReactiveCocoa 。那 ReactiveCocoa 到底是什麼呢？做 IOS APP 開發的同學應該不會陌生吧，它是由Github開源的一個應用於 IOS 和 OS 開發的新框架, Cocoa 是蘋果整套框架的簡稱，因此很多蘋果框架喜歡以 Cocoa 結尾。具體的大家可以去研究研究。

接下來，重點來了！！

1、H5 調 APP

IOS APP
 /*! @abstract Adds a script message handler.
     @param scriptMessageHandler The message handler to add.
     @param name The name of the message handler.
     @discussion Adding a scriptMessageHandler adds a function
     window.webkit.messageHandlers.<name>.postMessage(<messageBody>) for all
     frames.
    */
    open func add(_ scriptMessageHandler: WKScriptMessageHandler, name: String)
複製程式碼

這段程式碼大致的意思是：新增一個訊息指令碼處理方法，傳遞的第一個引數是新增的訊息處理方法，第二個引數是新增的訊息處理的名稱。

private (set) lazy var  webView: WKWebView = {
    //初始化一個 WKWebViewConfiguration
    let configuretion = WKWebViewConfiguration()
    configuretion.preferences = WKPreferences()
    configuretion.preferences.javaScriptEnabled = true
    configuretion.preferences.javaScriptCanOpenWindowsAutomatically = false
    
    //在 configuretion.userContentController 註冊訊息處理方法
    configuretion.userContentController = WKUserContentController()
    
    //註冊uploadImage方法
    configuretion.userContentController.add(self, name: MessageHandlerName.uploadImage.rawValue)
    
    //註冊login方法
    configuretion.userContentController.add(self, name: MessageHandlerName.login.rawValue)
    
     //註冊home方法
    configuretion.userContentController.add(self, name: MessageHandlerName.home.rawValue)
    
    //初始化一個 WKWebView 並將配置引數傳入
    let view = WKWebView.init(frame: .zero, configuration: configuretion)

    return view
}()
複製程式碼
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    let name = MessageHandlerName.init(rawValue: message.name)
    
    switch name {
    case .uploadImage?:
        //通過 message.body 獲取 h5 傳遞的引數
        if let uploadType = message.body as? String {
            imageType = uploadType
        }
        
        // do your something
    case .login?:
        // do your something
    case .home?:
        // do your something
    default:
        break
    }
    
}
複製程式碼
H5
window.webkit.messageHandlers.zrbCallUpload.postMessage(this.type)
window.webkit.messageHandlers.login.postMessage(true)
window.webkit.messageHandlers.home.postMessage(true)
複製程式碼

window.webkit.messageHandlers APP 環境下注冊的訊息處理模組

zrbCallUpload APP 註冊的具體的監聽訊息的方法

這裡的呼叫是必選傳參。

2、APP 調 H5

APP 調起 H5 方法最主要的一點是拼接回傳的引數。

APP
let js = "callUploadHtml(\(JSONString!), \"\(self.imageType!)\")"
self.webView.evaluateJavaScript(js, completionHandler: { (_, _) in
                    
})
複製程式碼

注意：這裡傳遞字串時，必須要用引號引起來，否則會呼叫失敗。

H5
    window.callUploadHtml = function(dataObj, uploadType){
        //do your something
    };
複製程式碼

注意：

  • 1、H5 定義 APP 呼叫的方法必須是在 window 全域性下的，否則 APP 呼叫不到
  • 2、這裡 H5 接受的引數必須和 APP 那邊呼叫傳遞的引數一一對應。

具體的 demo 地址可以檢視 https://github.com/littleLane/cross_ios_h5

H5 與 Android 互動

1、H5 調 APP

APP
    webView = (WebView) findViewById(R.id.web_H5Activity);
    progressBar = (ProgressBar) findViewById(R.id.progressBar_h5show);

    WebSettings settings = webView.getSettings();
    settings.setJavaScriptEnabled(true);
    webView.addJavascriptInterface(new JavaScriptObject(), "postMessage");
複製程式碼

APP 端設定的程式碼大致就是這樣，獲取 webView 然後設定 setJavaScriptEnabled 為 true ，並新增 addJavascriptInterface 監聽，設定全域性的 JavaScript 方法處理 postMessage 。

接下來，定義一個 JavaScriptObject 類，並在該類裡面新增你要處理 JavaScript 呼叫的方法，例項如下：

class JavaScriptObject {
    @JavascriptInterface//上傳頭像
    public void zrbCallUpload(String paramer, String returnFun) {
        //do your something
    }
    
    @JavascriptInterface//登入
    public void zrbLogin(Object paramer) { // TODO: 2018/1/11
        //do your something
    }
    
    ....
}
複製程式碼

到這裡 APP 的事情已經做完了，下面就看前端怎麼處理了！

H5
window.postMessage.zrbCallUpload(param1, param2);
window.postMessage.zrbLogin(param1);
複製程式碼

上面的兩行程式碼就是 H5 調 APP 的了，雖然看上去很簡單，但是其中有幾個需要注意的點：

  • 1、window 後面接的方法必須是 APP 定義好的監聽方法，這裡為 postMessage

  • 2、監聽方法 postMessage 後面接的是具體邏輯呼叫的方法，這裡分別是 zrbCallUpload 和 zrbLogin

  • 3、這裡的傳參必須和 APP 那邊確定好，和 APP 那邊保持一致性，無論是引數的個數還是引數的型別。（最好這樣，否者鬼知道會出什麼問題）

APP 調 H5

H5

在 H5 這邊事先要在全域性 window 上定義好 APP 要回撥的方法。

window.callUploadBack = function(params){
    // do your something
}
複製程式碼

這裡的函式名要和 APP 呼叫的一致，其中傳遞的引數也要保持一致性，無論是引數的個數還是引數的型別。（最好這樣，否者鬼知道會出什麼問題）

APP
String js = "javascript:" + returnFun + "(" + params + ");";

webView.loadUrl(js);
複製程式碼

  • returnFun 呼叫的函式名稱

  • params 回傳的引數

這裡一般是這樣處理的，在 H5 呼叫 APP 方法時就把需要 APP 回撥的方法傳到 APP，如果不需要 APP 回撥那就不需要傳了。然後，APP 根據這個引數來拼接要回撥 H5 的 JavaScript 程式碼，形如上面的程式碼。

相關文章