前言
现在流行Hybrid App,即混合开发,也就是半原生半Web的开发模式,有跨平台运行效果,当然了,实质最终发布的仍然是独立的原生APP(各种的平台有各种的SDK),但是相比原生APP,性能仍然有较大的损耗,不适合交互性强或者性能要求较高的APP(比如动画较多的),JSBridge是H5与Native通信的桥梁
现有的库:https://github.com/marcuswestin/WebViewJavascriptBridge
流程:
1. 上图的 url scheme是一种类似于url的链接,是为了方便app直接互相调用设计的
2. 具体为可以用系统的OpenURI打开一个类似于url的链接(可拼入参数),然后系统会进行判断,如果是系统的url scheme,则打开系统应用,否则找看是否有app注册这种scheme,打开对应app,需要注意的是,这种scheme必须原生app注册后才会生效,如微信的scheme为(weixin://)
3. 而本文JSBridge中的url scheme则是仿照上述的形式的一种方式
4. 具体为,app不会注册对应的scheme,而是由前端页面通过某种方式触发scheme(如用iframe.src),然后Native用某种方法捕获对应的url触发事件,然后拿到当前的触发url,根据定义好的协议,分析当前触发了那种方法,然后根据定义来执行等
现在简单介绍JsBridge基本用法,把下面的代码copy到你的js中就可以了:
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
//和ios通信的方法
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'https://__bridge_loaded__'; // 自定义url
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() {
document.documentElement.removeChild(WVJBIframe);
}, 0)
//和Android通信的方法
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener( 'WebViewJavascriptBridgeReady' , function() {
callback(WebViewJavascriptBridge) }, false );
});
}
}
setupWebViewJavascriptBridge(function(bridge) {
//注册一个方法(方法名是“a”),客户端进行调用(方法名也是“a”),responseCallback是回调函数
bridge.registerHandler('a', function(data, responseCallback) {
console.log("a called with:", data);
responseCallback(data);
//可以写自己想要的代码 。。。。。
})
//客户端已经注册好一个名为“b”的方法,H5直接进行调用(方法名也为“b”)就行,调用的时候可以传客户端需要的参数
bridge.callHandler('b', {'key':'value'}, function responseCallback(responseData) {
console.log("JS received response:", responseData) })
})