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

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

原文地址：https://www.cnblogs.com/guangqiang/p/9589410.html

时间： 2024-08-29 19:38:31

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

React-Native 告别CodePush，自建热更新版本升级环境

微软的CodePush热更新非常难用大家都知道,速度跟被墙了没什么区别. 另外一方面,我们不希望把代码放到别人的服务器.自己写接口更新总归感觉安全一点. so,就来自己搞个React-Native APP的热更新管理工具吧.暂且命名为hotdog. /**************************************************/ 首先我们要弄清react-native启动的原理,是直接调用jslocation的jsbundle文件和assets资源文件. 由此,我们可以自

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

CodePush 热更新之自定义更新弹框及下载进度 先来几张弹框效果图 非强制更新场景 image 强制更新场景 image 更新包下载进度效果 image 核心代码 这里的热更新Modal框,是封装成一个功能独立的组件来使用的,需不需要更新以及是否为强制更新等逻辑均在组件内实现 image UpdateComp 热更新组件核心代码如下: /** * Created by guangqiang on 2018/3/29. */ import React, {Component} from 're

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

react_native_banner-min.png React Native(以下简称RN)有大量前端开发者的追捧.前端开发是一个活跃的社区,一直尝试着一统前后端,做一个全栈开发,RN就是他们在客户端领域的尝试. 说是从零开始,但其实我还是懂一点点JS代码的,而且算是一个有经验的iOS.Android开发,对很多js和native交互的细节和特性还算了解,在QDaily里面也做过好多hybird的尝试,还经常用JSPatch做hotfix,总的来说,就是对hot update.插件化以及hy

Cocos Creator热更新

一,添加热更新需要的文件 1. 在项目根目录添加 version_generator.js 文件   version_generator.js 内容如下: /** * 此模块用于热更新工程清单文件的生成 */ var fs = require('fs'); var path = require('path'); var crypto = require('crypto'); var manifest = { //服务器上资源文件存放路径(src,res的路径) packageUrl: 'http

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

react-native热更新之CodePush详细介绍及使用方法 2018年03月04日 17:03:21 clf_programing 阅读数:7979 标签: react native热更新code pushJSRN更多 个人分类: react native React Native应用部署/热更新-CodePush最新集成总结 React Native应用部署/热更新-CodePush最新集成总结(新) 本文出自<React Native学习笔记>系列文章.了解更多,可以关注我的Git

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

React Native之code-push的热更新(ios android) React Native支持大家用React Native技术开发APP,并打包生成一个APP.在动态更新方面React Native只是提供了动态更新的基础,对将应用部署到哪里,如何进行动态更新并没有支持的那么完善.好在微软开发了CodePush,填补React Native 应用在动态更新方面的空白.CodePush 是微软提供的一套用于热更新 React Native 和 Cordova 应用的服务.下面将向大

React Native热更新（CodePush使用）

React Native热更新(CodePush使用) 在移动应用开发过程中,应用的发布上线一直是个耗时且长时间没有很好解决的问题.特别是对于苹果开发者,受苹果的生态环境影响每次审核时间一到7天不等.笔者记得15年曾有新应用上线多次被拒,从提交审核到正式上线前前后后磨蹭了半个多月才真正发布成功.安卓的相对就不会产生那么多不愉快,审核时间半天左右.今天笔者想向大家分享的是跨平台开发中的CodePush使用,CodePush的出现有效的解决了React Native 应用在动态更新方面耗时过长问题.

react native 热更新教程 react-native-pushy

 react-native-pushy 热更新 是由中文网推出的 中文网维护  还是支持国内的吧  过程中如果终端不小心关闭了 请 打开终端 cd 命令到你的项目文件夹  然后继续下一步 ! android 环境按照react native 中文网搭建完成之后  是没有NDK的  要自己去下载  推荐使用 r10e 百度网盘 下载  https://pan.baidu.com/s/1PoqMBV1OKyydOXYc_GzrZA  没有提取密码 版本 并且设置环境变量 并设置环境变量ANDROID

ios app 实现热更新（无需发新版本号实现app加入新功能）

眼下可以实现热更新的方法,总结起来有下面三种 1. 使用FaceBook 的开源框架 reactive native,使用js写原生的ios应用 ios app能够在执行时从server拉取最新的js文件到本地.然后执行,由于js是一门动态的 脚本语言.所以可以在执行时直接读取js文件执行,也因此可以实现ios的热更新 2. 使用lua 脚本.lua脚本如同js 一样,也能在动态时被.之前愤慨的小鸟使用 lua脚本做的一个插件 wax,能够实现使用lua写ios应用.热更新时,从server拉去