JSBridge

混合移动开发中 JS 与宿主通信的一种方式

安卓

public class WebAppInterface {    Context mContext;    /** Instantiate the interface and set the context */    WebAppInterface(Context c) {        mContext = c;    }    /** Show a toast from the web page */    @JavascriptInterface    public void showToast(String toast) {        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();    }}// 添加js接口 一个名为Android的全局对象webview.addJavascriptInterface(new WebAppInterface(this), "Android");

宿主调用js:

// 执行一段js脚本 可以获取到脚本的返回参数webView.evaluateJavascript("alert('hello world')", new ValueCallback<String>() {    @Override    public void onReceiveValue(String value) {    }});// 加载url的同时传递参数webView.loadUrl("schema://url?params");

if(typeof Android !== "undefined" && Android !== null) {    Android.showToast(toast);} else {    alert("Not viewing in webview");}

IOS

// name为唯一标识 postMessage方法会发送一条数据到宿主function postMessage(name, message) {    window.webkit.messageHandlers[name].postMessage(message);}

定义一个实现 WKScriptMessageHandler 协议的类

class DocImgBridge: NSObject, WKScriptMessageHandler {        let onImgClick: (String, String) -> ()        init(callback: @escaping (String, String) -> () = {_,_ in ()}) {        self.onImgClick = callback    }        // 这个方法在JS postMessage方法被调用后调用 会将message传递过来 在这里做具体的业务处理    public func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {        guard let body = message.body as? [String: Any] else { return }        debugPrint(body)        onImgClick(body["src"] as? String ?? "", body["name"] as? String ?? "")    }}

注册：

webview.configuration.userContentController.add(bridge, name: bridgeName)

宿主调用js:

webview.evaluateJavaScript("script", completionHandler: <#T##((Any?, Error?) -> Void)?##((Any?, Error?) -> Void)?##(Any?, Error?) -> Void#>)(<#T##javaScriptString: String##String#>)