author: @TiffanysBear
背景
随着 web 技术的发展和移动互联网的发展, Hybrid 技术已经成为一种前端开发的主流技术方案. 那什么是 Hybrid App 呢?
Hybrid App(混合模式移动应用) 是指介于 Web-App,native-App 这两者之间的 App, 兼具 "Native App 良好用户交互体验的优势" 和 "Web App 跨平台开发的优势".
总的来说, 就是既具有 App 的体验和性能, 又具有 Web 灵活的开发模式和跨平台开发能力.
现有的技术方案
1,H5 + JSBridge, 通过 JSBridge 完成 H5 和 Native 的通信, 赋予 H5 一定的端能力. 是一种基于 WebView UI 的解决方案.
2,React-Native, 进一步通过 JSbridge 将 JS 解析为虚拟 DOM 传递到 Native, 并使用原生进行渲染.
3, 小程序解决方案, 采用双线程的渲染机制, 将渲染层 WebView 和逻辑层 JavaScriptCore 形成独立的模块, 通过 Native 进行通信 (setData), 逻辑层的网络请求也会由 Native 进行转发. 在 UI 方面, 采用的是 WebView 和原生相结合的方式.
技术原理
本文将从 jsbridge 的原理, 实现, 双向通信, 接入方式和 H5 的嵌入方式进行详细阐述.
jsbridge 的原理
客户端能对 WebView 中请求进行拦截, 都有相应的 API:
- Android:
- // 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 = Windows.Bdbox_android_jsbridge;
- if (androidJsBridge && androidJsBridge.dispatch) {
- androidJsBridge.dispatch(scheme);
- } else {
- var re = Windows.prompt('BdboxApp:' + JSON.stringify({
- obj: 'Bdbox_android_jsbridge',
- func: 'dispatch',
- args: [scheme]
- }));
- return re;
- }
- }
协议制定 URL Scheme
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 通知 Native 的方式主要有:
调用 prompt/console/alert, 调用时进行参数传递, 端进行拦截重写
URL Scheme 跳转拦截, 将参数放在请求 URL 上, 详细的文章介绍 URL Scheme
API 挂载, 通过 Navtive 获取 JS 执行环境, 将相应的 API 挂载在 JS 上, 供 h5 调用
Native 通知 H5:
回调机制, 在向 Native 传递信息时, 将回调函数也传递, Native 在调用完成后, 使用 JS 执行环境执行回调函数
接入方式
jsbridge 的接入, 端方面的 jsbridge 和 h5 方面的 jsbridge
嵌入方式
h5 的嵌入方式:
直接代码, 直接将 H5 代码 CSS,html,JS 放入端目录下, 以 file 协议的方式访问, 优点是访问快速, 缺点是迭代不方便.
线上地址, 以 http 协议访问, 使用 webview 打开 url 形式, 相较于代码嵌入的方式来说, 速度比较慢, 依赖网络传输速度; 优点是迭代快速
来源: http://www.jianshu.com/p/4f8fa29a3d76