欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-03-28 20:06:04
CodePush热更新组件详细接入教程 什么是CodePush CodePush是一个微软开发的云服务器。通过它,开发者可以直接在用户的设备上部署手机应用更新。CodePush相当于一个中心仓库,开发者可以推送当前的更新(包括JS/HTML/CSS/IMAGE等)到CoduPush,然后应用将会查询 ......

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

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

2、注册 codepush账号

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

$ code-push register

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

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

当注册成功后,codepush会给我们一个key

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

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

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

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

$ code-push login

CodePush热更新组件详细接入教程
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

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

添加android平台应用

$ code-push app add iosrnhybridforandroid android react-native
CodePush热更新组件详细接入教程
image

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

$ code-push app list

CodePush热更新组件详细接入教程
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

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

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

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

CodePush热更新组件详细接入教程
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
CodePush热更新组件详细接入教程
image
  • 选择build settings tab,搜索build location -> per-configuration build products path -> staging,将之前的值:$(build_dir)/$(configuration)$(effective_platform_name) 改为:$(build_dir)/release$(effective_platform_name)
CodePush热更新组件详细接入教程
image
  • 选择build settings tab,点击 + 号,选择add user-defined setting,将key设置为codepush_key,release 和 staging的值为前面创建的key,我们直接复制进去即可
CodePush热更新组件详细接入教程
image
  • 打开info.plist文件,在codepushdeploymentkey中输入$(codepush_key),并修改bundle versions为三位
CodePush热更新组件详细接入教程
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文件和资源文件拖到我们的项目工程中
CodePush热更新组件详细接入教程
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
CodePush热更新组件详细接入教程
image
  • 将生成的bundle文件和资源文件拖到我们的项目工程
CodePush热更新组件详细接入教程
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服务器成功后,效果图如下:

 

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

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

查询production

$ code-push deployment history projectname production

查询staging

$ code-push deployment history projectname staging

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

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

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

CodePush热更新组件详细接入教程
image
  • 创建应用时,信息要填写正确
CodePush热更新组件详细接入教程
image
  • 当执行link,命令卡住不执行时,这时直接按回车键先ignore key即可
CodePush热更新组件详细接入教程
image
  • 还有最重要的一点需要注意的,就是打包证书环境要是良好的,证书不能报错

福利时间

    • 作者react native开源项目onem地址(按照企业开发标准搭建框架完成开发的):https://github.com/guangqiang-liu/onem:欢迎小伙伴们 star
    • 作者简书主页:包含50多篇rn开发相关的技术文章欢迎小伙伴们:多多关注,多多点赞
    • 作者react native qq技术交流群:620792950 欢迎小伙伴进群交流学习
    • 友情提示:在开发中有遇到rn相关的技术问题,欢迎小伙伴加入交流群(620792950),在群里提问、互相交流学习。交流群也定期更新最新的rn学习资料给大家,谢谢大家支持!