iOS中实现JS和OC的交互(Hybrid App)

在项目开发中，我们常常遇到这种情况，一个功能性界面需要分享到其他平台，或者是一个较复杂，原生框架不易实现，需要经常变动的界面，处理这种功能，最优的处理办法就是交给H5来完成了。像这种介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”的应用就被成为Hybrid App。在iOS端涉及的知识就是JS和OC之间的交互，下面我们逐步学习如何处理这两者交互的问题。##目录使用JavaScriptCore与JS交互JavaScriptCore了解 获取JS点击事件（JS调用OC） OC调用JS方法 使用WebViewJavascriptBridge与JS交互 引入WebViewJavascriptBridge JS调用OC OC调用JS##使用JavaScriptCore与JS交互 ###JavaScriptCore了解 JavaScript和OC交互常用的框架就是这个了，首先我们了解几个概念：JSValue: 代表一个JavaScript实体，一个JSValue可以表示很多JavaScript原始类型例如boolean, integers, doubles，甚至包括对象和函数。 JSContext: 代表JavaScript的运行环境，你需要用JSContext来执行JavaScript代码。所有的JSValue都是捆绑在一个JSContext上的。 JSExport: 这是一个协议，可以用这个协议来将原生对象导出给JavaScript，这样原生对象的属性或方法就成为了JavaScript的属性或方法，非常神奇。 JavaScriptCore了解###网页内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <div style="margin-top: 20px"> <h2>JavaSript与OC交互</h2> <input type="button" value="Native传值" onclick="Native.call('Native调用')"> </div> <div> <input type="button" value="传值测试" onclick="passValue('test')"> </div> <script> var alertShow = function(str) { alert(str); } </script> </body> </html>HTML运行结果：###获取JS点击事件 我们目的是获取点击方法 第一步 导入JavaScriptCore #import <JavaScriptCore/JavaScriptCore.h>第二步 加载HTML文件 NSString* path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"]; NSURL* url = [NSURL fileURLWithPath:path]; NSURLRequest* request = [NSURLRequest requestWithURL:url] ; [self.webView loadRequest:request];第三步 获取当前页面JSContxt对象 - (void)webViewDidFinishLoad:(UIWebView *)webView { self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; //捕捉异常回调 self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) { context.exception = exceptionValue; NSLog(@"异常信息：%@", exceptionValue); }; }第四步 获取点击事件 有两种添加点击事件的方式直接调用的函数<input type="button" value="传值测试" onclick="passValue('test')">如果是第一种情况，比较简单。在代理- (void)webViewDidFinishLoad:(UIWebView *)webView 中加上 self.context[@"passValue"] = ^(NSString *str){ NSLog(@"%@",str); };如果点击传值按钮，就会调用此block，输出test第二种：通过native调用的方式<input type="button" value="Native传值" onclick="Native.call('Native调用')">这种方式需要声明一个JSExport的协议，协议中声明供JS使用的方法： #import <UIKit/UIKit.h> #import <JavaScriptCore/JavaScriptCore.h>@protocol JSObjcDelegate <JSExport> - (void)call:(NSString *)str; @end然后还要以JSExport协议关联Native方法， self.content[@"Native"] = self;在实现文件中实现这个方法 - (void)call:(NSString *)str{ NSLog(@"call"); }此时点击一下Native传值，就会输出Native调用 还有一个需要注意的地方是，在JS调用的方法里实现页面跳转时，要回到主线程执行。可以使用GCD方法 dispatch_async(dispatch_get_main_queue(), ^{     [self.navigationController pushViewController:vc animated:YES]; });至此，获取JS点击事件的功能就完成了。 ###OC调用JS方法 在上面那段HTML里有一个函数alertShow()，是调用弹框并将str值显示出来。那么我们如何调用这个方法呢？ 第一步、获取这个函数，有两种方法 JSValue *Callback = self.context[@"alertShow"];//第一种方式 JSValue *Callback = [self.context objectForKeyedSubscript:@"alertShow"];//第二种方式第二步、向JS传参 [Callback callWithArguments:@[@"OC调用JS方法"]];//出现一个弹框，`OC调用JS方法`如果想直接使用JS的方法可以 NSString *str = @"alert('OC添加JS提示成功')"; [self.context evaluateScript:str];###加载新的URL WebView有一个代理方法，每当需要去加载一个request，就会回调这个方法，让上层决定是否加载。常常一个H5页面会进行不同url之间的跳转，这里截获，进行本地处理。 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{    NSString *url = request.URL.absoluteString;     NSLog(@"____%@",url); if(![self isNetwork]){ //无网情况的一个处理 }else if([url hasSuffix:@"ios/test"]){        //do something you want return NO;     }     return YES; }##使用WebViewJavascriptBridge与JS交互 WebViewJavascriptBridge是一个轻量的用于OC与JS交互的第三方库，使用它可以用CocoaPods导入： pod 'WebViewJavascriptBridge', '~> 5.0' 也可以在Github上下载示例工程，将工程文件WebViewJavascriptBridge拖入自己项目中。本节主要介绍使用方法，关于实现原理网上介绍也比较多，感兴趣的同学可以自行了解。 引入WebViewJavascriptBridge //设置能够进行桥接 [WebViewJavascriptBridge enableLogging]; //注册handler在Object-C，如果有self.webView.delegate = self。应注释掉，否则注册方法不执行 self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];//如果想执行UIWebView的代理方法，需设置 [self.bridge setWebViewDelegate:self];JS调用OC JS调用原生方法getUsername，可以使用如下方式注册。JS需要返回值的可以用responseCallback将返回值传过去 [self.bridge registerHandler:@"getUsername" handler:^(id data, WVJBResponseCallback responseCallback) {     NSLog(@"%@",data);     responseCallback([self getUsername]); }];OC调用JS OC调用JS可以使用如下方法实现，如果需要传参，可以写到参数data:里，如果没有参数就传nil //OC调JS的方法 [self.bridge callHandler:@"testJavascriptHandler" data:nil responseCallback:^(id responseData) {    NSLog(@"ObjC received response: %@", responseData); }];常见的处理JS与OC之间交互的问题，基本就这些了。希望对大家有所帮助，Demo在这里传送门

