首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CodePush热更新接入-iOS

CodePush热更新接入-iOS

作者头像
用户6094182
发布2019-08-23 17:47:33
2K0
发布2019-08-23 17:47:33
举报
文章被收录于专栏:joealzhoujoealzhou

CodePush热更新接入-iOS

React-native-code-push是微软针对React-native推出的热更新服务。以下是本人接入流程记录:

一、CodePush CLI安装

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

$ npm install -g code-push-cli

二、注册 CodePush账号

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

$ code-push register

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

CodePush登录.png

当注册成功后,CodePush会给我们一个key。然后把这个key复制下来填入终端即可登录成功。

CodePushKey.png

CodePush Register.png

当然你可以使用以下命令验证是否登录成功:

$ code-push login

当有如下报错时,说明你已经登录成功了。

[error] You are already logged in from this machine.

下面是一些常用操作指令:

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 APP:

$ code-push app add CodePushDemo_IOS ios react-native

屏幕快照 2019-05-30 13.52.25.png

注册Android APP:

$ code-push app add CodePushDemo_IOS Android react-native

屏幕快照 2019-05-30 13.56.12.png

查看注册过的APP:

$ code-push app list

屏幕快照 2019-05-30 13.56.35.png

其它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

添加依赖:

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

五、配置iOS工程

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

CodePush iOS1.png

选择Build Settings tab,搜索Build Location -> Per-configuration Build Products Path -> Staging,将之前的值:$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)改为:$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)

CodePush iOS2.png

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

CodePush iOS3.png

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

CodePush iOS4.png

六、index.js文件配置

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

打开APP就检查更新:

最为简单的使用方式在React Natvie的根组件的componentDidMount方法中通过 codePush.sync()(需要先导入codePush包:import codePush from 'react-native-code-push')方法检查并安装更新,如果有更新包可供下载则会在重启后生效。不过这种下载和安装都是静默的,即用户不可见。如果需要用户可见则需要额外的配置。具体可以参考codePush官方API文档。

import codePush from "react-native-code-push";

class App extends Component {
    ...
    componentDidMount () {
        codePush.sync({
          updateDialog: true, // 是否打开更新提示弹窗
          installMode: codePush.InstallMode.IMMEDIATE,
          mandatoryInstallMode: codePush.InstallMode.IMMEDIATE,
          deploymentKey: 'Pay3W7Nfaa3bLG9C9ZXTwMgS7zMD68d21987-8919-4d4e-8062-52c8293250cb',
          //对话框
          updateDialog : {
            //是否显示更新描述
            appendReleaseDescription : true ,
            //更新描述的前缀。 默认为"Description"
            descriptionPrefix : "更新内容:" ,
            //强制更新按钮文字,默认为continue
            mandatoryContinueButtonLabel : "立即更新" ,
            //强制更新时的信息. 默认为"An update is available that must be installed."
            mandatoryUpdateMessage : "必须更新后才能使用" ,
            //非强制更新时,按钮文字,默认为"ignore"
            optionalIgnoreButtonLabel : '稍后' ,
            //非强制更新时,确认按钮文字. 默认为"Install"
            optionalInstallButtonLabel : '后台更新' ,
            //非强制更新时,检查到更新的消息文本
            optionalUpdateMessage : '有新版本了,是否更新?' ,
            //Alert窗口的标题
            title : '更新提示'
          },
       });
    }
    ...
}
export default App;
用户点击检查更新按钮

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

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.");
            }
        );
    }
 }
CodePush高阶组件实现更新
import codePush from "react-native-code-push";

class App extends Component {
}

export default codePush(App);

更新时机:

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

七、提交更新包

我们可以通过code-push release-react命令发布更新包。多次发布更新包也是如此。

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

注意: CodePush默认是更新Staging 环境的,如果发布生产环境的更新包,需要指定--d参数:--d Production,如果发布的是强制更新包,需要加上 --m true强制更新

//例如
$ code-push release-rereact CodePushDemo_IOS ios --t 1.0.0 --des "本次更新了hello world!" --m true

CodePush Install.jpeg

查询提交过哪些更新包:

  • 查询Production $ code-push deployment history CodePushDemo_IOS Production
  • 查询Staging $ code-push deployment history projectName Staging

八、参考链接

参考链接一

参考链接二

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.05.30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • CodePush热更新接入-iOS
    • 一、CodePush CLI安装
      • 二、注册 CodePush账号
        • 三、在CodePush服务器注册App
          • 四、RN代码中集成CodePush
            • 五、配置iOS工程
              • 六、index.js文件配置
                • 七、提交更新包
                  • 八、参考链接
                  领券
                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档