原生集成code-push热更新RN功能

发表于 更新于 分类于

前言

code-push是一个微软开发的云服务器。通过它，开发者可以直接在用户的设备上部署手机应用更新。code-push相当于一个中心仓库，开发者可以推送当前的更新（包括JS/HTML/CSS/IMAGE等）到code-push，然后应用将会查询是否有更新。
虽然苹果禁了很多热更新，但是，code-push 还是可以用的。项目是 ReactNative 的，总结了下 iOS 的 code-push 的使用方法。

参考文章

code-push热更新详细接入教程
code-push热更新配置（命令整理）

步骤

安装code-push-cli

安装code-push指令，直接在终端上输入如下命令即可，注意：这个code-push指令只需要全局安装一次即可，如果第一次安装成功了，那后面就不在需要安装
npm install -g code-push-cli

注册code-push账号

  • 注册code-push账号也很简单，同样是只需简单的执行下面的命令，同样这个注册操作也是全局只需要注册一次即可code-push register
  • 当执行完上面的命令后，会自动打开一个授权网页，让你选择使用哪种方式进行授权登录，这里我们统一就选择使用GitHub即可
  • 当注册成功后，code-push会给我们一个key
  • 我们直接复制这个key，然后在终端中将这个key填写进去即可
  • 验证是否登录成功 code-push login
1
2
3
4
5
code-push注册登录相关命令：
	•	code-push login 登陆
	•	code-push loout 注销
	•	code-push access-key ls 列出登陆的token
	•	code-push access-key rm <accessKye> 删除某个 access-key

在code-push服务器注册App

code-push app add 项目名称 ios react-native
可以查看添加的App列表
code-push app list

1
2
3
4
5
6
code-push管理App的相关命令：
	•	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的所有权转移到另外一个账号

RN代码中集成code-push (不熟悉先省略)

原生应用中配置code-push

  • 使用Xcode打开项目，Xcode的项目导航视图中的PROJECT下选择你的项目，选择Info页签 ，在Configurations节点下单击 + 按钮 ，选择Duplicate “Release Configaration，输入Staging

avatar

  • 选择Build Settings tab，搜索Build Location -> Per-configuration Build Products Path -> Staging，将之前的值：$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME) 改为：$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)

avatar

  • 选择Build Settings tab，点击 + 号，选择Add User-Defined Setting，将key设置为CODEPUSH_KEY，Release 和 Staging的值为前面创建的key，我们直接复制进去即可

avatar

  • •	打开Info.plist文件，在`CodePushDeploymentKey`中输入`$(CODEPUSH_KEY)`，并修改`Bundle versions string,short`为三位

avatar

打包RN离线的jsbundle

  1. 在package.json根目录创建文件夹relseae_ios， 执行如下命令打包成index.bundle
    react-native bundle --entry-file index.js --platform ios --dev false --bundle-output relseae_ios/index.bundle --assets-dest relseae_ios

  2. 将index.bundle拷贝到当前目录
    cp ./relseae_ios/index.bundle ./

  3. 开启本地服务，生成jsbundle
    在根目录执行npm start
    Ctrl+T 开启新窗口（确保在pakage.json根目录）
    执行命令  curl 'http://localhost:8081/index.bundle?dev=false&minify=true&platform=ios' -o main.jsbundle

  4. 将main.jsbundle复制到relseae_ios目录下
    cp ./main.jsbundle ./relseae_ios

  5. 将根目录里的main.jsbundle和relseae_ios目录下的资源文件拖拽至工程下

  6. 设置Bundle离线包路径
    jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

发布RN更新jsbundle版本

  • 原生AppDelegete里需要配置
    jsCodeLocation = [CodePush bundleURL];

  • 更新jsbundle 要用以下命令 在项目根目录里
    code-push release TheOnlineTax ./relseae_ios/ 3.5.5 --des "还原RN代码” --m true —-d Production

注：
强制更新 –m true
生产环境 –d Production 

1
2
3
4
项目名称    TheOnlineTax    
文件路径    ./relseae_ios/  
项目版本号  3.5.5           
更新描述    "还原RN代码”
  • 查看更新情况

生成环境 code-push deployment history 项目名称 Production
开发环境 code-push deployment history 项目名称 Staging
或者 code-push deployment ls 项目名称