本人github:https://github.com/bianxiang
JSPatch官网:http://jspatch.com/
董铂然的博客:http://www.cnblogs.com/dsxniubility/p/5080875.html
JSPatch库, 一个Apple官方支持的实现在线更新iOS应用的库:http://www.jianshu.com/p/96b05d9aa484
JSPatch 基础用法:https://github.com/bang590/JSPatch/wiki/JSPatch-%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95#2-%E8%B0%83%E7%94%A8oc%E6%96%B9%E6%B3%95
oc,js转换: http://bang590.github.io/JSPatchConvertor/
=========================================================================================================
JSPatch使用小记
hotfix的作用众所周知,Android和iOS都有各自的技术,但是相比Android的当天发布来说(如果你们的项目不需要灰度),iOS热更新的意义更加重大。因为iOS审核周期长不说,而且运气不好会遇到各种被拒,即使申请快速审核,也必须满足二者之一:能够准确的告诉苹果复现crash的步骤,或者在特殊节日附近。 可能你费劲周折的提心吊胆和那么多天其实也就是在某个类中加三行代码。
1.简单介绍
在没有JSPatch之前,可能有人会使用过JSCocoa。但是有着一系列复杂问题,比如源码已经多年没有维护,代码规模巨大,不支持ARM64。如果想使用还需要升级libffi,并且尝试兼容ARM64,想编译通过都很困难。
JSPatch的出现基本解决了上述所有问题。在一个项目中接入JSPatch的成本很低,需要动点脑筋的可能就是如何合理的提交和下载。
关于JSPatch的原理作者的博客已经说的很清楚,本文不再说明,本文主要说的时一些接入操作相关。
如果你不是在董铂然博客园看到本文可点击查看原文。
2.仓库设置
js文件肯定不能随便往后台某个文件夹一放就让前端去下载了,虽然使用方便但是在App或者版本较多时容易混乱。建议专门搭建一个远端仓库,仓库里主要就是文件夹和js文件,当需要提交js文件时,从主干迁出一个分支,在合适的地方新建文件夹并添加js文件,然后给主干提Pull Request, 这应该是一个麻烦但是规范的流程。文件夹结构参考下图:
第三层文件夹里,可以用版本名称也可以使用build号。之后在发请求下载的时候应该是需要拼上项目appname,version等参数。
3.安全策略
安全相关工作如果没有做好,最惨的情况是人家可以通过js文件调用你的任何OC方法,我们肯定不能允许此类事情发生。一般在js文件提交到仓库以后后端应该对这一段js代码进行 md5或者更高手段的编码,并将这段编码与文件存在一起,上图中得meta.json里存的就是这一段编码。 之后在发请求的返回值的结构应该是大致如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
{
data: {
isUpdate:
true
,
content: "require(
'MTPoiFeedbackM'
)
defineClass(
'MTFeedbackRankCell'
,{
setPoiFeedback:function(poiFeedback){
self
.ORIGsetPoiFeedback(poiFeedback)
var temColor = require(
'UIColor'
).lightGrayColor();
self
.detailLbl().setTextColor(temColor);
}
})",
code:
"9c944f39e57f2e50bdb85deb878cc0f798efb9b0"
}
}
|
就是首先有个字段告诉我们较上次下载的js文件是否有更新。如果为true再检测下方返回的code与内容编码后得到的code是否相同。当然这个内容也可以不直接返回而是返回一个下载的url也是完全可以的。
4.更新频率
我之前看到很多人把使用js和下载js的代码都放在了didFinishLaunchingWithOptions:这个方法。我觉得有所不妥,因为如果这个app用户一直放在手机的后台(比如微信),并且也没出现内存警告的话,这个方法应该一直不会调用。我建议的是:使用js文件的代码放在didFinishLaunchingWithOptions: 而下载js文件的代码放在applicationDidBecomeActive: 因为这个方法在程序启动和后台回到前台时都会调用。并且我建议设置一个间隔时间,根据一些数据和权衡之后我们采用的是间隔时间设为1小时。 也就是说每次来到这个方法时,先要检测是距离上次发请求的时间间隔是否超过1小时,超过则发请求,否则跳过。
5.接入流程
接入的方式很简单,作者也提供了Demo程序,大致就分为几步:
①在General 的 LinkFrameworks and Libraries里面 添加javascriptcore.framework
这个库里主要用于js与oc语言的桥接,比如一些数据类型间的相互转化。
②podfile添加 pod 'JSPatch' 并pod install
③在代码中添加使用js和下载js的代码
这里作者也给出了示例,使用和下载
1
2
3
4
|
[JPEngine startEngine];
NSString
*sourcePath = [[
NSBundle
mainBundle] pathForResource:@
"demo"
ofType:@
"js"
];
NSString
*script = [
NSString
stringWithContentsOfFile:sourcePath encoding:
NSUTF8StringEncoding
error:
nil
];
[JPEngine evaluateScript:script];
|
1
2
3
4
|
[
NSURLConnection
sendAsynchronousRequest:[
NSURLRequest
requestWithURL:[
NSURL
URLWithString:@
"http://cnbang.net/test.js"
]] queue:[
NSOperationQueue
mainQueue] completionHandler:^(
NSURLResponse
*response,
NSData
*data,
NSError
*connectionError) {
NSString
*script = [[
NSString
alloc] initWithData:data encoding:
NSUTF8StringEncoding
];
[JPEngine evaluateScript:script];
}];
|
但是如果你是企业级app,肯定不能直接使用这么朴素的方式,肯定至少也要封装一个manager之类的。我们公司的源码不会在这里贴出来,但是提供一个建立这个manager大概的思路:
6.JSPatch语法
这里是作者列出的语法总结:作者原文 不用刻意去看,在写的过程中逐渐就熟悉了。
下面给出一段示例代码解决两个简单的bug。
①假设有一个按钮我们默认应该是让他不可点击的,但是之前忘了设置。
OC代码
1
2
3
4
5
|
- (
void
)viewWillAppear:(
BOOL
)animated
{
[
super
viewWillAppear:animated];
self
.confirm.enabled =
NO
;
}
|
jspatch
1
2
3
4
5
6
|
defineClass(
'MTBRegisterPage'
,{
viewWillAppear: function(animated) {
self
.
super
().viewWillAppear(animated);
self
.confirm().setEnabled(
NO
);
}
})
|
②假设有一个列表页有特殊情况临时想叫我们由黑色改成灰色,并展示一个弹窗
OC代码
1
2
3
4
5
6
7
8
|
- (
void
)setDealFeedback:(MTDealFeedbackM *)dealFeedback
{
// ------先调用原来的方法,旧代码保留
self
.detailLbl.textColor = [UIColor lightGrayColor];
UIAlertView *temAlertView = [[UIAlertView alloc]initWithTitle:@
"提示"
message:@
"已购物品用灰色展示"
delegate:
self
cancelButtonTitle:@
"OK"
otherButtonTitles:
nil
,
nil
];
[temAlertView show];
}
|
jsPatch
1
2
3
4
5
6
7
8
9
10
11
|
require(
'MTPoiFeedbackM'
)
defineClass(
'MTFeedbackRankCell'
,{
setPoiFeedback:function(poiFeedback){
self
.ORIGsetPoiFeedback(poiFeedback)
var temColor = require(
'UIColor'
).lightGrayColor();
self
.detailLbl().setTextColor(temColor);
var temAlertView = require(
'UIAlertView'
).alloc().
initWithTitle_message_delegate_cancelButtonTitle_otherButtonTitles(
"提示"
,
"已购物品用灰色展示"
,
self
,
"OK"
, null);
temAlertView.show()
}
})
|
诸如此类的代码,觉得在使用的过程中出现频率最高的bug,就是调用原方法然后加一个判断用来容错或return。
也许作者也觉得毕竟这个JSPatch语法 并不是一个正式的语种,大家不会投入太大的精力来仔细学习,所以作者本人也提供了一个简单粗暴的OC到JS直接转换地址:http://bang590.github.io/JSPatchConvertor/
这个地址亲测一些简单的写法是正确转换的,但是比较复杂的语法还是不能让机器直接搞定,还是需要人工修改的。作者也在不断完善这个工具。 这个转换器的实现原理:http://blog.cnbang.net/tech/2915/
7.更多思考
①.接入了JSPatch之后,iOS的线上BUG 看上去就不向以前那样“猛如虎”了,但是这仅仅是一个紧急预案措施,以前规范的流程还是需要遵守。
②.每一次本版本用JSPatch解决的线上Bug,下个版本必须用OC代码写入项目中,不能允许补丁代码的存留超过一个版本。
③.倡导使用敏捷开发的思想,类似于主逻辑或者是功能模块入口的方法可以抽的更细,这样即使需要修改,成本也不会太大,作者本人也提到,如果有一行代码必须要在一个大方法的中间进行修改,那我也没办法了,你只能把这整个方法都用js写一遍了,所以才设置了JSPatchConvertor。
④.每次用JSPatch解决掉的线上BUG 应当有一个专门的文档记录,遇到重复错误必须写casestudy。
暂时想到这些,希望本文能对准备接入JSPatch的开发人员有所帮助。
=========================================================================================================
JSPatch库, 一个Apple官方支持的实现在线更新iOS应用的库
简介
● 项目主页: https://github.com/bang590/JSPatch
● 示例下载: https://github.com/ios122/ios122
JSPatch 可以让你用 JavaScript 书写原生 iOS APP。只需在项目引入极小的引擎,就可以使用 JavaScript 调用任何 Objective-C 的原生接口,获得脚本语言的优势:为项目动态添加模块,或替换项目原生代码动态修复 bug。
优势
● 在项目中引入JSPatch,就可以在发现bug时下发JS脚本替换原生方法,可以做到无需更新整个APP即时修复bug!
● JSPatch用iOS内置的 JavaScriptCore.framework作为引擎;JSPatch也符合苹果的规则。苹果不允许动态下发可执行代码,但通过苹果 JavaScriptCore.framework 或 WebKit 执行的代码除外,JS 正是通过 JavaScriptCore.framework 执行的。
● JSPatch非常小巧
实例预览
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[JPEngine startEngine];
NSString *sourcePath = [[NSBundle mainBundle] pathForResource:@"demo" ofType:@"js"];
NSString *script = [NSString stringWithContentsOfFile:sourcePath encoding:NSUTF8StringEncoding error:nil];
[JPEngine evaluateScript:script];
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
[self.window addSubview:[self genView]];
[self.window makeKeyAndVisible];
return YES;
}
- (UIView *)genView
{
return [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 320)];
}
@end
// demo.js
require('UIView, UIColor, UILabel')
defineClass('AppDelegate', {
// 替换这个 -genView 方法
genView: function() {
var view = self.ORIGgenView();
view.setBackgroundColor(UIColor.greenColor())
var label = UILabel.alloc().initWithFrame(view.frame());
label.setText("JSPatch");
label.setTextAlignment(1);
view.addSubview(label);
return view;
}
});
安装
通过Cocopods安装
pod 'JSPatch' // 在线更新应用.
手动导入
- 下载https://github.com/bang590/JSPatch并解压
- 复制JSPatch文件夹到你的工程
使用
objective-C:
- 导入头文件#import "JPEngine.h"
- 导入本地JS(demo.js)见文首github示例demo(可选,实际项目中,根据自己实际需要进行.)
- 调用[JPEngine startEngine] 加载引擎
- 通过[JPEngine evaluateScript:@""]接口执行 JavaScript。
[JPEngine startEngine];
// 直接执行js
[JPEngine evaluateScript:@"\
var alertView = require('UIAlertView').alloc().init();\
alertView.setTitle('Alert');\
alertView.setMessage('AlertView from js'); \
alertView.addButtonWithTitle('OK');\
alertView.show(); \
"];
// 从网络拉回js脚本执行
[NSURLConnection sendAsynchronousRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://cnbang.net/test.js"]] queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *connectionError) {
NSString *script = [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
[JPEngine evaluateScript:script];
}];
// 执行本地js文件
NSString *sourcePath = [[NSBundle mainBundle] pathForResource:@"sample" ofType:@"js"];
NSString *script = [NSString stringWithContentsOfFile:sourcePath encoding:NSUTF8StringEncoding error:nil];
[JPEngine evaluateScript:script];
// 另一个例子
// 加载引擎
[JPEngine startEngine];
// 本地JS,动态更新技术就是通过服务器获取JS更新这个JS
NSString *sourcePath = [[NSBundle mainBundle] pathForResource:@"demo" ofType:@"js"];
NSString *script = [NSString stringWithContentsOfFile:sourcePath encoding:NSUTF8StringEncoding error:nil];
[JPEngine evaluateScript:script];
JavaScript:
基础使用方式
// 调用require引入要使用的OC类
require('UIView, UIColor, UISlider, NSIndexPath')
// 调用类方法
var redColor = UIColor.redColor();
// 调用实例方法
var view = UIView.alloc().init();
view.setNeedsLayout();
// set proerty
view.setBackgroundColor(redColor);
// get property
var bgColor = view.backgroundColor();
// 多参数方法名用'_'隔开:
// OC:NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSection:1];
var indexPath = NSIndexPath.indexPathForRow_inSection(0, 1);
// 方法名包含下划线'_',js用双下划线表示
// OC: [JPObject _privateMethod];
JPObject.__privateMethod()
// 如果要把 `NSArray` / `NSString` / `NSDictionary` 转为对应的 JS 类型,使用 `.toJS()` 接口.
var arr = require('NSMutableArray').alloc().init()
arr.addObject("JS")
jsArr = arr.toJS()
console.log(jsArr.push("Patch").join('')) //output: JSPatch
// 在JS用字典的方式表示 CGRect / CGSize / CGPoint / NSRange
var view = UIView.alloc().initWithFrame({x:20, y:20, width:100, height:100});
var x = view.bounds.x;
// block 从 JavaScript 传入 Objective-C 时,需要写上每个参数的类型。
// OC Method: + (void)request:(void(^)(NSString *content, BOOL success))callback
require('JPObject').request(block("NSString *, BOOL", function(ctn, succ) {
if (succ) log(ctn)
}));
// GCD
dispatch_after(function(1.0, function(){
// do something
}))
dispatch_async_main(function(){
// do something
})
详细文档请参考wiki页面:基础用法
定义类/替换方法
用 defineClass()
定义 Objective-C 的类,对类和实例方法进行动态替换。
// OC
@implementation JPTableViewController
...
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
NSString *content = self.dataSource[[indexPath row]]; //may cause out of bound
JPViewController *ctrl = [[JPViewController alloc] initWithContent:content];
[self.navigationController pushViewController:ctrl];
}
- (NSArray *)dataSource
{
return @[@"JSPatch", @"is"];
}
- (void)customMethod
{
NSLog(@"callCustom method")
}
@end
// JS
defineClass("JPTableViewController", {
// instance method definitions
tableView_didSelectRowAtIndexPath: function(tableView, indexPath) {
var row = indexPath.row()
if (self.dataSource().count() > row) { //fix the out of bound bug here
var content = self.dataSource().objectAtIndex(row);
var ctrl = JPViewController.alloc().initWithContent(content);
self.navigationController().pushViewController(ctrl);
}
},
dataSource: function() {
// get the original method by adding prefix 'ORIG'
var data = self.ORIGdataSource().toJS();
return data.push('Good!');
}
}, {})
详细文档请参考wiki页面:defineClass的用法
扩展
一些自定义的struct类型、C函数调用以及其他功能可以通过扩展实现,调用 +addExtensions:
可以加载扩展接口:
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[JPEngine startEngine];
//添加扩展
[JPEngine addExtensions:@[@"JPInclude", @"JPCGTransform"]];
NSString *sourcePath = [[NSBundle mainBundle] pathForResource:@"demo" ofType:@"js"];
NSString *script = [NSString stringWithContentsOfFile:sourcePath encoding:NSUTF8StringEncoding error:nil];
[JPEngine evaluateScript:script];
}
include('test.js') //`include()`方法在扩展 JPInclude.m 里提供
var view = require('UIView').alloc().init()
//struct CGAffineTransform 类型在 JPCGTransform.m 里提供支持
view.setTransform({a:1, b:0, c:0, d:1, tx:0, ty:100})
扩展可以在JS动态加载,更推荐这种加载方式,在需要用到时才加载:
require('JPEngine').addExtensions(['JPInclude', 'JPCGTransform'])
// `include()` and `CGAffineTransform` is avaliable now.
可以通过新增扩展为自己项目里的 struct 类型以及C函数添加支持,详情请见wiki页面:添加新扩展
安全性
JSPatch非常强大,因而最好将通过服务器获取JS的链接进行加密,本地JS也最好加密处理。