探究Hybrid-APP技术原理
author: @TiffanysBearjavascript
随着Web技术的发展和移动互联网的发展，Hybrid技术已经成为一种前端开发的主流技术方案。那什么是Hybrid App呢？css
Hybrid App（混合模式移动应用）是指介于web-app、native-app这二者之间的app，兼具" Native App良好用户交互体验的优点 "和" Web App跨平台开发的优点 "。html
总的来讲，就是既具备APP的体验和性能，又具备Web灵活的开发模式和跨平台开发能力。前端
一、H5 + JSBridge，经过JSBridge完成H5和Native的通讯，赋予H5必定的端能力。是一种基于WebView UI的解决方案。java
二、React-Native，进一步经过JSbridge将js解析为虚拟DOM传递到Native，并使用原生进行渲染。android
三、小程序解决方案，采用双线程的渲染机制，将渲染层WebView和逻辑层JavaScriptCore造成独立的模块，经过Native进行通讯（setData），逻辑层的网络请求也会由Native进行转发。在UI方面，采用的是WebView和原生相结合的方式。ios
本文将从jsbridge的原理、实现、双向通讯、接入方式和H5的嵌入方式进行详细阐述。git
客户端能对WebView中请求进行拦截，都有相应的API：github
Android:web
// Android: shouldoverrideurlloading
public boolean shouldOverrideUrlLoading(WebView view, String url){
//读取到url后自行进行分析处理
//若是返回false，则WebView处理连接url，若是返回true，表明WebView根据程序来执行url
return true;
}
IOS:
// IOS: shouldStartLoadWithRequest
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
NSURL *url = [request URL];
NSString *requestString = [[request URL] absoluteString];
//获取url scheme后自行进行处理
所以，在页面中能够经过iframe加载src的方式触发相应的捕获函数，在捕获函数中能够对url中的参数进行解析；此外，Android还能够经过重写OnJSPrompt方法，对调用Prompt进行拦截，一样能实现通讯的目的。
示例：
调起ios端：
function iosInvoke(scheme) {
var elem = document.createElement('iframe');
var body = document.body || document.getElementsByTagName('body')[0];
elem.style.display = 'none';
elem.src = scheme;
body.appendChild(elem);
setTimeout(function () {
body.removeChild(elem);
elem = null;
}, 0);
}
调起android端：
function androidInvoke(scheme) {
var androidJsBridge = window.Bdbox_android_jsbridge;
if (androidJsBridge && androidJsBridge.dispatch) {
androidJsBridge.dispatch(scheme);
} else {
var re = window.prompt('BdboxApp:' + JSON.stringify({
obj: 'Bdbox_android_jsbridge',
func: 'dispatch',
args: [scheme]
}));
return re;
}
}
URL Scheme是什么
因为苹果的app都是在沙盒中，相互是不能访问数据的。可是苹果仍是给出了一个能够在app之间跳转的方法：URL Scheme。简单的说，URL Scheme就是一个可让app相互之间能够跳转的协议。每一个app的URL Scheme都是不同的，若是存在同样的URL Scheme，那么系统就会响应先安装那个app的URL Scheme，由于后安装的app的URL Scheme被覆盖掉了，是不能被调用的。
设置URL Scheme
xxxapp://communication?args=xx
双向通讯主要是H5和Native的双向通讯过程以及参数传递、回调执行。
H5通知Native的方式主要有：
h5的嵌入方式: