H5 與 APP 交互!

目前，原生的 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 結尾。具體的你們能夠去研究研究。

接下來，重點來了！！

一、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 註冊的具體的監聽消息的方法

這裏的調用是必選傳參。

二、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
    };
複製代碼

注意：

• 一、H5 定義 APP 調用的方法必須是在 window 全局下的，不然 APP 調用不到
• 二、這裏 H5 接受的參數必須和 APP 那邊調用傳遞的參數一一對應。

具體的 demo 地址能夠查看 https://github.com/littleLane/cross_ios_h5

H5 與 Android 交互

一、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 的了，雖然看上去很簡單，可是其中有幾個須要注意的點：

• 一、window 後面接的方法必須是 APP 定義好的監聽方法，這裏爲 postMessage

• 二、監聽方法 postMessage 後面接的是具體邏輯調用的方法，這裏分別是 zrbCallUpload 和 zrbLogin

• 三、這裏的傳參必須和 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 代碼，形如上面的代碼。