搞了两天,查了很多资料,发现网上很多资料太老了,把我配置的方法分享给大家,同时也记录下
codepush是微软的一套用于热更新的服务,微软的github地址:https://github.com/Microsoft/react-native-code-push,里面讲述了详细的使用方法。这里我就自己的操作做了一下调整。
一、全局配置
1.1 全局安装 code-push 环境 npm install -g code-push-cli ,安装成功则可以 code-push -v查看安装的版本号
1.2 code-push register 注册账号,会在google浏览器打开注册界面,然后注册成功会拿到一个key 如下图所示,如果已经注册过的话,code-push login 直接登录
code-push login登陆
code-push logout注销
code-push access-key ls列出登陆的token
code-push access-key rm 删除某个 access-key
1.3 注册应用
code-push app add appName-ios ios react-native
code-push app add appName-android android react-native
其他命令如下:
code-push app add在账号里面添加一个新的app
code-push app remove或者 rm 在账号里移除一个app
code-push app rename重命名一个存在app
code-push app list或则 ls 列出账号下面的所有app
code-push app transfer把app的所有权转移到另外一个账号
1.4 app里配置code-push SDK
- 进入到你的项目目录下,在终端里运行
- npm install --save react-native-code-push@latest 安装code-push组件
- 与所有其他React Native第三方组件一样,iOS和Android的集成方式不同,因此根据您平台执行以下设置步骤。 请注意,如果您要同时配置这两个平台,建议为每个平台创建单独的CodePush应用程序
ios配置
一旦你获得了CodePush插件,你需要将它集成到React Native应用程序的Xcode项目并正确配置。 为此,请执行以下步骤:
为了迎合尽可能多的开发人员的偏好,CodePush支持三种安装方式:
1、 RNPM安装 - React Native包管理器 (RNPM)是一个非常棒的工具,它为React Native插件提供了最简单的安装体验。 我们推荐这种方法
(1)从React Native v0.27开始,rnpm链接已经合并到React Native CLI中。运行以下命令:
react-native link react-native-code-push
如果您的应用程序使用的版本低于v0.27的React Native,请运行以下命令:
rnpm link react-native-code-push
注意:如果您尚未安装RNPM,可以通过简单地运行npm i -g rnpm安装rnpm然后再执行上述命令
(2) 系统将提示您输入要使用的部署密钥。 如果你还没有它,你可以通过运行code-push deployment ls <appName> -k
来检索这个值,或者你可以选择忽略它(直接按<ENTER>
),并在以后添加它。 开始吧,我们建议您先使用您的Staging
部署密钥进行测试。
2、CocoaPods安装 如果你在iOS应用里嵌入使用React Native,或者就是任性,喜欢使用CocoaPods,那么建议使用我们插件中提供的Podspec文件.
(1)把CodePush依赖添加到Podfile里,并指向NPM的安装路径
pod 'CodePush', :path => '../node_modules/react-native-code-push'
(2)运行
pod install
3. "手动安装" -如果你不想依赖任何额外的工具,你可以使用这个方法.
(1)打开你的APP的Xcode工程
(2)点击Libraries文件夹右键‘Add Files to ....’,在node_modules里找到‘CodePush.xcodeproj’
(3) 把.a文件从Libraries/CodePush.xcodeproj/Products拖拽到Link Binary With Libraries选项
(4) 选择“Link Binary With Libraries”列表下方的加号,添加libz.tbd
(5) 在项目配置的“"Build Settings"”选项卡下,找到“Header Search Paths”。 添加路径$(SRCROOT)/../node_modules/react-native-code-push/ios
并在下拉菜单中选择“recursive”。
(6) 插件配置
注意:如果你使用RNPM 或者 react-native link自动配置了组件,这一步已经完成,你可以跳过这一步了!!!
打开AppDelegate.m文件,导入CodePush头文件:
#import "CodePush.h"
在
Info.plist
里添加CodePushDeploymentKey
字段,填入Deployment Key
- 在Info.plist中将Bundle versions string, short的值修改为1.0.0
ios部署
1.在Xcode 里打开项目 ,选择工程根目录,选择info
2.点击➕按钮,选择Duplicate "Release" Configuration
3. 命名为 Staging或者你喜欢的
4. 选择 Build Setting
5. 点击工具栏上的+号按钮,选择`Add User-Defined Setting
6. 命名为CONDPUSH_KEY,添加Staging和Production环境的deployment key
7. 打开你工程的Info.plist
文件,修改CodePushDeploymentKey的值为:$(CODEPUSH_KEY)
到此,你的iOS动态部署配置已完成,当你运行项目时,根据你运行的版本(Debug,Release)会去自动匹配Staging和 Production环境
发布更新
CodePush支持两种发布更新的方式,一种是通过code-push release-react简化方式,另外一种是通过code-push release的复杂方式
第一种方式:通过code-push release-react发布更新
这种方式将打包与发布两个命令合二为一,可以说大大简化了我们的操作流程,建议大家多使用这种方式来发布更新。
命令格式:
code-push release-react <appName> <platform>
eg:
code-push release-react MyApp-iOS ios
code-push release-react MyApp-Android android
再来个更高级的:
code-push release-react MyApp-iOS ios --t 1.0.0 --dev false --d Production --des "1.优化操作流程" --m true
其中参数--t为二进制(.ipa与apk)安装包的的版本;--dev为是否启用开发者模式(默认为false);--d是要发布更新的环境分Production与Staging(默认为Staging);--des为更新说明;--m 是强制更新。
关于code-push release-react
更多可选的参数,可以在终端输入code-push release-react
进行查看。
另外,我们可以通过code-push deployment ls <appName>
来查看发布详情与此次更新的安装情况。
第二中方式:通过code-push release发布更新
code-push releas
e发布更新呢我们首先需要将js与图片资源进行打包成 bundle
生成bundle
发布更新之前,需要先把 js打包成 bundle,如:
第一步: 在 工程目录里面新增 bundles文件:mkdir bundles
第二步: 运行命令打包
react-native bundle --platform 平台 --entry-file 启动文件 --bundle-output 打包js输出文件 --assets-dest 资源输出目录 --dev 是否调试
。
eg:
react-native bundle --platform android --entry-file index.android.js --bundle-output ./bundles/index.android.bundle --dev false
需要注意的是:
- 忽略了资源输出是因为 输出资源文件后,会把bundle文件覆盖了。
- 输出的bundle文件名不叫其他,而是 index.android.bundle,是因为 在debug模式下,工程读取的bundle就是叫做 index.android.bundle。
- 平台可以选择 android 或者 ios
发布更新
打包bundle结束后,就可以通过CodePush发布更新了。在终端输入
code-push release <应用名称> <Bundles所在目录> <对应的应用版本> --deploymentName: 更新环境 --description: 更新描述 --mandatory: 是否强制更新
eg:
code-push release GitHubPopular ./bundles/index.android.bundle 1.0.6 --deploymentName Production --description "1.支持文章缓存。" --mandatory true
注意:
- CodePush默认是更新 staging 环境的,如果是staging,则不需要填写 deploymentName。
- 如果有 mandatory 则Code Push会根据mandatory 是true或false来控制应用是否强制更新。默认情况下mandatory为false即不强制更新。
- 对应的应用版本(targetBinaryVersion)是指当前app的版本(对应build.gradle中设置的versionName "1.0.6"),也就是说此次更新的js/images对应的是app的那个版本。不要将其理解为这次js更新的版本。
如客户端版本是 1.0.6,那么我们对1.0.6的客户端更新js/images,targetBinaryVersion填的就是1.0.6。 - 对于对某个应用版本进行多次更新的情况,CodePush会检查每次上传的 bundle,如果在该版本下如1.0.6已经存在与这次上传完全一样的bundle(对应一个版本有两个bundle的md5完全一样),那么CodePush会拒绝此次更新。
所以如果我们要对某一个应用版本进行多次更新,只需要上传与上次不同的bundle/images即可。如:
eg:
对1.0.6的版本进行第一次更新:
code-push release GitHubPopular ./bundles/index.android.bundle 1.0.6 --deploymentName Production --description "1.支持文章缓存。" --mandatory true
对1.0.6的版本进行第二次更新:
code-push release GitHubPopular ./bundles/index.android.bundle 1.0.6 --deploymentName Production --description "1.新添加收藏功能。" --mandatory true
- 在终端输入 code-push deployment history <appName> Staging 可以看到Staging版本更新的时间、描述等等属性。
eg:
code-push release Equipment ./bundles 1.0.1
总结:
CodePush也存在着一些缺点:
- 服务器在国外,在国内访问,网速不是很理想。
- 其升级服务器端程序并不开源的,后期微软会不会对其收费还是个未知数。
如果在没有更好的动态更新React Native应用的方案的情况下,并且这些问题还在你的接受范围之内的话,那么CodePush可以作为动态更新React Native应用的一种选择。 - 最好自己搭建动态更新服务器