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
查看是否已登錄，如果出現(xiàn)[Error]，表示未登錄

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

在網(wǎng)頁中獲取token并復制到命令行進行登錄，默認賬號：admin 密碼：123456

獲取token

復制token登錄

查看已注冊的項目

npx code-push app list

如果是新項目則先添加，同一個RN項目IOS和Android需要各添加一個

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

命名規(guī)范：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：預發(fā)布，示例：

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的環(huán)境需要與以下部署命令的一致，RNProject中，默認debug版使用Staging，release版使用Production）。
更推薦的做法，是不使用strings.xml定義，而將key使用gradle配置

android {
    ...
    buildTypes {
        debug {
            ...
            // CodePush更新不應在開發(fā)時使用，因為codepush會覆蓋rn開發(fā)包。但是CodePush sdk會在所有模式下都去檢查更新，因此需要提供key。XXProject中，直接使用Staging環(huán)境的key
            resValue "string", "CodePushDeploymentKey", '"yTA5ETSdmcqHBLEBRdP2lfYf0Qdh4ksvOXqog"'
            ...
        }
        releaseStaging {
            ...
            // 預發(fā)布環(huán)境Staging的key，XXProject由于歷史原因，直接使用了debug
            resValue "string", "CodePushDeploymentKey", '"yTA5ETSdmcqHBLEBRdP2lfYf0Qdh4ksvOXqog"'
            // matchingFallbacks表示找不到的依賴使用release類似配置
            matchingFallbacks = ['release']
            ...
        }
        release {
            ...
            // 正式環(huán)境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端打包

構(gòu)建 JS Bundle

  1. 在android工程中創(chuàng)建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 [參數(shù)]
  構(gòu)建 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，需要手動指定這個參數(shù)。例: /tmp/groups.map
    --assets-dest [string]       打包時圖片資源的存儲路徑
    --verbose                    顯示打包過程
    --reset-cache                移除緩存文件
    --config [string]            命令行的配置文件路徑
  1. index.android.bundle里面包含了所有js代碼（RN源碼、第三方庫代碼和自己的業(yè)務代碼）

構(gòu)建APK

  1. 從RN項目根目錄切換到android目錄
cd android
  1. 依次執(zhí)行Android打包命令(示例：windows電腦)
// 清除緩存
./gradlew clean
// 打包
./gradlew assembleRelease
  1. 加固后可上線到各應用市場

CodePush熱更新發(fā)布

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

參數(shù)介紹：
--t 1.0.0 指定發(fā)布的熱更新版本
--dev false 是否是測試版
--d Production 發(fā)布環(huán)境
--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
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容