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

时间  2019-11-12
标签 codepush 更新 组件 详细 入教 繁體版
原文   原文链接

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

什么是CodePush

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

接入流程

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

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

一、安装 CodePush CLI

安装CodePush指令，直接在终端上输入以下命令便可，注意：这个CodePush指令只须要全局安装一次便可，若是第一次安装成功了，那后面就不在须要安装css

$ npm install -g code-push-clijava

image
image

二、注册 CodePush帐号

注册CodePush帐号也很简单，一样是只需简单的执行下面的命令，一样这个注册操做也是全局只须要注册一次便可react

$ code-push registerandroid

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

image
image

当注册成功后，CodePush会给咱们一个keygit

image
image

咱们直接复制这个key，而后在终端中将这个key填写进去便可，填写key登陆成功显示效果以下github

image
image

咱们使用下面的命令来验证个人登陆是否成功npm

$ code-push loginreact-native

image
image

CodePush注册登陆相关命令：

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

三、在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
image

添加Android平台应用

$ code-push app add iOSRNHybridForAndroid Android react-native
image
image

咱们能够输入以下命令来查看咱们刚刚添加的App

$ code-push app list

image
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的全部权转移到另一个帐号

四、RN代码中集成CodePush

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

安装组件

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

image
image

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

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

image
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 : '后台更新' , //非强制更新时，检查到更新的消息文本 optionalUpdateMessage : '有新版本了，是否更新？' , //Alert窗口的标题 title : '更新提示' } , } , ); } componentWillMount() { CodePush.disallowRestart();//禁止重启 this.syncImmediate(); //开始检查更新 } componentDidMount() { CodePush.allowRestart();//在加载完了，容许重启 } render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit App.js </Text> <Text style={styles.instructions}> {instructions} </Text> <Text style={styles.instructions}> 这是更新的版本 </Text> </View> ); } } // 这一行必需要写 App = CodePush(codePushOptions)(App) export default App const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, })

五、原生应用中配置CodePush

这里原生应用中配置CodePush咱们须要分别配置iOS平台和Android平台

配置iOS平台

  • 使用Xcode打开项目，Xcode的项目导航视图中的PROJECT下选择你的项目，选择Info页签 ，在Configurations节点下单击 + 按钮 ，选择Duplicate "Release Configaration，输入Staging
image
image
  • 选择Build Settings tab，搜索Build Location -> Per-configuration Build Products Path -> Staging，将以前的值：$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME) 改成：$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)
image
image
  • 选择Build Settings tab，点击 + 号，选择Add User-Defined Setting，将key设置为CODEPUSH_KEY，Release 和 Staging的值为前面建立的key，咱们直接复制进去便可
image
image
  • 打开Info.plist文件，在CodePushDeploymentKey中输入$(CODEPUSH_KEY)，并修改Bundle versions为三位
image
image

iOS平台CodePush环境集成完毕

配置Android平台

六、发布更新的版本

在使用以前须要考虑的是检查更新时机，更新是否强制，更新是否要求即时等

更新时机

