目標(biāo)
實(shí)現(xiàn)Native與JS頁面的相互調(diào)用
- JS從Native調(diào)取Token
- JS調(diào)取Native跳轉(zhuǎn)
- Native調(diào)取當(dāng)前JS里的消息信息、用戶信息等
- JS掉起Native支付頁面，Native支付完成（失斊芤伞）后回調(diào)給JS
實(shí)現(xiàn)框架 （Android 官辽、iOS铸题、JS）
android參考：https://github.com/lzyzsd/JsBridge耘拇、https://github.com/hjhrq1991/JsBridge
iOS參考：https://github.com/LOVEGLXR/WebNewsJSBridgeOC
JS接入方法：參考android或iOS的任何一個(gè)即可
示例代碼<支付>
H5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui">
<title></title>
</head>
<script type="text/javascript" src="/res/common/js/jquery.js"></script>
<p>
<input type="button" id="enter" value="調(diào)起支付" onclick="click1();"
/>
</p>
<br/>
<script>
// 聲明初始化JSBridge失敗數(shù)據(jù)
var default_data = {
error: "1"
};
//聲明 connect_JSBridge
var connectMerchantJSBridge = function (callback) {
try {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge);
} else {
document.addEventListener("TestJavascriptBridgeReady", function () {
callback(WebViewJavascriptBridge);
}, false);
}
} catch (ex) { }
};
//聲明 cmb_JSBridge
var cmbMerchantBridge = {
initSignNet: function (payData,name) {
if (!payData) {
payData = default_data;
}
connectMerchantJSBridge(function (bridge) {
if (typeof bridge === "undefined") {
return;
}
bridge.callHandler(name, JSON.stringify(payData));
});
},
};
//注冊(cè)調(diào)用本頁面方法
connectMerchantJSBridge(function(bridge) {
bridge.init(function(message, responseCallback) {
});
//支付成功回調(diào)
bridge.registerHandler("onPaySuccess", function(data, responseCallback) {
console.log(data)
});
//支付失敗回調(diào)
bridge.registerHandler("onPayFail", function(data, responseCallback) {
console.log(data)
});
})
//注冊(cè)調(diào)起支付
window.cmbMerchantBridge = cmbMerchantBridge;
function click1()
{
try {
cmbMerchantBridge.initSignNet("ercode", "requestPay");
} catch (ex) { }
}
</script>
</body>
</html>
Android
1.根據(jù) 橋名稱 TJJavascriptBridge 注冊(cè) JsBridge
webView.setDefaultHandler(new DefaultHandler());
webView.setCustom("TJJavascriptBridge");
2.注冊(cè)JS調(diào)用Native的方法：requestPay
webView.registerHandler("requestPay", (data, function) -> {
//跳轉(zhuǎn)到支付頁面
});
3.支付完成（或失斈谰 ）后回調(diào)JS
//微信支付成功通過EventBus回調(diào)
@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 并注冊(cè)到 UIWebview
@property WebViewJavascriptBridge* bridge;
[WebViewJavascriptBridge enableLogging];
_bridge = [WebViewJavascriptBridge bridgeForWebView:_mWebView webViewDelegate:self handler:nil];
2.注冊(cè)JS調(diào)用Native的方法：requestPay
[_bridge registerHandler:@"requestPay" handler:^(id data, WVJBResponseCallback responseCallback) {
//跳轉(zhuǎn)到支付頁面
}];
3.支付完成（或失敗）后回調(diào)JS
- (void) onPaySuccess{
[_bridge callHandler:@"onPaySuccess"];
}
- (void) onPayFail{
[_bridge callHandler:@"onPayFail" data:@"失敗原因:***"];
}
【關(guān)注公眾號(hào) 發(fā)現(xiàn)更多精彩】
