【实践】客户端JSBridge实现文档

目标

实现Native与JS页面的相互调用

• JS从Native调取Token
• JS调取Native跳转
• Native调取当前JS里的消息信息、用户信息等
• JS掉起Native支付页面，Native支付完成（失败）后回调给JS

实现框架 （Android 、iOS、JS）

android参考：https://github.com/lzyzsd/JsBridge、https://github.com/hjhrq1991/JsBridge

iOS参考：https://github.com/LOVEGLXR/WebNewsJSBridgeOC

JS接入方法：参考android或iOS的任何一个即可

示例代码<支付>

H5

Android

1.根据 桥名称 TJJavascriptBridge 注册 JsBridge

webView.setDefaultHandler(new DefaultHandler()); 

webView.setCustom("TJJavascriptBridge");

2.注册JS调用Native的方法：requestPay

webView.registerHandler("requestPay", (data, function) -> { 

    //跳转到支付页面

});

3.支付完成（或失败）后回调JS

//微信支付成功通过EventBus回调 

@Subscribe(threadMode = ThreadMode.MAIN) 

public void onPayEvent(PayEvent event) { 

if (event.isSuccess) { 

webView.callHandler("onPaySuccess", "", data -> { 

}); 

} else { 

webView.callHandler("onPayFail", event.failurReason, data -> { 

}); 

} 

}

iOS

1.引入 WebViewJavascriptBridge 并注册到 UIWebview

@property WebViewJavascriptBridge* bridge;

[WebViewJavascriptBridge enableLogging];

_bridge = [WebViewJavascriptBridge bridgeForWebView:_mWebView webViewDelegate:self handler:nil];

2.注册JS调用Native的方法：requestPay

[_bridge registerHandler:@"requestPay" handler:^(id data, WVJBResponseCallback responseCallback) {

        //跳转到支付页面

 }];

3.支付完成（或失败）后回调JS

- (void) onPaySuccess{

    [_bridge callHandler:@"onPaySuccess"];

}

- (void) onPayFail{

    [_bridge callHandler:@"onPayFail" data:@"失败原因:***"];

}

---

【关注公众号 发现更多精彩】