通常常见的应用内更新时机分为两种，一种是打开App就检查更新，一种是放在设置界面让用户主动检查更新并安装

  • 打开APP就检查更新

    最为简单的使用方式在React Natvie的根组件的componentDidMount方法中经过
    codePush.sync()（须要先导入codePush包：import codePush from 'react-native-code-push'）方法检查并安装更新，若是有更新包可供下载则会在重启后生效。不过这种下载和安装都是静默的，即用户不可见。若是须要用户可见则须要额外的配置。具体能够参考codePush官方API文档，部分代码，完整代码请参照文档上面

    codePush.sync({ updateDialog: { appendReleaseDescription: true, descriptionPrefix:'\n\n更新内容：\n', title:'更新', mandatoryUpdateMessage:'', mandatoryContinueButtonLabel:'更新', }, mandatoryInstallMode:codePush.InstallMode.IMMEDIATE, deploymentKey: CODE_PUSH_PRODUCTION_KEY, });

    上面的配置在检查更新时会弹出提示对话框， mandatoryInstallMode表示强制更新，appendReleaseDescription表示在发布更新时的描述会显示到更新对话框上让用户可见

  • 用户点击检查更新按钮

    在用户点击检查更新按钮后进行检查，若是有更新则弹出提示框让用户选择是否更新，若是用户点击当即更新按钮，则会进行安装包的下载（实际上这时候应该显示下载进度，这里省略了）下载完成后会当即重启并生效（也可配置稍后重启），部分代码以下

    codePush.checkForUpdate(deploymentKey).then((update) => { if (!update) { Alert.alert("提示", "已经是最新版本--", [ { text: "Ok", onPress: () => { console.log("点了OK"); } } ]); } else { codePush.sync({ deploymentKey: deploymentKey, updateDialog: { optionalIgnoreButtonLabel: '稍后', optionalInstallButtonLabel: '当即更新', optionalUpdateMessage: '有新版本了，是否更新？', title: '更新提示' }, installMode: codePush.InstallMode.IMMEDIATE, }, (status) => { switch (status) { case codePush.SyncStatus.DOWNLOADING_PACKAGE: console.log("DOWNLOADING_PACKAGE"); break; case codePush.SyncStatus.INSTALLING_UPDATE: console.log(" INSTALLING_UPDATE"); break; } }, (progress) => { console.log(progress.receivedBytes + " of " + progress.totalBytes + " received."); } ); } }

更新是否强制

若是是强制更新须要在发布的时候指定，发布命令中配置--m true

更新是否要求即时

在更新配置中经过指定installMode来决定安装完成的重启时机，亦即更新生效时机

  • codePush.InstallMode.IMMEDIATE ：安装完成当即重启更新
  • codePush.InstallMode.ON_NEXT_RESTART ：安装完成后会在下次重启后进行更新
  • codePush.InstallMode.ON_NEXT_RESUME ：安装完成后会在应用进入后台后重启更新

如何发布CodePush更新包

在将RN的bundle放到CodePush服务器以前，咱们须要先生成bundle，在将bundle上传到CodePush

生成bundle

  • 咱们在RN项目根目录下线建立bundle文件夹，再在bundle中建立建立ios和android文件夹，最后将生成的bundle文件和资源文件拖到咱们的项目工程中
image
image
  • 生成bundle命令 react-native bundle --platform 平台 --entry-file 启动文件 --bundle-output 打包js输出文件 --assets-dest 资源输出目录 --dev 是否调试
$ react-native bundle --entry-file index.ios.js --bundle-output ./bundle/ios/main.jsbundle --platform ios --assets-dest ./bundle/ios --dev false
image
image
  • 将生成的bundle文件和资源文件拖到咱们的项目工程
image
image

上传bundle

  • 将生成的bundle文件上传到CodePush，咱们直接执行下面的命令便可

$ code-push release-react <Appname> <Platform> --t <本更新包面向的旧版本号> --des <本次更新说明>

注意： CodePush默认是更新Staging 环境的，若是发布生产环境的更新包，须要指定--d参数：--d Production，若是发布的是强制更新包，须要加上 --m true强制更新

$ code-push release-react iOSRNHybrid ios --t 1.0.0 --dev false --d Production --des "这是第一个更新包" --m true

更新包上传到CodePush服务器成功后，效果图以下：

 

image
image

查看发布的历史记录，命令以下

查询Production

$ code-push deployment history projectName Production

查询Staging

$ code-push deployment history projectName Staging

image
image

对1.0.0版本的应用如何发布第二个、第n个更新包

操做步骤和上面发布第一个更新包流程同样，咱们任然先须要打出bundle包，将生成的bundle文件和资源文件拖到工程中，而后再将bundle发布到CodePush

$ react-native bundle --entry-file index.ios.js --bundle-output ./bundle/ios/main.jsbundle --platform ios --assets-dest ./bundle/ios --dev false 
$ code-push release-react iOSRNHybrid ios --t 1.0.0 --dev false --d Production --des "这是第二个更新包" --m true

注意事项

  • 当咱们在生成更新包以前，咱们须要先将JS代码打包成bundle，而后拖拽到项目中，打包以前咱们须要先本身创建输出bundle的文件夹bundle -> ios，打bundle命令以下：
$ react-native bundle --entry-file index.ios.js --bundle-output ./bundle/ios/main.jsbundle --platform ios --assets-dest ./bundle/ios --dev false
image
image

  • 发布更新包命令中的 -- t 对应的参数是和咱们项目中的版本号一致的，这个不要误理解为是更新包的版本号，例如项目中的版本号为1.0.0， 这时若是咱们须要对这个1.0.0 版本的项目进行第一次热更新，那么命令中的 -- t 也为1.0.0，第二次热更新任然为1.0.0

  • 项目的版本号须要改成三位的，默认是两位的，可是CodePush须要三位数的版本号

  • 发布更新应用时，应用的名称必需要和以前注册过的应用名称一致

image
image
  • 建立应用时，信息要填写正确
image
image
  • 当执行link，命令卡住不执行时，这时直接按回车键先ignore key便可
image
image
  • 还有最重要的一点须要注意的，就是打包证书环境要是良好的，证书不能报错

福利时间

    • 做者React Native开源项目OneM地址(按照企业开发标准搭建框架完成开发的)：https://github.com/guangqiang-liu/OneM：欢迎小伙伴们 star
    • 做者简书主页：包含50多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5欢迎小伙伴们：多多关注，多多点赞
    • 做者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
    • 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也按期更新最新的RN学习资料给你们，谢谢你们支持！
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程