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 : '后台更新' ,
//非强制更新时,检查到更新的消息文本
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,
},
})

5、原生应用中配置CodePush

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

配置iOS平台

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

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

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

image

iOS平台CodePush环境集成完毕

配置Android平台

6、发布更新的版本

在使用之前需要考虑的是检查更新时机,更新是否强制,更新是否要求即时等

更新时机

一般常见的应用内更新时机分为两种,一种是打开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
  • 生成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
  • 将生成的bundle文件和资源文件拖到我们的项目工程

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

查看发布的历史记录,命令如下

查询Production

$ code-push deployment history projectName Production

查询Staging

$ code-push deployment history projectName Staging

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
  • 发布更新包命令中的 -- t 对应的参数是和我们项目中的版本号一致的,这个不要误理解为是更新包的版本号,例如项目中的版本号为1.0.0, 这时如果我们需要对这个1.0.0 版本的项目进行第一次热更新,那么命令中的 -- t 也为1.0.0,第二次热更新任然为1.0.0

  • 项目的版本号需要改为三位的,默认是两位的,但是CodePush需要三位数的版本号

  • 发布更新应用时,应用的名称必须要和之前注册过的应用名称一致

image
  • 创建应用时,信息要填写正确

image
  • 当执行link,命令卡住不执行时,这时直接按回车键先ignore key即可

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学习资料给大家,谢谢大家支持!

CodePush热更新组件详细接入教程的更多相关文章

  1. 用CodePush在React Native App中做热更新

    最近在学React Native,学到了CodePush热更新. 老师讲了两种实现的方法,现将其记录一下. 相比较原生开发,使用React Native开发App不仅能节约开发成本,还能做原生开发不能 ...

  2. ReactNative 告别CodePush,自建热更新版本升级环境

    微软的CodePush热更新非常难用大家都知道,速度跟被墙了没什么区别. 另外一方面,我们不希望把代码放到别人的服务器.自己写接口更新总归感觉安全一点. so,就来自己搞个React-Native A ...

  3. CodePush自定义更新弹框及下载进度条

    CodePush 热更新之自定义更新弹框及下载进度 先来几张弹框效果图 非强制更新场景 image 强制更新场景 image 更新包下载进度效果 image 核心代码 这里的热更新Modal框,是封装 ...

  4. RN学习1——前奏,app插件化和热更新的探索

    react_native_banner-min.png React Native(以下简称RN)有大量前端开发者的追捧.前端开发是一个活跃的社区,一直尝试着一统前后端,做一个全栈开发,RN就是他们在客 ...

  5. React Native热更新(iOS)-Pushy

    React Native的出现,使的开发iOS代码出现了更便捷的方式.由于RN是使用脚本语言编写的,实现了"解释执行"的方式,而这种执行方式的修改只需替换脚步即可,不需要重新发布程 ...

  6. 体验ToLua框架下热更新(Phpstudy)

    一.关于热更新的详细流程 首先我们需要需要将本机电脑作为服务器打开,这是第一步 1.1.1如何确定我们的电脑是作为服务器打开的. 我们打开一个浏览器在地址栏中输入127.0.0.1.或者是localh ...

  7. react-native热更新之CodePush详细介绍及使用方法

    react-native热更新之CodePush详细介绍及使用方法 2018年03月04日 17:03:21 clf_programing 阅读数:7979 标签: react native热更新co ...

  8. ReactNative 使用微软的CodePush进行热更新,继续填坑

    1.别被开发环境骗了 在我们开发react native的时候,一键运行工程,js改了,只要cmd+R就可以刷新了.然后会轻易以为真正app上线的时候也是一样,只要app一打开就是最新的. 其实!这是 ...

  9. React Native之code-push的热更新(ios android)

    React Native之code-push的热更新(ios android) React Native支持大家用React Native技术开发APP,并打包生成一个APP.在动态更新方面React ...

随机推荐

  1. express中间件笔记整理

    expressexpress概念:express是基于nodejs的HTTPS模块构建出来的一个web应用开发框架,在nodejs之上扩展了 Web 应用所需的基本功能.本质上express应用就是调 ...

  2. Docker 核心概念、安装、端口映射及常用操作命令,详细到令人发指。

    Docker简介 Docker是开源应用容器引擎,轻量级容器技术. 基于Go语言,并遵循Apache2.0协议开源 Docker可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发 ...

  3. 转:问题解决:The project cannot be built until build path errors are resolved

    转自:http://blog.csdn.net/marty_zhu/article/details/2566299 今天在eclipse里遇到这个问题,之前也遇到过,不过,通过clean一下项目,或者 ...

  4. 【Win32】对指定进程进行禁音

    使用例子如下: CAudioMgr AudioMgr; AudioMgr.SetProcessMute(GetCurrentProcessId()); H文件的内容如下: #pragma once # ...

  5. Linux 的su 与sudo 的区别,查看所有用户

    首先,我们要知道系统当中存在哪些用户. 1.用户名和密码的存储位置 存储帐号的文件:/etc/passwd 存储密码的文件:/etc/shadow 通过/etc/shadow获取的只是密码加密后的Ha ...

  6. Centos7 下安装Apache2 + MySQL + PHP7

    Apache 1.安装Apache yum install httpd 2.设置服务器开机自动启动Apache systemctl enable httpd.service 若要验证是否自动启动可在重 ...

  7. NuGet 2.0 (.NET软件包管理器) 发布了-现在升级吧

    原文:https://blogs.msdn.microsoft.com/scott_hanselman/2012/07/10/nuget-2-0-net/ [原文发表地址]  NuGet 2.0 (. ...

  8. YC

    package com.hanqi; import java.util.*; public class yc{ public static void main(String[] args) { // ...

  9. input标签添加上disable属性在ios端字体颜色不兼容的问题

    input[disabled],input:disabled,input.disabled{ color: #3e3e3e; -webkit-text-fill-color: #3e3e3e; -we ...

  10. Docker bridge探索

    作者:ellen.sun链接:http://blog.daocloud.io/docker-bridge/著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 早期的二层网络中,bri ...