RN下CodePush配置與簡單使用

在此簡單記錄下CodePush的使用，以備以后使用。

環(huán)境版本

react-native：0.61
react-native-code-push：6.2.0

CodePush安裝

CodePush官方使用詳情

  1. 安裝App Center CLI
// 打開終端，直接輸入以下代碼，安裝App Center CLI
npm install -g appcenter-cli
  1. 登錄現(xiàn)有的CodePush帳戶或創(chuàng)建新的App Center帳戶
appcenter login

此命令將啟動一個(gè)瀏覽器窗口，要求您使用GitHub或Microsoft帳戶進(jìn)行身份驗(yàn)證。它將生成一個(gè)訪問密鑰，您必須將其復(fù)制/粘貼到CLI中（它將提示您輸入密碼）。

  • 其他相關(guān)命令
// 退出登錄
appcenter logout

// 查看賬戶信息
appcenter profile list
  1. 在App Center創(chuàng)建應(yīng)用
// appDisplayName：創(chuàng)建的應(yīng)用名稱
// operatingSystem：iOS或者Android操作系統(tǒng)
appcenter apps create -d <appDisplayName> -o <operatingSystem>  -p React-Native

// 針對iOS和Android單獨(dú)創(chuàng)建應(yīng)用 --
// 1、創(chuàng)建iOS應(yīng)用
appcenter apps create -d MyApp-iOS -o iOS -p React-Native
// 2、創(chuàng)建Android應(yīng)用
appcenter apps create -d MyApp-Android -o Android -p React-Native
  • 其他相關(guān)命令
// 查詢賬號下的所有應(yīng)用
appcenter apps list
  1. 給應(yīng)用配置環(huán)境（開發(fā)、生產(chǎn)）
// ownerName：用戶名稱
// appName：創(chuàng)建的應(yīng)用名稱

// 配置開發(fā)環(huán)境
appcenter codepush deployment add -a <ownerName>/<appName> Staging
// 配置生產(chǎn)環(huán)境
appcenter codepush deployment add -a <ownerName>/<appName> Productionn
  • 其他相關(guān)命令
// ownerName：用戶名稱
// appName：創(chuàng)建的應(yīng)用名稱

// 刪除應(yīng)用的開發(fā)環(huán)境
appcenter codepush deployment remove -a <ownerName>/<appName> Staging
// 刪除應(yīng)用的生產(chǎn)環(huán)境
appcenter codepush deployment remove -a <ownerName>/<appName> Production

// appName：應(yīng)用名稱
// 查看該應(yīng)用下的所有配置環(huán)境
code-push deployment ls <appName> -k

以上是在App Center配置相關(guān)內(nèi)容的所有命令
除了使用指令來創(chuàng)建配置應(yīng)用外，還可以直接去App Center進(jìn)行配置查看

AppCenter可視化操作

AppCenter官方地址

  1. 點(diǎn)擊右上角Add new按鈕選擇Add new app創(chuàng)建新應(yīng)用，然后根據(jù)提示框進(jìn)行填寫內(nèi)容。
    注意：此處填寫，還是 建議將iOS和Android分開創(chuàng)建，方便后期管理。
  2. 點(diǎn)擊創(chuàng)建好的應(yīng)用，進(jìn)入配置界面（此處以“Test-iOS”作為例子）。點(diǎn)擊左側(cè)菜單欄，選擇Distribute，選擇CodePush。
    2.jpeg
  3. 配置開發(fā)環(huán)境。點(diǎn)擊Create standard deployments按鈕后，將自動給該應(yīng)用創(chuàng)建好Staging和Production兩種環(huán)境。
  4. 查看、修改、刪除配置環(huán)境。點(diǎn)擊右上角??按鈕，可以查看當(dāng)前應(yīng)用的兩種配置環(huán)境。點(diǎn)擊配置環(huán)境后的...可以修改和刪除對應(yīng)的環(huán)境。

App Center的基本使用就這些，詳細(xì)的其他使用方法，可以根據(jù)界面提示自我探索。

RN應(yīng)用中配置CodePush

此處直接進(jìn)行多環(huán)境配置

  1. 項(xiàng)目安裝配置CodePush三方庫
npm install --save react-native-code-push
  1. 將CodePush與組件綁定使用
import codePush from "react-native-code-push";

class MyApp extends Component {
  // ...
}

let codePushOptions = {
  // 何時(shí)檢查更新（ON_APP_START:程序啟動  ON_APP_RESUME:程序從后臺進(jìn)入前臺  MANUAL:手動控制）
  checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
  // 何時(shí)安裝（ON_NEXT_RESTART:下次程序啟動  ON_NEXT_RESUME:下次程序從后臺進(jìn)入前臺  ON_NEXT_SUSPEND:在后臺更新  IMMEDIATE:立即更新，并啟動程序）
  installMode: codePush.InstallMode.IMMEDIATE,
  // 表示重啟程序之前，在后臺呆的最短時(shí)間
  minimumBackgroundDuration: 0,
  // 強(qiáng)制更新，并啟動
  mandatoryInstallMode: codePush.InstallMode.IMMEDIATE,
  // 更新時(shí)候的提示更新框
  updateDialog: {
    // 標(biāo)題
    title: '發(fā)現(xiàn)新版本',

    // 確認(rèn)按鈕標(biāo)題
    optionalInstallButtonLabel: '更新',
    // 忽略按鈕標(biāo)題
    optionalIgnoreButtonLabel: '忽略',
    // 非強(qiáng)制更新情況下，提示框內(nèi)容
    optionalUpdateMessage: '有新內(nèi)容，是否需要更新？',

    // 強(qiáng)制更新按鈕標(biāo)題
    mandatoryContinueButtonLabel: '立即更新',
    // 強(qiáng)制更新情況下，提示框內(nèi)容
    mandatoryUpdateMessage: '有新內(nèi)容，請立即更新',

    // 是否將版本描述添加在提示框中
    appendReleaseDescription: true,
    // 添加的描述前綴
    descriptionPrefix: '更新內(nèi)容：',
  }
};

