写在前面:文章讲的是热更新的基本原理,适用于RN对应的Android和iOS端。不涉及:服务端下发,客户端校验和替换操作
如果您已经明白热更新的原理,请珍惜您的时间绕道去这里
你需要具备的知识:
1.很牛X开源的二进制差分工具Binary diff/patch utility
2.react-native打离线bundle包
操作步骤
① 生成增量包文件
② 增量包和源版本合并生成新的bundle文件
③ 应用使用新的bundle 文件运行验证
1 生成增量包文件
- 首先,在桌面创建两个文件夹,也可以跳过该步骤.只要你后面路劲搞得清楚就行.里面放两个ipa文件,随便什么文件都行.前提是两个文件要有点差别.我是在Test里放老的ipa,然后在Test1里放了个修改代码后的ipa.
图0-准备工作
-
然后在命令行里
bsdiff ~/Desktop/Test/HotPush.ipa ~/Desktop/Test1/HotPush.ipa ~/Desktop/hot.patched
在桌面你会看到多了个hot.patched 文件,这个hot.patched 就是你需要的那个增量包bsdiff的定义
bsdiff: usage: bsdiff oldfile newfile patchfile
假如你出现了这个:bsdiff: command not found复制下错误提示=>去这里 -
再然后在命令行里
合成新的.ipa
bspatch ~/Desktop/Test/HotPush.ipa ~/Desktop/hot_new.ipa ~/Desktop/hot.patched
bsdiff的定义bspatch: usage: bspatch oldfile newfile patchfile
hot_new.ipa就是最后客户端运行的那个最新包了.(这里是以iOS 端的例子)
到这里,我们怎么来确保新的包文件就是对的呢,这里就要用到MD5命令了.
图1-命令执行
上图中:可以看到合成新包的MD5和Test1里直接打最新代码的包是一样的,这就表明增量合成的过程没有问题.
2 增量包和源版本合并生成新的bundle文件
进到你的RN项目的根目录,然后命令行执行react-native bundle 命令,参数的话就不一一解释了
react-native bundle --entry-file index.ios.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios -- assets-dest ./ios/bundle --dev false
-
注意 执行前,需要自己在对应目录上创建空文件夹bundle
图2-bundle文件
这里我的猜测是:
index.ios.jsbundle 是node_modules的bundle文件,index.ios.jsbundle.meta 则是自己JS代码的bundle文件.
图3-然后运行代码
弄成上图的样子后就在xcode上Comand R
你会发现,手机屏幕上方状态栏的位置有个黑色的加载进度显示(很快就消失了),这就表示现在的工程不是连接的你电脑上那个npm start 出来的本地服务.绿色的加载进度表示你是跑的本地起的服务,而不是离线包.
图片里的bundleURL 方法看你自己情况而定,只要能让app 找到对应的bundle文件就好.如果找不到,会去你localhost 找,再找不到就会包找不到服务的错.
至此,我们已经完成了准备工作.
随便在你项目里修改下代码,然后保存.然后再react-native bundle 一次,这里要注意点:这里换下output 的路劲,方便后面新旧的对比,我这边是直接放到桌面了的Test了
命令A:react-native bundle --entry-file index.ios.js --bundle-output ~/Desktop/Test/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false
新旧资源包进行最开始的diff 和patch 操作
命令B:bsdiff ~/Desktop/Test/index.ios.jsbundle.meta ~/Desktop/HotPush/ios/bundle/index.ios.jsbundle.meta ~/Desktop/hot.patched
会看到桌面有个hot.patched 的文件
命令C:bspatch ~/Desktop/HotPush/ios/bundle/index.ios.jsbundle.meta ~/Desktop/Test/index.ios.jsbundle.meta ~/Desktop/hot.patched
经过命令C后,就在桌面上得到了新的index.ios.jsbundle.meta ,这个meta其实和命令A 放在Test里面的是一样,可以用md5 校验
图4-修改代码后新的bundle文件
然后把上图中新的index.ios.jsbundle.meta文件拖到你的工程里,就是图2的最后一级目录里,然后会提示你有同名文件了,选择替换.
3 应用使用新的bundle 文件运行验证
这一步就是验证了,替换bundle文件后,点击运行.(其实替换这一步应该是在打包好的客户端里操作的),你会发现是你修改后的代码了.
写在最后:
讲的那么一大堆的东西,只是为了自己能搞懂热更新脚本都做了些啥,然后自己手动做一遍.可能后面在RN里面写那些热更新的代码的时候就会简单很多吧.网上有很多Pushy和react-native-code-push 的使用教程,但是一看他们的源码就懵逼了 .我就是在看了Pushy 的源码后,写这些的.
网友评论