跨平台解决方案-JsBrdge
H5应用或Hybrid应用是是我们实现跨端开发比较常用的实现方式 ，它的原理基于H5技术，通过WebView渲染UI,通过JsBrdege和原生进行交互。
双向通信的通道
-
JS向Native发送消息：调用Native功能、通知Native 当前 Js 的相关状态
-
Native向JS发送消息：回溯调用结果、消息推送、通知 JS 当前 Native 的状态等
JSBridge 的实现原理
JSBridge 要实现的主要逻辑就出现了：通信调用（Native 与 JS 通信） 和句柄解析调用。
JSBridge 的通信原理
1、 JavaScript 调用 Native的方式
- 注入API
- 拦截URL Scheme
1.1 注入API
注入 API 方式的主要原理是，通过 WebView 提供的接口，向 JavaScript 的 Context（window）中注入对象或者方法，让 JavaScript 调用时，直接执行相应的 Native 代码逻辑，达到 JavaScript 调用 Native 的目的。
- 对于 iOS 的 WKWebView 可以用以下方式
@interface WKWebVIewVC ()<WKScriptMessageHandler>
@implementation WKWebVIewVC
- (void)viewDidLoad {
[super viewDidLoad];
WKWebViewConfiguration* configuration = [[WKWebViewConfiguration alloc] init];
configuration.userContentController = [[WKUserContentController alloc] init];
WKUserContentController *userCC = configuration.userContentController;
// 注入对象，前端调用其方法时，Native 可以捕获到
[userCC addScriptMessageHandler:self name:@"nativeBridge"];
WKWebView wkWebView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];
// TODO 显示 WebView
}
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
if ([message.name isEqualToString:@"nativeBridge"]) {
NSLog(@"前端传递的数据 %@: ",message.body);
// Native 逻辑
}
}
// 前端调用方式：
window.webkit.messageHandlers.nativeBridge.postMessage(message);
- 对于Android
使用WebView 的 addJavascriptInterface 方法
public classJavaScriptInterfaceDemoActivityextendsActivity{
private WebView Wv;
@Override
publicvoidonCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
Wv = (WebView)findViewById(R.id.webView);
final JavaScriptInterface myJavaScriptInterface = new JavaScriptInterface(this);
Wv.getSettings().setJavaScriptEnabled(true);
Wv.addJavascriptInterface(myJavaScriptInterface, "nativeBridge");
// TODO 显示 WebView
}
publicclassJavaScriptInterface{
Context mContext;
JavaScriptInterface(Context c) {
mContext = c;
}
publicvoidpostMessage(String webMessage){
// Native 逻辑
}
}
}
1.2 拦截 URL SCHEME
-
SCHEME：URL SCHEME 是一种类似于url的链接，是为了方便app直接互相调用设计的，形式和普通的 url 近似
-
拦截 URL SCHEME 的主要流程是：Web 端通过某种方式（例如 iframe.src）发送 URL Scheme 请求，之后 Native 拦截到请求并根据 URL SCHEME（包括所带的参数）进行相关操作。 使用 iframe.src 发送 URL SCHEME 会有 url 长度的隐患。 因此：JavaScript 调用 Native 推荐使用注入 API 的方式
2、Native 调用 JavaScript 的方式
- Ios
[wkWebView evaluateJavaScript:javaScriptString completionHandler:completionHandler];
- Android
webView.loadUrl("javascript:" + javaScriptString)
或
webView.evaluateJavascript(javaScriptString, new ValueCallback<String>() {
@Override
publicvoidonReceiveValue(String value){}});
});
3、带回调的调用
我们在一端调用的时候在参数中加一个callbackId标记对应的回调，对端接收到调用请求后，进行实际操作，如果带有callbackId，对端再进行一次调用，将结果、callbackId回传回来，这端根据callbackId匹配相应的回调，将结果传入执行就可以了
