设为首页收藏本站

react native【免费】VIP视频教程 rn开发者交流论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1644|回复: 2

[课堂笔记] 65、手把手教React Native实战之热更新部署-CodePush-适配Android_...

[复制链接]

401

主题

762

帖子

6761

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6761
发表于 2016-8-16 09:32:38 | 显示全部楼层 |阅读模式
#65、手把手教React Native实战之热更新部署-CodePush-适配Android

##CodePush简介

CodePush是微软提供的一套用于热更新 React Native 和 Cordova 应用的服务。CodePush 是提供给 React Native 和 Cordova 开发者直接部署移动应用更新给用户设备的云服务。CodePush 作为一个中央仓库,开发者可以推送更新 (JS, HTML, CSS and images),应用可以从客户端 SDK 里面查询更新。CodePush 可以让应用有更多的可确定性,也可以让你直接接触用户群。在修复一些小问题和添加新特性的时候,不需要经过二进制打包,可以直接推送代码进行实时更新。

##安装CodePush客户端与注册账号

npm install -g code-push-cli

code-push -v查看版本

code-push register 注册账号 授权登陆并得到access key

code-push login 登陆

code-push logout 注销

code-push access-key ls 列出登陆的token

code-push access-key rm <accessKye> 删除某个 access-key

##往CodePush服务器端添加app

code-push app add [app名称]

code-push app remove [app名称]

code-push app rename [app名称]

code-push app list 列出账号下的所有app

注意:一个app名字对应两个部署环境:生产环境Production  模拟或演示环境Staging

##Android集成CodePush、打包、发布更新

参考:https://github.com/Microsoft/react-native-code-push

npm install --save react-native-code-push@latest

查询部署环境的key也是一个app对应两个:(Deployment Key)

code-push deployment ls <appName> -k

RN的v0.27+则:react-native link react-native-code-push 否则:rnpm link react-native-code-push

报错:Error executing task com.intellij.execution.impl.ExecutionManagerImpl$5@284c496c: Unsupported method: AndroidArtifact.getInstantRun().
The version of Gradle you connect to does not support that method.
需要修改gradle:classpath 'com.android.tools.build:gradle:2.1.0'

Plugin Usage(使用CodePush更新策略)

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

MyApp = codePush(MyApp);

MyApp = codePush(codePushOptions)(MyApp);

Redux Saga for CodePush:react-native-code-push-saga

Releasing Updates发布更新:code-push release-react <appName> <platform> 自动打包你的js和资源文件成bundle并且上传发布到CodePush的服务器

也可以自己打包:react-native bundle --platform 平台 --entry-file 启动文件 --bundle-output 打包js输出文件 --assets-dest 资源输出目录 --dev 是否调试

例如:react-native bundle --platform android --entry-file index.android.js --bundle-output ./bundles/index.android.bundle --dev false

也可以自己上传:code-push release <应用名称> <Bundles所在目录> <对应的应用版本> --deploymentName: 更新环境 --description: 更新描述  --mandatory: 是否强制更新  

例如:code-push release CodePushDemo ./bundles/index.android.bundle 1.2.0 --deploymentName Staging  --description "1.支持文章缓存。" --mandatory true

##Multi-Deployment Testing 多环境部署测试的步骤

客户端的回滚机制可以导致服务器端的回滚:code-push rollback

1.发布更新到Staging环境:code-push release-react <appName> <platform>

2.运行Staging版app,同步更新,验证其是否正常工作

3.从演示环境推进到生产环境:code-push promote

4.运行Production版app,同步更新,验证其是否正常工作

我们注意到第2步与第4步,需要生成两种app,其实是麻烦的,我们可以整合,但是却是分平台的,这节课以Android为例

buildTypes {
        debug {
            ...
            buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_STAGING_KEY>"'
            ...
        }

        release {
            ...
            buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_PRODUCTION_KEY>"'
            ...
        }
    }

new CodePush(BuildConfig.CODEPUSH_KEY, MainApplication.this, BuildConfig.DEBUG);

配置之后,当你调试的时候更新用到的是Staging的key,当签名发正式包的时候用的就是Production的Key

默认情况下,react-native run android 用到的是Debug,所以是Staging,如果你想测试正式的版本包,则运行react-native run-android --variant release

CodePush插件是由两部分组成:1、js模块  2、原生api

下面列出CodePush一些常用的用法,你可以选择一个或者组合使用:

1.Silent sync on app start

2.Silent sync everytime the app resumes

3.Interactive

4.Log/display progress

// Make use of the event hooks to keep track of
// the different stages of the sync process.
class MyApp extends Component {
    codePushStatusDidChange(status) {
        switch(syncStatus) {
            case codePush.SyncStatus.CHECKING_FOR_UPDATE:
                console.log("Checking for updates.");
                break;
            case codePush.SyncStatus.DOWNLOADING_PACKAGE:
                console.log("Downloading package.");
                break;
            case codePush.SyncStatus.INSTALLING_UPDATE:
                console.log("Installing update.");
                break;
            case codePush.SyncStatus.UP_TO_DATE:
                console.log("Installing update.");
                break;
            case codePush.SyncStatus.UPDATE_INSTALLED:
                console.log("Update installed.");
                break;
        }
    }

    codePushDownloadDidProgress(progress) {
        console.log(progess.receivedBytes + " of " + progress.totalBytes + " received.");
    }
}
MyApp = codePush(MyApp);

CodePushOptions选项对象可以自定义

报错:The uploaded package is identical to the contents of the specified deployment's current release  表示:已经存在与这次上传完全一样的bundle(对应一个版本有两个bundle的md5完全一样),那么CodePush会拒绝此次更新。

看调试效果:程序员视角、终端用户视角


##65、配套视频(下载地址):http://www.reactnative.vip/thread-339-1-1.html

react native vip论坛免费发布【手把手教react native实战开发】视频教程,立志于打造全互联网最全面最详细最易懂的React Native
开发视频教程,Facebook已经在多项产品中使用了React Native,并且将持续地投入建设,让我们引领react native开发的潮流!
回复

使用道具 举报

0

主题

147

帖子

326

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
326
发表于 2016-12-28 22:38:49 | 显示全部楼层
快到碗里来
回复 支持 反对

使用道具 举报

4

主题

1461

帖子

3022

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
3022
发表于 2017-12-15 14:05:05 | 显示全部楼层
回复回复回复回复
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|ReactNative Inc.    

GMT+8, 2018-4-24 04:53 , Processed in 0.144708 second(s), 28 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表