export default codePush(codePushOptions)(App);
iOS中配置環(huán)境

設(shè)置 iOS GitHub地址
配置iOS環(huán)境GitHub地址

  1. 打開AppDelegate.m文件，添加頭文件
#import <CodePush/CodePush.h>
  1. 替換捆綁JS文件，只有在release狀態(tài)下，才會調(diào)用CodePush服務(wù)器中的代碼
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  #if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  #else
    return [CodePush bundleURL];
  #endif
}
  1. 添加Staging配置環(huán)境。用Xcode打開ios項(xiàng)目，選中項(xiàng)目，點(diǎn)擊PROJECT下的項(xiàng)目名，點(diǎn)擊菜單欄info，找到Configurations項(xiàng)點(diǎn)擊+選擇Duplicate "Release" Configuration進(jìn)行添加
    4-3.jpeg

    注意：上圖是已經(jīng)添加過Staging配置環(huán)境的
  2. 配置多環(huán)境的秘鑰。選擇info旁邊的Build Settings按鈕，點(diǎn)擊菜單欄中+按鈕，選擇Add User-Defined Setting進(jìn)行添加
    4-4.jpeg
  3. 配置User-Defined，一共需要添加2項(xiàng)自定義配置。
  • 第一個(gè)配置，名稱設(shè)置為CODEPUSH_KEY，將項(xiàng)目在CodePush中的Staging秘鑰對應(yīng)到Staging環(huán)境中，Production秘鑰對應(yīng)到Release環(huán)境中，Debug環(huán)境中置空。
  • 第二個(gè)配置，名稱設(shè)置為CONFIGURATION_BUILD_DIR，Staging環(huán)境中配置$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)，Release和Debug環(huán)境中配置$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)。
    注意：第二個(gè)配置，需要先配置三個(gè)環(huán)境值，再設(shè)置名稱，否則Xcode會閃退，因?yàn)?code>CONFIGURATION_BUILD_DIR對應(yīng)下的值不能為空
    4-5.png
  1. 配置Info.plist，打開項(xiàng)目的Info.plist添加一組值，名為CodePushDeploymentKey，值為$(CODEPUSH_KEY)
    4-6.png
  2. 執(zhí)行pod install
  3. 運(yùn)行項(xiàng)目。用Xcode打開項(xiàng)目，選擇對應(yīng)的環(huán)境運(yùn)行，如果運(yùn)行顯示成功，則項(xiàng)目配置完成。
    注意：如果選擇Staging運(yùn)行報(bào)錯(cuò)，則可以先運(yùn)行Release環(huán)境，等Release狀態(tài)運(yùn)行成功后，再切換為Staging來運(yùn)行，目前不知道為什么會這樣。
  4. 進(jìn)行測試，進(jìn)行更新。關(guān)閉運(yùn)行的應(yīng)用，此時(shí)相當(dāng)于在模擬器上打包了一個(gè)對應(yīng)環(huán)境的應(yīng)用程序。打開終端，進(jìn)入RN應(yīng)用的根目錄，輸入以下命令進(jìn)行更新提交。提交后，點(diǎn)擊模擬器上安裝的應(yīng)用，進(jìn)行查看熱更新情況。
// ownerName：賬戶名稱

// 提交Staging環(huán)境下的代碼
appcenter codepush release-react -a <ownerName>/App-iOS  -d Staging
// 提交Production環(huán)境下的代碼
appcenter codepush release-react -a <ownerName>/App-iOS -d Production
// 強(qiáng)制更新
appcenter codepush release-react -a <ownerName>/App-iOS -m
// 添加更新說明
appcenter codepush release-react -a <ownerName>/App-iOS --description "修改bug"
Android中配置環(huán)境

設(shè)置 Android GitHub地址
配置Android環(huán)境GitHub地址

  1. 在android/settings.gradle文件中添加下列代碼
include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')
  1. 在android/app/build.gradle文件中添加下列代碼
  • 添加codepush.gradle 
...
apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
...
  • 在android { buildTypes {} }中，給配置環(huán)境添加CodePush的秘鑰
android {
    ...
    buildTypes {
        debug {
            ...
            // 注意：不應(yīng)該在Debug模式下測試CodePush更新功能，因?yàn)檫@會被RN的程序所覆蓋
            resValue "string", "CodePushDeploymentKey", '""'
            ...
        }

        releaseStaging {
            ...
            // StagingKey是CodePush處申請的Staging狀態(tài)的下的秘鑰
            resValue "string", "CodePushDeploymentKey", '"StagingKey"'

            // Note: It is a good idea to provide matchingFallbacks for the new buildType you create to prevent build issues
            // Add the following line if not already there
            matchingFallbacks = ['release']
            ...
        }

        release {
            ...
            // ProductionKey是CodePush處申請的Production狀態(tài)的下的秘鑰
            resValue "string", "CodePushDeploymentKey", '"ProductionKey"'
            ...
        }
    }
    ...
}

補(bǔ)充：獲取Android應(yīng)用配置環(huán)境的key命令：code-push deployment ls <appName> -k

  1. 更新MainApplication.java文件
...
// 1. 導(dǎo)入插件
import com.microsoft.codepush.react.CodePush;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...

        // 2. 重寫getJSBundleFile方法，讓CodePush確定從App哪里獲取JS包
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}
  1. 打包應(yīng)用，測試CodePush更新功能（同iOS大同小異）。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

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