正文前的补充
在进行WebViewJavascriptBridge源码解析前，我们首先要了解iOS中两种web容器UIWebView, WKWebView,以及他们各自和JS的交互方式
UIWebView
UIWebView从iOS2 开始就作为App内展示Web内容的容器，但是长久以来一直遭受开发者的诟病；系统级的内存泄露、极高内存峰值、较差的稳定性、Touch Delay以及Javascript的运行性能及通信限制等等。在iOS12以后已经标记为Deprecated不再维护
UIWebView基本用法相信对于很多小伙们来说，用text文档都能写出来，这里也非本文的重点，这里重点说UIWebView与JS的交互方式
UIWebView OC调用JS
- 调用stringByEvaluatingJavaScriptFromString方法
这也是iOS开发早期最常用的方法，例如
self.navigationItem.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
虽然代码较为方便，但是有两个缺点
- 返回值单一，是string类型，如果返回其它数据类型，还要转换，不够灵活
- js报错和无返回值都返回nil，无法区分
- JavaScriptCore（iOS 7.0 +）
JavascriptCore 一直作为WebKit中内置的JS引擎使用，在iOS7之后，Apple对原有C/C++代码进行了OC封装，成为了系统级的framewok提供给开发者使用,在页面加载完成之后，我们可以通过[self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]KVC的方式拿到JS执行的上下文JSContext，然后通过当前JSContext执行evaluateScript方法，达到调用JS的目的，例如
//获取该UIWebView的javascript上下文
JSContext *jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//这也是一种获取标题的方法。
JSValue *value = [self.jsContext evaluateScript:@"document.title"];
//更新标题
self.navigationItem.title = value.toString;
注意这里的JSValue可以是JavaScript的Array、Number、String、对象等数据类型,该方法就解决了stringByEvaluatingJavaScriptFromString返回值单一的问题。
如果执行了一个不存在的方法， 例如
[self.jsContext evaluateScript:@"document.xxx"];
那么肯定会报错，可以通过JSContext上的exceptionHandler属性来捕获异常。
//在调用前，设置异常回调
[self.jsContext setExceptionHandler:^(JSContext *context, JSValue *exception){
NSLog(@"%@", exception);
}];
//执行方法
JSValue *value = [self.jsContext evaluateScript:@"document.xxx"];
该属性解决了stringByEvaluatingJavaScriptFromString调用js方法后出现错误，捕获不到的缺点
JS调用OC
1 通过设置 URL Scheme 的方式
(注) WebViewJavascriptBridge就是采用这种方式
比如在html文件中有一个a标签，a标签在前端开发中可以配置并跳转到一个新的链接，我们正是利用跳转时触发UIWebViewDelegate协议里的shouldStartLoadWithRequest方法进行拦截，示例如下
// H5
<a href="darkangel://smsLogin?username=12323123&code=892845">短信验证登录</a>
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
//标准的URL包含scheme、host、port、path、query、fragment等
NSURL *URL = request.URL;
if ([URL.scheme isEqualToString:@"darkangel"]) {
if ([URL.host isEqualToString:@"smsLogin"]) {
NSLog(@"短信验证码登录，参数为 %@", URL.query);
return NO;
}
}
return YES;
}
当点击按钮时，控制台就会打印出username=12323123&code=892845如果是复杂的参数，可以采用Json格式
JavaScriptCore（iOS 7.0 +）
第二种方式利用JavaScriptCore，还是需要页面加载完成，获取js上下文，然后进行方法映射代码示例如下
先定义一个分享的方法
function share(title, imgUrl, link) {
//这里需要OC实现
}
OC代码实现如下
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
//将js的function映射到OC的方法
[self convertJSFunctionsToOCMethods];
}
- (void)convertJSFunctionsToOCMethods
{
//获取该UIWebview的javascript上下文
//self持有jsContext
//@property (nonatomic, strong) JSContext *jsContext;
self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//js调用oc
//其中share就是js的方法名称，赋给是一个block 里面是oc代码
//此方法最终将打印出所有接收到的参数，js参数是不固定的
self.jsContext[@"share"] = ^() {
NSArray *args = [JSContext currentArguments];//获取到share里的所有参数
//args中的元素是JSValue，需要转成OC的对象
NSMutableArray *messages = [NSMutableArray array];
for (JSValue *obj in args) {
[messages addObject:[obj toObject]];
}
NSLog(@"点击分享js传回的参数：\n%@", messages);
};
}
上面的示例是同步，且无回调的，下面示例是异步接受回调，比如H5页面分享按钮，调用之后要从原生得到结果，分享成功还是失败
//声明
function share(shareData) {
var title = shareData.title;
var imgUrl = shareData.imgUrl;
var link = shareData.link;
var result = shareData.result;
//do something
//这里模拟异步操作
setTimeout(function(){
//2s之后，回调true分享成功
result(true);
}, 2000);
}
//调用的时候需要这么写
share({
title: "title",
imgUrl: "http://img.dd.com/xxx.png",
link: location.href,
result: function(res) { //函数作为参数
console.log(res ? "success" : "failure");
}
});
JS代码释义， 先定义一个share函数，在调用函数时启动一个延时2秒执行的方法此写法类似于OC的block
OC实现如下
//异步回调
self.jsContext[@"share"] = ^(JSValue *shareData) { //首先这里要注意，回调的参数不能直接写NSDictionary类型，为何呢？
//仔细看，打印出的确实是一个NSDictionary，但是result字段对应的不是block而是一个NSDictionary
NSLog(@"%@", [shareData toObject]);
//获取shareData对象的result属性，这个JSValue对应的其实是一个javascript的function。
JSValue *resultFunction = [shareData valueForProperty:@"result"];
//回调block，将js的function转换为OC的block
void (^result)(BOOL) = ^(BOOL isSuccess) {
[resultFunction callWithArguments:@[@(isSuccess)]];
};
//模拟异步回调
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
NSLog(@"回调分享成功");
result(YES);
});
};
此代码的执行结果是将在2s中打印一个sucess由js触发，3s中打印一个sucess由oc触发
WKWebView
在iOS8中，Apple引入了新一代的WebKit framework，同时提供了WKWebView用来替代传统的UIWebView。它更加的稳定、拥有60fps滚动刷新率、丰富的手势、KVO、高效的Web和Native通信，默认进度条等等功能，而最重要的，是使用了和safari相同的Nitro引擎极大提升了Javascript的运行速度。WKWebView独立的进程管理，也降低了内存占用及Crash对主App的影响。
OC -> JS
WKWebView提供一个类似于JavaScriptCore的方法
//执行一段js，并将结果返回，如果出错，error则不为空
- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id result, NSError * _Nullable error))completionHandler;
该方法很好的解决了UIWebVIew使用stringByEvaluatingJavaScriptFromString方法的两个缺点（1.返回值单一 2.报错无法捕获），例如想获取某页面的title
[self.webView evaluateJavaScript:@"document.title" completionHandler:^(id _Nullable title, NSError * _Nullable error) {
NSLog(@"调用evaluateJavaScript异步获取title：%@", title);
}];
JS -> OC
URL Scheme 拦截
这里与WebView的URL拦截方法一致，只是拦截的代理方法发生了变化例如
// js
<a href="darkangel://smsLogin?username=12323123&code=892845">短信验证登录</a>
//
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
//可以通过navigationAction.navigationType获取跳转类型，如新链接、后退等
NSURL *URL = navigationAction.request.URL;
//判断URL是否符合自定义的URL Scheme
if ([URL.scheme isEqualToString:@"darkangel"]) {
//根据不同的业务，来执行对应的操作，且获取参数
if ([URL.host isEqualToString:@"smsLogin"]) {
NSString *param = URL.query;
NSLog(@"短信验证码登录, 参数为%@", param);
decisionHandler(WKNavigationActionPolicyCancel);
return;
}
}
decisionHandler(WKNavigationActionPolicyAllow);
NSLog(@"%@", NSStringFromSelector(_cmd));
}
scriptMessageHandler
这是Apple在WebKit里新增加的方法，位于WKUserContentController.h。在此处只举例，不作详细介绍
[controller addScriptMessageHandler:self name:@"currentCookies"]; //这里self要遵循协 WKScriptMessageHandler
在js中调用下面的方法时
window.webkit.messageHandlers.currentCookies.postMessage(document.cookie);
在OC中将会收到WKScriptMessageHandler的回调
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
if ([message.name isEqualToString:@"currentCookies"]) {
NSString *cookiesStr = message.body; //message.body返回的是一个id类型的对象，所以可以支持很多种js的参数类型(js的function除外)
NSLog(@"当前的cookie为： %@", cookiesStr);
}
}
切记要在适当的地方调用 removeScriptMessageHandler
- (void)dealloc {
//记得移除
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"currentCookies"];
}
这样WKWebView就完成了一次完整的 JS->OC的交互
正文
在进行探讨前，先讲解两个代码中的小技巧
#define __wvjb_js_func__(x) #x 宏定义中#号的意思是将参数字符传化,例如
#define example1(instr) #instr
string str=example1(abc)； 将会展成：string str="abc"；
static NSString * preprocessorJSCode = @__wvjb_js_func__()等价于
static NSString * preprocessorJSCode = @""
在JS中;(function() {}函数前面跟一个一元表达式会立即执行后面的匿名函数等价于(function(){})()
在这篇文章中，我们将以QA的方式来探讨WebViewJavascriptBridge的原理及实现方式，某些代码可能需要一些JS基础，没有也没关系，我会尽量多的添加注释，让看过本篇文章的人有所收获，达到共同进步的目的
1. WebViewJavascriptBridge如何初始化，并注入JS代码
在iOS使用WebViewJavascriptBridge做桥接的时候，需要在前端引入如下代码
function setupWebViewJavascriptBridge(callback) {
// 如果window对象上有WebViewJavascriptBridge这个属性的话，会执行callback方法，并return
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
// 如果window上有WVJBCallbacks属性，会将callback（匿名函数）添加到WVJBCallbacks数组中并返回
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
// 为window 属性添加一个WVJBCallbacks属性
window.WVJBCallbacks = [callback];
// 创建一个iframe标签，并设置src
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
setupWebViewJavascriptBridge(function(bridge) {
/* Initialize your app here */
bridge.registerHandler('JS Echo', function(data, responseCallback) {
console.log("JS Echo called with:", data)
responseCallback(data)
})
bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
console.log("JS received response:", responseData)
})
})
上述代码的意思是， 定义一个setupWebViewJavascriptBridge函数， 然后调用这个函数，并传入一个匿名函数作为参数，在JS中，匿名函数作为参数，匿名函数并不会立即执行，而是在显式调用下才会执行，例如
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
初次调用setupWebViewJavascriptBridge，会创建一个WVJBCallbacks属性挂载到window对象上，因为WebViewJavascriptBridge这个属性在执行iframe标签之后才会被创建， 所以WVJBCallbacks的作用就是记录调用setupWebViewJavascriptBridge时的匿名函数参数，数组里就是这个东东
function(bridge) {
/* Initialize your app here */
bridge.registerHandler('JS Echo', function(data, responseCallback) {
console.log("JS Echo called with:", data)
responseCallback(data)
})
bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
console.log("JS received response:", responseData)
})
}
然后创建一个iframe标签，并设置src属性的值为https://__bridge_loaded__，此时会触发WebView代理方法
// 代码有删减
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
if (webView != _webView) { return; }
NSURL *url = navigationAction.request.URL;
__strong typeof(_webViewDelegate) strongDelegate = _webViewDelegate;
if ([_base isWebViewJavascriptBridgeURL:url]) {
if ([_base isBridgeLoadedURL:url]) {
[_base injectJavascriptFile];
} else if ([_base isQueueMessageURL:url]) {
[self WKFlushMessageQueue];
} else {
[_base logUnkownMessage:url];
}
decisionHandler(WKNavigationActionPolicyCancel);
return;
}
}
当URL包含__bridge_loaded__时，会执行WebViewJavascriptBridge_JS里的JS代码，生成WebViewJavascriptBridge属性，并挂载到window上，代码如下
window.WebViewJavascriptBridge = {
registerHandler: registerHandler,
callHandler: callHandler,
disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout,
_fetchQueue: _fetchQueue,
_handleMessageFromObjC: _handleMessageFromObjC
};
为了将存储在WVJBCallbacks里的函数注册到WebViewJavascriptBridge属性中，
WebViewJavascriptBridge_JS会开一个异步方法，遍历并执行WVJBCallbacks里的函数，并传入WebViewJavascriptBridge对象
setTimeout(_callWVJBCallbacks, 0);
function _callWVJBCallbacks() {
var callbacks = window.WVJBCallbacks;
delete window.WVJBCallbacks;
for (var i=0; i<callbacks.length; i++) {
callbacks[i](WebViewJavascriptBridge);
}
}
至此你应该明白，注册事件的函数虽然写在了前端页面的JS里，但实际上是在SDK里注册的。
_disableJavascriptAlertBoxSafetyTimeout不要轻易调用，如果调用这个方法，那么处理OC调用JS方法_dispatchMessageFromObjC里的处理逻辑就变成了同步执行，逻辑复杂的话容易发生阻塞。
2. JS怎么调用Native注册的函数，如何拿到返回值
JS调用OC是采用修改iframesrc属性的方式触发web代理方法，我们以github上的代码为例
bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
console.log("JS received response:", responseData)
})
先看callHandler方法的内部实现
function callHandler(handlerName, data, responseCallback) {
if (arguments.length == 2 && typeof data == 'function') {
responseCallback = data;
data = null;
}
_doSend({ handlerName:handlerName, data:data }, responseCallback);
}
此处会先对参数的长度作判断，假如参数长度等2， 并且data是一个function的话，会将data赋值给responseCallback，因为JS参数比较灵活，这样写是为了避免没有参数，但是有回调时发生错误
然后将 handlerName和data封装成一个对象，连同responseCallback一起传递给_doSened函数
function _doSend(message, responseCallback) {
if (responseCallback) {
var callbackId = 'cb_'+(uniqueId++)+'_'+new Date().getTime();
responseCallbacks[callbackId] = responseCallback;
message['callbackId'] = callbackId;
}
sendMessageQueue.push(message);
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
}
在_doSend函数里，会先判断有没有回调函数,如果有的话在利用时间戳和定义的无符整形生成一个callbackID，然后将回调函数以Key（callbackID） Value(responseCallback)的形式存入到responseCallbacks对象中，同时也将callbackId存入message对象，这么做的目的是为了函数的调用和回调能唯一对应。
将message对象插入到全局的数组sendMessageQueue中，更改iframe的src属性为https://__wvjb_queue_message__，此时又触发了web的代理方法，为了简化，我们只贴出关键代码部分
// 代码有改动
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
[self WKFlushMessageQueue];
}
- (void)WKFlushMessageQueue {
[_webView evaluateJavaScript:[_base webViewJavascriptFetchQueyCommand] completionHandler:^(NSString* result, NSError* error) {
if (error != nil) {
NSLog(@"WebViewJavascriptBridge: WARNING: Error when trying to fetch data from WKWebView: %@", error);
}
[_base flushMessageQueue:result];
}];
}
这里有一个比较精妙的思想，JS通过iframe通知Native我有代码调用，但是并没告我Native是触发的那个方法，需要Native自己主动去获取，就是下面这个方法
// oc
- (NSString *)webViewJavascriptFetchQueyCommand {
return @"WebViewJavascriptBridge._fetchQueue();";
}
// js
function _fetchQueue() {
var messageQueueString = JSON.stringify(sendMessageQueue);
sendMessageQueue = [];
return messageQueueString;
}
我们之前调用_doSend的时候将message放入到了sendMessageQueue中，在此处将它取出来，并将数组重新置空，来保证每次取值的唯一性
在此处客户端已经获取到了JS调用的事件名，以及参数，以及callbackID都在message对象中，下一步就是解析这个对象，也就是调用WebViewJavascriptBridgeBase里的flushMessageQueue函数
- (void)flushMessageQueue:(NSString *)messageQueueString{
// 代码有删减
// 先返序列化出messages 对象
id messages = [self _deserializeMessageJSON:messageQueueString];
for (WVJBMessage* message in messages) {
if (![message isKindOfClass:[WVJBMessage class]]) {
NSLog(@"WebViewJavascriptBridge: WARNING: Invalid %@ received: %@", [message class], message);
continue;
}
[self _log:@"RCVD" json:message];
NSString* responseId = message[@"responseId"];
if (responseId) {
// OC 调用 JS 时回调使用
WVJBResponseCallback responseCallback = _responseCallbacks[responseId];
responseCallback(message[@"responseData"]);
[self.responseCallbacks removeObjectForKey:responseId];
} else {
WVJBResponseCallback responseCallback = NULL;
NSString* callbackId = message[@"callbackId"];
if (callbackId) {
responseCallback = ^(id responseData) {
if (responseData == nil) {
responseData = [NSNull null];
}
WVJBMessage* msg = @{ @"responseId":callbackId, @"responseData":responseData };
[self _queueMessage:msg];
};
} else {
responseCallback = ^(id ignoreResponseData) {
// Do nothing
};
}
WVJBHandler handler = self.messageHandlers[message[@"handlerName"]];
if (!handler) {
NSLog(@"WVJBNoHandlerException, No handler for message from JS: %@", message);
continue;
}
handler(message[@"data"], responseCallback);
}
}
}
此处的代码逻辑分两部分 ， 一部分判断responseId，这是 OC调用JS有回调所要用到的，此处暂且不提，我们关心的是callbackId的判断逻辑
当没有callbackId时，证明没有回调，只需从本地messageHandlers取出对应的handler,也就是block，并执行就可以了
当有callbackId时， 在本地创建一个responseCallback，并将它当做参数传递到handler中，当handle代码执行完，之后会调用responseCallback，就会执行如下代码
responseCallback = ^(id responseData) {
if (responseData == nil) {
responseData = [NSNull null];
}
WVJBMessage* msg = @{ @"responseId":callbackId, @"responseData":responseData };
[self _queueMessage:msg];
}
在block内部会重建一个对象， 最终会调用WebViewJavascriptBridge的_handleMessageFromObjC属性，注意此处是在主线程进行
function _doDispatchMessageFromObjC() {
// 代码有删减
var message = JSON.parse(messageJSON);
var responseCallback;
if (message.responseId) {
responseCallback = responseCallbacks[message.responseId];
if (!responseCallback) {
return;
}
responseCallback(message.responseData);
delete responseCallbacks[message.responseId];
}
}
此处的代码逻辑与Native的flushMessageQueue方法相对应，用responseId从responseCallbacks取出之前存入的回调函数， 执行并将responseId当参数传递过去，然后从responseCallbacks对象中删除responseId
bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
至此我们就能在这里愉快的打印responseData
})
3. Native如何调用JS，并拿到返回值
Native调用JS相对简单，可以直接执行evaluateJavaScript在WKWebView中，但是拿到回调值却要复杂一些。示例
[weakSelf.bridge callHandler:@"jsCallBack" data:jsonParameter responseCallback:^(id responseData) {
}];
当Nativebridge调用callHandler时，会执行WebViewJavascriptBridgeBase类里的sendData方法
- (void)sendData:(id)data responseCallback:(WVJBResponseCallback)responseCallback handlerName:(NSString*)handlerName {
NSMutableDictionary* message = [NSMutableDictionary dictionary];
if (data) {
message[@"data"] = data;
}
if (responseCallback) {
NSString* callbackId = [NSString stringWithFormat:@"objc_cb_%ld", ++_uniqueId];
self.responseCallbacks[callbackId] = [responseCallback copy];
message[@"callbackId"] = callbackId;
}
if (handlerName) {
message[@"handlerName"] = handlerName;
}
[self _queueMessage:message];
}
这里与JS调用Native一样，同样是将参数和事件名封装成一个对象，然后生成一个callbackId，并将回调函数存入全局的responseCallbacks中
然后直接调用WebViewJavascriptBridge对象的_handleMessageFromObjC属性
function _doDispatchMessageFromObjC() {
// 代码有删减
var message = JSON.parse(messageJSON);
var messageHandler;
var responseCallback;
if (message.callbackId) {
var callbackResponseId = message.callbackId;
responseCallback = function(responseData) {
_doSend({ handlerName:message.handlerName, responseId:callbackResponseId, responseData:responseData });
};
}
var handler = messageHandlers[message.handlerName];
if (!handler) {
console.log("WebViewJavascriptBridge: WARNING: no handler for message from ObjC:", message);
} else {
handler(message.data, responseCallback);
}
}
}
同 JS调用Native一样， 如果没有callbackId，则直接从全局的messageHandlers对象中，取出函数执行，并传入message.data作为参数,此时 OC调用JS就达到了目的，但是还要考虑有回调函数的情况，也就是有callbackId
定义一个匿名函数，匿名函数内实现JS调用Native的_doSend方法，我们前面已经介绍过这个方法，将匿名函数当做参数传递给handler例如handler就是下面的JS Echo
bridge.registerHandler('JS Echo', function(data, responseCallback) {
console.log("JS Echo called with:", data)
responseCallback(data)
})
那么执行完responseCallback(data)就会将结果传递到
responseCallback = function(responseData) {
_doSend({ handlerName:message.handlerName, responseId:callbackResponseId, responseData:responseData });
};
}
responseCallback匿名函数中去，此时会执行一次JS调用OC的过程，最终会执行在WebViewJavascriptBridgeBase类里的flushMessageQueue方法里
- (void)flushMessageQueue:(NSString *)messageQueueString{
// 代码有删减
// 反序列化
id messages = [self _deserializeMessageJSON:messageQueueString];
for (WVJBMessage* message in messages) {
if (![message isKindOfClass:[WVJBMessage class]]) {
NSLog(@"WebViewJavascriptBridge: WARNING: Invalid %@ received: %@", [message class], message);
continue;
}
[self _log:@"RCVD" json:message];
NSString* responseId = message[@"responseId"];
if (responseId) {
WVJBResponseCallback responseCallback = _responseCallbacks[responseId];
responseCallback(message[@"responseData"]);
[self.responseCallbacks removeObjectForKey:responseId];
}
}
}
此处会根据responseId从本地的_responseCallbacks取出一个block并执行，同时将 responseData传递进去，并从全局对象_responseCallbacks移除当前responseId
至此 Native调用JS流程也讲解完毕
结语
- 本文大多采用代码片段来描述代码执行过程，想要了解真正的精髓还需仔细研究源码
- 文章写的比较仓促，文中难免有误，欢迎发现错误的同学批评指正。
打个小广告，在下篇文章中，我将介绍一个提升Hybrid开发的神器，传送门在这里，也欢迎各位同学伸出发财小手帮我点个star，谢谢！
网友评论