CodePush热更新组件详细接入教程

什么是CodePush

CodePush是一个微软开发的云服务器。通过它，开发者可以直接在用户的设备上部署手机应用更新。CodePush相当于一个中心仓库，开发者可以推送当前的更新（包括JS/HTML/CSS/IMAGE等）到CoduPush，然后应用将会查询是否有更新。

接入流程

• 安装 CodePush CLI
• 注册 CodePush账号
• 在CodePush服务器注册App
• RN代码中集成CodePush
• 原生应用中配置CodePush
• 发布更新的版本

CodePush 接入示例Demo地址：https://github.com/guangqiang-liu/CodePushDemo

1、安装 CodePush CLI

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

$ npm install -g code-push-cli

image

2、注册 CodePush账号

注册CodePush账号也很简单，同样是只需简单的执行下面的命令，同样这个注册操作也是全局只需要注册一次即可

$ code-push register

注意：当执行完上面的命令后，会自动打开一个授权网页，让你选择使用哪种方式进行授权登录，这里我们统一就选择使用GitHub即可

image

当注册成功后，CodePush会给我们一个key

image

我们直接复制这个key，然后在终端中将这个key填写进去即可，填写key登录成功显示效果如下

image

我们使用下面的命令来验证我的登录是否成功

$ code-push login

image

CodePush注册登录相关命令：

• code-push login 登陆
• code-push loout 注销
• code-push access-key ls 列出登陆的token
• code-push access-key rm <accessKye> 删除某个 access-key

3、在CodePush服务器注册App

为了让CodePush服务器有我们的App，我们需要CodePush注册App，输入下面命令即可完成注册，这里需要注意如果我们的应用分为iOS和Android两个平台，这时我们需要分别注册两套key
应用添加成功后就会返回对应的production 和 Staging 两个key，production代表生产版的热更新部署，Staging代表开发版的热更新部署，在ios中将staging的部署key复制在info.plist的CodePushDeploymentKey值中，在android中复制在Application的getPackages的CodePush中

添加iOS平台应用

$ code-push app add iOSRNHybrid ios react-native

image

添加Android平台应用

$ code-push app add iOSRNHybridForAndroid Android react-native 

image

我们可以输入如下命令来查看我们刚刚添加的App

$ code-push app list

image

CodePush管理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的所有权转移到另外一个账号

4、RN代码中集成CodePush

首先我们需要安装CodeoPush组件，然后通过link命令添加原生依赖，最后在RN根组件中添加热更新逻辑代码

安装组件

$ npm install react-native-code-push --save

image

添加原生依赖，这里添加依赖我们使用自动添加依赖的方式

$ react-native link react-native-code-push

image

我们在RN项目的根组件中添加热更新逻辑代码如下

import React, { Component } from 'react'; import { Platform, StyleSheet, Text, View } from 'react-native'; import CodePush from "react-native-code-push"; // 引入code-push let codePushOptions = { //设置检查更新的频率 //ON_APP_RESUME APP恢复到前台的时候 //ON_APP_START APP开启的时候 //MANUAL 手动检查 checkFrequency : CodePush.CheckFrequency.ON_APP_RESUME }; const instructions = Platform.select({ ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', android: 'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu', }); type Props = {}; class App extends Component<Props> { //如果有更新的提示 syncImmediate() { CodePush.sync( { //安装模式 //ON_NEXT_RESUME 下次恢复到前台时 //ON_NEXT_RESTART 下一次重启时 //IMMEDIATE 马上更新 installMode : CodePush.InstallMode.IMMEDIATE , //对话框 updateDialog : { //是否显示更新描述 appendReleaseDescription : true , //更新描述的前缀。 默认为"Description" descriptionPrefix : "更新内容：" , //强制更新按钮文字，默认为continue mandatoryContinueButtonLabel : "立即更新" , //强制更新时的信息. 默认为"An update is available that must be installed." mandatoryUpdateMessage : "必须更新后才能使用" , //非强制更新时，按钮文字,默认为"ignore" optionalIgnoreButtonLabel : '稍后' , //非强制更新时，确认按钮文字. 默认为"Install" optionalInstallButtonLabel : '后台更新' , //非强制更新时，检查到更新的消息文本 optionalUp