CodePushServer使用

Code Push 集成步骤

安装code-push-cli脚手架,注意要使用2.1.9的版本否则登录失败
npm install -g code-push-cli@2.1.9

登录code-push-server,先使用
npx code-push whoami
查看是否已登录,如果出现[Error],表示未登录

npx code-push login http://<IP>:3000

在网页中获取token并复制到命令行进行登录,默认账号:admin 密码:123456

获取token

复制token登录

查看已注册的项目

npx code-push app list

如果是新项目则先添加,同一个RN项目IOS和Android需要各添加一个

npx code-push app add <app name> <platform> react-native

命名规范:XXX-Android 或 XXX-IOS, 示例:

npx code-push app add FirstRNProject-Android android react-native

npx code-push app add FirstRNProject-IOS ios react-native

查看app key

npx code-push deployment list <appname> -k

Production:正式,Staging:预发布,示例:

Android 端接入

在RN项目根目录安装react-native-code-push

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

接入react-native-code-push组件。在RNProject/android/settings.gradle 文件末尾添加:

include ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

在RNProject/android/app/build.gradle中添加:

apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

部署key的环境需要与以下部署命令的一致,RNProject中,默认debug版使用Staging,release版使用Production)。
更推荐的做法,是不使用strings.xml定义,而将key使用gradle配置

android {
    ...
    buildTypes {
        debug {
            ...
            // CodePush更新不应在开发时使用,因为codepush会覆盖rn开发包。但是CodePush sdk会在所有模式下都去检查更新,因此需要提供key。XXProject中,直接使用Staging环境的key
            resValue "string", "CodePushDeploymentKey", '"yTA5ETSdmcqHBLEBRdP2lfYf0Qdh4ksvOXqog"'
            ...
        }
        releaseStaging {
            ...
            // 预发布环境Staging的key,XXProject由于历史原因,直接使用了debug
            resValue "string", "CodePushDeploymentKey", '"yTA5ETSdmcqHBLEBRdP2lfYf0Qdh4ksvOXqog"'
            // matchingFallbacks表示找不到的依赖使用release类似配置
            matchingFallbacks = ['release']
            ...
        }
        release {
            ...
            // 正式环境Production的key
            resValue "string", "CodePushDeploymentKey", '"x4Erpbv7suZKbPUAbGdZThWd5TVO4ksvOXqog"'
            ...
        }
    }
    ...
}

将所需CodePushServerUrl放到/android/app/src/main/res/values/strings.xml

<resources>
    ...
    <string moduleConfig="true" name="CodePushServerUrl">http://192.168.1.6:3000/</string>
    ...
</resources>

在MainApplication添加

注意: RN 0.6+版本使用的Auto link引入的CodePush没有提供修改CodePushServerUrl的API,所以在getPackages()方法中需要先移除Auto link CodePush包,然后手动添加

1. // 引入CodePush包
import com.microsoft.codepush.react.CodePush;
...
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    2. // 重写getJSBundleFile方法
    @Override
    protected String getJSBundleFile() {
        return CodePush.getJSBundleFile();
    }

    @Override
    public boolean getUseDeveloperSupport() {
        return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
        @SuppressWarnings("UnnecessaryLocalVariable")
        List<ReactPackage> packages = new PackageList(this).getPackages();
        // 3. 先移除auto link的code push包,再手动添加
        for (ReactPackage rp : packages) {
            if (rp instanceof CodePush) {
                packages.remove(rp);
                break;
            }
        }
        packages.add(new CodePush(getResources().getString(R.string.CodePushDeploymentKey)
                , getApplicationContext(), BuildConfig.DEBUG, getResources().getString(R.string.CodePushServerUrl)));
        return packages;
    }

    @Override
    protected String getJSMainModuleName() {
        return "index";
    }
};
...

React Native 接入

接入Android与IOS原生SDK后,需要配置react native以确定codepush更新检查与安装时机

主模块添加

//设置检查更新的频率
//ON_APP_RESUME APP恢复到前台的时候
//ON_APP_START APP开启的时候
//MANUAL 手动检查
let codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL }

App = codePush(codePushOptions)(App)

React Native 打包

Android 和 IOS 分开打包

Android端打包

构建 JS Bundle

  1. 在android工程中创建assets/index.android.bundle文件,已存在则忽略

  2. 在RN根目录输入打bundle包命令,示例:

npx react-native bundle --entry-file index.js --platform android --dev false --bundle-output ./android/app/src/main/assets/index.android.bundle
  1. 命令介绍
react-native bundle [参数]
  构建 js 离线包

  Options:

    -h, --help                   输出如何使用的信息
    --entry-file <path>          RN入口文件的路径, 绝对路径或相对路径
    --platform [string]          ios 或 andorid
    --transformer [string]       Specify a custom transformer to be used
    --dev [boolean]              如果为false, 警告会不显示并且打出的包的大小会变小
    --prepack                    当通过时, 打包输出将使用Prepack格式化
    --bridge-config [string]     使用Prepack的一个json格式的文件__fbBatchedBridgeConfig 例如: ./bridgeconfig.json
    --bundle-output <string>     打包后的文件输出目录, 例: ./android/app/src/main/assets/index.android.bundle
    --bundle-encoding [string]   打离线包的格式 可参考链接https://nodejs.org/api/buffer.html#buffer_buffer.
    --sourcemap-output [string]  生成Source Map,但0.14之后不再自动生成source map,需要手动指定这个参数。例: /tmp/groups.map
    --assets-dest [string]       打包时图片资源的存储路径
    --verbose                    显示打包过程
    --reset-cache                移除缓存文件
    --config [string]            命令行的配置文件路径
  1. index.android.bundle里面包含了所有js代码(RN源码、第三方库代码和自己的业务代码)

构建APK

  1. 从RN项目根目录切换到android目录
cd android
  1. 依次执行Android打包命令(示例:windows电脑)
// 清除缓存
./gradlew clean
// 打包
./gradlew assembleRelease
  1. 加固后可上线到各应用市场

CodePush热更新发布

npx code-push release-react <appname> <platform> --t 1.0.0 --dev false --d Production --des "版本描述" --m true

参数介绍:
--t 1.0.0 指定发布的热更新版本
--dev false 是否是测试版
--d Production 发布环境
--des "" 版本描述
--m true 是否强更

示例:

npx code-push release-react first-rnapp-android android --t 1.0.0 --dev false --d Production --des "版本描述" --m true
npx code-push release-react first-rnapp-android android --t 1.0.0 --dev false --d Staging --des "版本描述" --m true

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,830评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,992评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,875评论 0 331
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,837评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,734评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,091评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,550评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,217评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,368评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,027评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,623评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2 341

推荐阅读更多精彩内容