Skip to content

Latest commit

 

History

History
282 lines (182 loc) · 8.39 KB

hybrid-app.md

File metadata and controls

282 lines (182 loc) · 8.39 KB
Raw

混合 App

Web 与 原生交互

通过 JS 与原生交互

缺点

  • 同步，会阻塞线程

iOS

UIWebView JS 调 OC

  • UIWebView JavaScriptCore

OC 调 UIWebView JS

  • stringByEvaluatingJavaScriptFromString

WKWebview JS 调 OC

原生注册 方法

WKUserContentController *userContentController = [WKUserContentController new];
[userContentController addScriptMessageHandler:self name:<name>];

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.userContentController = userContentController;

WKWebView *webView = [[WKWebView alloc] initWithFrame:self.bounds configuration:config];

JS 往 方法发送数据 

window.webkit.messageHandlers.<name>.postMessage(<messageBody>)

允许的类型 number string date array object null

OC 调 WKWebview JS

  • [_webView evaluateJavaScript:source completionHandler:nil];
  • callWithArguments

Android

  • 4.2 以下 addJavascriptInterface 有安全隐患

参考

WebView JS 调原生

原生注册方法

webview.addJavascriptInterface(new JSKit(),"__context__");

public class JSKit {
    // 定义JS需要调用的方法，被JS调用的方法必须加入@JavascriptInterface注解
    @JavascriptInterface
    public void hello(String msg) {
        System.out.println("JS成功调用了Android的hello方法");
    }
}

JS 调用原生方法

window.__context__.hello('msg');

第三方实现

JsBridge 和 WebViewJavascriptBridge 实现的原理:

  • Web > 原生： 原生监听 URL > Web 请求对应 URL，并定义唯一ID，监听对应ID的响应 > 原生收到 URL 后，做相应响应发起对应唯一ID的 URL 请求 > Web 响应回调
  • 原生 > Web: Web 监听 URL > 原生 请求对应 URL，并定义唯一ID，监听对应ID的响应 > Web 收到请求后，做相应响应发起对应唯一ID的 URL 回调 > 原生 响应回调

通过 URL 与原生交互

优点

  • 相比 JS 调 原生，全平台统一
  • 无回调，没有阻塞线程问题

缺点

  • 只适用于 Web 调 原生
  • 所有跳转都会判断是否满足要求
  • 不支持链接会 404
  • 没有回调

Android

在该方法替换返回数据

@Override publicboolean shouldOverrideUrlLoading(WebView view,String
 url)

iOS UIWebView

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

iOS WKWebView

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;

通过 XHR/Ajax 与原生交互

  • 最好用自定义 scheme 的方式处理

优点

  • 相比 URL 会引起页面刷新
  • 相比 URL 有回调
  • 相比 JS 异步、接口统一

缺点

  • 只适用于 Web 调 原生

Android

没有办法再shouldOverrinding中拦截并用webView.loadUrl(String url,HashMap headers)方法添加请求头

一个临时的办法解决： 首先需要在url中加特殊标记/协议, 如在onWebViewResource方法中拦截对应的请求，然后将要添加的请求头，以get形式拼接到url末尾 在shouldInterceptRequest()方法中,可以拦截到所有的网页中资源请求，比如加载JS，图片以及Ajax请求等等

References

iOS

使用 NSURLProtocol 实现

参考

References

Cordova

使用方法

  1. Cross-platform(CLI) workflow : CLI是一个High-Level的工具，可以允许你在多个平台上只建立一次工程。
  2. Platform-centered workflow : 以Native为中心，使用WebView的形式嵌入。

UI 库

使用基于 VUE 的 UI 库

可以结合一起用，取长补短

使用 基于 AngularJS 的 UI 库

存储

数据少时用 localstorage，数据多时用 SQLite

热更新

这种方式热更新不会被苹果拒

第三方引擎

iOS

  • 苹果不让用

Android

4.4 以下 WebView 用的 WebKit 内核，性能很差

基于chrome webkit的crosswalk WebView

性能最好，但是太大

X5内核的WebView

不过我建议使用腾讯的X5内核，我项目目前在使用，腾讯浏览服务，你不用把整个内核集成到你的APP去，而是如果你的手机有安装手机QQ或者微信，它就会自行调用他们的内核，另外现在还提供下载内核的功能。项目使用以来没有出现什么大问题，平稳使用中。

18.请问下x5中js调用android怎么实现？

跟系统内核下一样，都借助 addjavainterface 实现

References

Other

References