1. 混合 App
Web 与 原生交互
1.1. 通过 JS 与原生交互
1.1.1. 缺点
- 同步，会阻塞线程
1.1.2. UIWebView JS 调 OC
- UIWebView JavaScriptCore
1.1.3. OC 调 UIWebView JS
- stringByEvaluatingJavaScriptFromString
1.1.4. WKWebview JS 调 OC
window.webkit.messageHandlers.<name>.postMessage(<messageBody>)
1.1.5. OC 调 WKWebview JS
[_webView evaluateJavaScript:source completionHandler:nil];- callWithArguments
1.1.6. Android
- 4.2 以下 addJavascriptInterface 有安全隐患
参考
1.1.7. 第三方实现
Android JsBridge 自定义
window.WebViewJavascriptBridge方式实现iOS WebViewJavascriptBridge iframe 中
https://__bridge_loaded__实现
JsBridge 和 WebViewJavascriptBridge 实现的原理:
- Web > 原生：
原生监听 URL > Web 请求对应 URL，并定义唯一ID，监听对应ID的响应 > 原生收到 URL 后，做相应响应发起对应唯一ID的 URL 请求 > Web 响应回调 - 原生 > Web:
Web 监听 URL > 原生 请求对应 URL，并定义唯一ID，监听对应ID的响应 > Web 收到请求后，做相应响应发起对应唯一ID的 URL 回调 > 原生 响应回调
1.2. 通过 URL 与原生交互
1.2.1. 优点
- 相比 JS 调 原生，全平台统一
- 无回调，没有阻塞线程问题
1.2.2. 缺点
- 只适用于 Web 调 原生
- 所有跳转都会判断是否满足要求
- 不支持链接会 404
- 没有回调
1.2.3. Android
在该方法替换返回数据
@Override publicboolean shouldOverrideUrlLoading(WebView view,String
url)
1.2.4. iOS UIWebView
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
1.2.5. iOS WKWebView
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;
1.3. 通过 XHR/Ajax 与原生交互
- 最好用自定义 scheme 的方式处理
1.3.1. 优点
- 相比 URL 会引起页面刷新
- 相比 URL 有回调
- 相比 JS 异步、接口统一
1.3.2. 缺点
- 只适用于 Web 调 原生
1.3.3. Android
没有办法再shouldOverrinding中拦截并用webView.loadUrl(String url,HashMap headers)方法添加请求头
一个临时的办法解决：
首先需要在url中加特殊标记/协议, 如在onWebViewResource方法中拦截对应的请求，然后将要添加的请求头，以get形式拼接到url末尾
在shouldInterceptRequest()方法中,可以拦截到所有的网页中资源请求，比如加载JS，图片以及Ajax请求等等
References
1.3.4. iOS
使用 NSURLProtocol 实现
参考
1.3.5. References
1.4. Cordova
1.4.1. 使用方法
- Cross-platform(CLI) workflow : CLI是一个High-Level的工具，可以允许你在多个平台上只建立一次工程。
- Platform-centered workflow : 以Native为中心，使用WebView的形式嵌入。
1.4.2. UI 库
使用基于 VUE 的 UI 库
可以结合一起用，取长补短
使用 基于 AngularJS 的 UI 库
1.4.3. 存储
数据少时用 localstorage，数据多时用 SQLite
1.4.4. 热更新
- cordova-hot-code-push 热更新插件
- ordova-hot-code-push-cli cordova-hot-code-push 命令行工具, 热更新服务器
- cordova-app-loader 热更新插件-只更新修改部分
这种方式热更新不会被苹果拒
1.5. 第三方引擎
1.5.1. iOS
- 苹果不让用
1.5.2. Android
4.4 以下 WebView 用的 WebKit 内核，性能很差
基于chrome webkit的crosswalk WebView
性能最好，但是太大
X5内核的WebView
不过我建议使用腾讯的X5内核，我项目目前在使用，腾讯浏览服务，你不用把整个内核集成到你的APP去，而是如果你的手机有安装手机QQ或者微信，它就会自行调用他们的内核，另外现在还提供下载内核的功能。项目使用以来没有出现什么大问题，平稳使用中。
18.请问下x5中js调用android怎么实现？
跟系统内核下一样，都借助 addjavainterface 实现