蓝牙固件升级

升级介绍蓝牙固件升级是使用手机给固件进行更新，以达到修复bug，完善功能的作用。升级的大概流程是：首先，当手环的固件需要升级时，由嵌入式开发人员提供新的固件，由服务器管理人员将固件放到服务器上，此时，用户打开手机APP的时候会检测到服务器有更新，请求更新手环固件，确认更新后，手机会从服务器下载固件。下载完毕后，APP会读取固件内容，并根据升级协议将内容传到手环里，完成升级。DFU = Device Firmware Update （设备固件更新） OTA = Over The Air （空中升级）升级流程 各个蓝牙设备不尽相同，以下是我测试设备的升级流程： OTA下载固件 从云端下载的固件为.bin后缀的文件，文件名会有一定的格式，含有固件版本号和文件CRC32校验值。 数据分块 规定一个数据块大小比如2048字节，然后把升级数据进行分块，不够的就剩余多少作为一块。蓝牙一次发送的数据量是有限的，所以每次发送20字节的数据。这个数据要遵循升级数据格式，带指令头和校验和，下载包的数据只是这20字节中的一部分。所有包内数据都携带在每条升级数据指令中。 升级过程连接设备，发送升级请求。 待蓝牙确认之后，开始发送数据头告知蓝牙此次发送的数据量和CRC校验。 开始发送升级数据。（每条数据之间间隔20ms为了蓝牙能够方便处理） 待一个块发送完就发送块结束命令 蓝牙确认发送下一个块，返回错误则终止此次升级 发完所有数据之后发送升级完成 蓝牙确认则升级完成，返回错误则升级失败流程图 ###总结 蓝牙升级最复杂的就在升级过程，大量的数据与蓝牙交互，这时最好记录发送到升级数据的那一部分，可以给用户展示升级的进程。