CodePush熱更新組件詳細接入教程

来源:https://www.cnblogs.com/guangqiang/archive/2018/09/05/9589410.html
-Advertisement-
Play Games

CodePush熱更新組件詳細接入教程 什麼是CodePush CodePush是一個微軟開發的雲伺服器。通過它，開發者可以直接在用戶的設備上部署手機應用更新。CodePush相當於一個中心倉庫，開發者可以推送當前的更新（包括JS/HTML/CSS/IMAGE等）到CoduPush，然後應用將會查詢 ...


CodePush熱更新組件詳細接入教程

什麼是CodePush

CodePush是一個微軟開發的雲伺服器。通過它，開發者可以直接在用戶的設備上部署手機應用更新。CodePush相當於一個中心倉庫，開發者可以推送當前的更新（包括JS/HTML/CSS/IMAGE等）到CoduPush，然後應用將會查詢是否有更新。

接入流程

  • 安裝 CodePush CLI
  • 註冊 CodePush賬號
  • 在CodePush伺服器註冊App
  • RN代碼中集成CodePush
  • 原生應用中配置CodePush
  • 發佈更新的版本

CodePush 接入示例Demo地址：https://github.com/guangqiang-liu/CodePushDemo

1、安裝 CodePush CLI

安裝CodePush指令，直接在終端上輸入如下命令即可，註意：這個CodePush指令只需要全局安裝一次即可，如果第一次安裝成功了，那後面就不在需要安裝

$ npm install -g code-push-cli

image
image

2、註冊 CodePush賬號

註冊CodePush賬號也很簡單，同樣是只需簡單的執行下麵的命令，同樣這個註冊操作也是全局只需要註冊一次即可

$ code-push register

註意：當執行完上面的命令後，會自動打開一個授權網頁，讓你選擇使用哪種方式進行授權登錄，這裡我們統一就選擇使用GitHub即可

image
image

當註冊成功後，CodePush會給我們一個key

image
image

我們直接複製這個key，然後在終端中將這個key填寫進去即可，填寫key登錄成功顯示效果如下

image
image

我們使用下麵的命令來驗證我的登錄是否成功

$ code-push login

image
image

CodePush註冊登錄相關命令：

  • code-push login 登陸
  • code-push loout 註銷
  • code-push access-key ls 列出登陸的token
  • code-push access-key rm <accessKye> 刪除某個 access-key

3、在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平臺應用

$ code-push app add iOSRNHybrid ios react-native

image
image

添加Android平臺應用

$ code-push app add iOSRNHybridForAndroid Android react-native
image
image

我們可以輸入如下命令來查看我們剛剛添加的App

$ code-push app list

image
image

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的所有權轉移到另外一個賬號

4、RN代碼中集成CodePush

首先我們需要安裝CodeoPush組件，然後通過link命令添加原生依賴，最後在RN根組件中添加熱更新邏輯代碼

安裝組件

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

image
image

添加原生依賴，這裡添加依賴我們使用自動添加依賴的方式

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

image
image

我們在RN項目的根組件中添加熱更新邏輯代碼如下

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

import CodePush from "react-native-code-push"; // 引入code-push

let codePushOptions = {
  //設置檢查更新的頻率
  //ON_APP_RESUME APP恢復到前臺的時候
  //ON_APP_START APP開啟的時候
  //MANUAL 手動檢查
  checkFrequency : CodePush.CheckFrequency.ON_APP_RESUME
};

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};

class App extends Component<Props> {

  //如果有更新的提示
  syncImmediate() {
    CodePush.sync( {
          //安裝模式
          //ON_NEXT_RESUME 下次恢復到前臺時
          //ON_NEXT_RESTART 下一次重啟時
          //IMMEDIATE 馬上更新
          installMode : CodePush.InstallMode.IMMEDIATE ,
          //對話框
          updateDialog : {
            //是否顯示更新描述
            appendReleaseDescription : true ,
            //更新描述的首碼。 預設為"Description"
            descriptionPrefix : "更新內容：" ,
            //強制更新按鈕文字，預設為continue
            mandatoryContinueButtonLabel : "立即更新" ,
            //強制更新時的信息. 預設為"An update is available that must be installed."
            mandatoryUpdateMessage : "必須更新後才能使用" ,
            //非強制更新時，按鈕文字,預設為"ignore"
            optionalIgnoreButtonLabel : '稍後' ,
            //非強制更新時，確認按鈕文字. 預設為"Install"
            optionalInstallButtonLabel : '後臺更新' ,
            //非強制更新時，檢查到更新的消息文本
            optionalUpdateMessage : '有新版本了，是否更新？' ,
            //Alert視窗的標題
            title : '更新提示'
          } ,
        } ,
    );
  }

  componentWillMount() {
    CodePush.disallowRestart();//禁止重啟
    this.syncImmediate(); //開始檢查更新
  }

  componentDidMount() {
    CodePush.allowRestart();//在載入完了，允許重啟
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>

        <Text style={styles.instructions}>
          這是更新的版本
        </Text>
      </View>
    );
  }
}

// 這一行必須要寫
App = CodePush(codePushOptions)(App)

export default App

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
})

5、原生應用中配置CodePush

這裡原生應用中配置CodePush我們需要分別配置iOS平臺和Android平臺

配置iOS平臺

  • 使用Xcode打開項目，Xcode的項目導航視圖中的PROJECT下選擇你的項目，選擇Info頁簽 ，在Configurations節點下單擊 + 按鈕 ，選擇Duplicate "Release Configaration，輸入Staging
image
image
  • 選擇Build Settings tab，搜索Build Location -> Per-configuration Build Products Path -> Staging，將之前的值：$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME) 改為：$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)
image
image
  • 選擇Build Settings tab，點擊 + 號，選擇Add User-Defined Setting，將key設置為CODEPUSH_KEY，Release 和 Staging的值為前面創建的key，我們直接複製進去即可
image
image
  • 打開Info.plist文件，在CodePushDeploymentKey中輸入$(CODEPUSH_KEY)，並修改Bundle versions為三位
image
image

iOS平臺CodePush環境集成完畢

配置Android平臺

6、發佈更新的版本

在使用之前需要考慮的是檢查更新時機，更新是否強制，更新是否要求即時等

更新時機

一般常見的應用內更新時機分為兩種，一種是打開App就檢查更新，一種是放在設置界面讓用戶主動檢查更新並安裝

  • 打開APP就檢查更新

    最為簡單的使用方式在React Natvie的根組件的componentDidMount方法中通過
    codePush.sync()（需要先導入codePush包：import codePush from 'react-native-code-push'）方法檢查並安裝更新，如果有更新包可供下載則會在重啟後生效。不過這種下載和安裝都是靜默的，即用戶不可見。如果需要用戶可見則需要額外的配置。具體可以參考codePush官方API文檔，部分代碼，完整代碼請參照文檔上面

    codePush.sync({
  updateDialog: {
    appendReleaseDescription: true,
    descriptionPrefix:'\n\n更新內容：\n',
    title:'更新',
    mandatoryUpdateMessage:'',
    mandatoryContinueButtonLabel:'更新',
  },
  mandatoryInstallMode:codePush.InstallMode.IMMEDIATE,
  deploymentKey: CODE_PUSH_PRODUCTION_KEY,
});

    上面的配置在檢查更新時會彈出提示對話框， mandatoryInstallMode表示強制更新，appendReleaseDescription表示在發佈更新時的描述會顯示到更新對話框上讓用戶可見

  • 用戶點擊檢查更新按鈕

    在用戶點擊檢查更新按鈕後進行檢查，如果有更新則彈出提示框讓用戶選擇是否更新，如果用戶點擊立即更新按鈕，則會進行安裝包的下載（實際上這時候應該顯示下載進度，這裡省略了）下載完成後會立即重啟並生效（也可配置稍後重啟），部分代碼如下

    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.");
            }
        );
    }
 }

更新是否強制

如果是強制更新需要在發佈的時候指定，發佈命令中配置--m true

更新是否要求即時

在更新配置中通過指定installMode來決定安裝完成的重啟時機，亦即更新生效時機

  • codePush.InstallMode.IMMEDIATE ：安裝完成立即重啟更新
  • codePush.InstallMode.ON_NEXT_RESTART ：安裝完成後會在下次重啟後進行更新
  • codePush.InstallMode.ON_NEXT_RESUME ：安裝完成後會在應用進入後臺後重啟更新

如何發佈CodePush更新包

在將RN的bundle放到CodePush伺服器之前，我們需要先生成bundle，在將bundle上傳到CodePush

生成bundle

  • 我們在RN項目根目錄下線創建bundle文件夾，再在bundle中創建創建ios和android文件夾，最後將生成的bundle文件和資源文件拖到我們的項目工程中
image
image
  • 生成bundle命令 react-native bundle --platform 平臺 --entry-file 啟動文件 --bundle-output 打包js輸出文件 --assets-dest 資源輸出目錄 --dev 是否調試
$ react-native bundle --entry-file index.ios.js --bundle-output ./bundle/ios/main.jsbundle --platform ios --assets-dest ./bundle/ios --dev false
image
image
  • 將生成的bundle文件和資源文件拖到我們的項目工程
image
image

上傳bundle

  • 將生成的bundle文件上傳到CodePush，我們直接執行下麵的命令即可

$ code-push release-react <Appname> <Platform> --t <本更新包面向的舊版本號> --des <本次更新說明>

註意： CodePush預設是更新Staging 環境的，如果發佈生產環境的更新包，需要指定--d參數：--d Production，如果發佈的是強制更新包，需要加上 --m true強制更新

$ code-push release-react iOSRNHybrid ios --t 1.0.0 --dev false --d Production --des "這是第一個更新包" --m true

更新包上傳到CodePush伺服器成功後，效果圖如下：

 

image
image

查看發佈的歷史記錄，命令如下

查詢Production

$ code-push deployment history projectName Production

查詢Staging

$ code-push deployment history projectName Staging

image
image

對1.0.0版本的應用如何發佈第二個、第n個更新包

操作步驟和上面發佈第一個更新包流程一樣，我們任然先需要打出bundle包，將生成的bundle文件和資源文件拖到工程中，然後再將bundle發佈到CodePush

$ react-native bundle --entry-file index.ios.js --bundle-output ./bundle/ios/main.jsbundle --platform ios --assets-dest ./bundle/ios --dev false

$ code-push release-react iOSRNHybrid ios --t 1.0.0 --dev false --d Production --des "這是第二個更新包" --m true

註意事項

  • 當我們在生成更新包之前，我們需要先將JS代碼打包成bundle，然後拖拽到項目中，打包之前我們需要先自己建立輸出bundle的文件夾bundle -> ios，打bundle命令如下：
$ react-native bundle --entry-file index.ios.js --bundle-output ./bundle/ios/main.jsbundle --platform ios --assets-dest ./bundle/ios --dev false
image
image

  • 發佈更新包命令中的 -- t 對應的參數是和我們項目中的版本號一致的，這個不要誤理解為是更新包的版本號，例如項目中的版本號為1.0.0， 這時如果我們需要對這個1.0.0 版本的項目進行第一次熱更新，那麼命令中的 -- t 也為1.0.0，第二次熱更新任然為1.0.0

  • 項目的版本號需要改為三位的，預設是兩位的，但是CodePush需要三位數的版本號

  • 發佈更新應用時，應用的名稱必須要和之前註冊過的應用名稱一致

image
image
  • 創建應用時，信息要填寫正確
image
image
  • 當執行link，命令卡住不執行時，這時直接按回車鍵先ignore key即可
image
image
  • 還有最重要的一點需要註意的，就是打包證書環境要是良好的，證書不能報錯

福利時間

    • 作者React Native開源項目OneM地址(按照企業開發標準搭建框架完成開發的)：https://github.com/guangqiang-liu/OneM：歡迎小伙伴們 star
    • 作者簡書主頁：包含50多篇RN開發相關的技術文章http://www.jianshu.com/u/023338566ca5歡迎小伙伴們：多多關註，多多點贊
    • 作者React Native QQ技術交流群：620792950 歡迎小伙伴進群交流學習
    • 友情提示：在開發中有遇到RN相關的技術問題，歡迎小伙伴加入交流群（620792950），在群里提問、互相交流學習。交流群也定期更新最新的RN學習資料給大家，謝謝大家支持！

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 如何創建和還原SQL Server 2005資料庫？
    在還原SQL Server 2005資料庫文件之前，建議先把要還原的資料庫文件複製粘貼到某個盤的根目錄下，這樣便於一會兒找到相關的文件，比如C盤。 先打開SQL Server 2005的Microsoft SQL Server Management Studio並登錄進去，如圖所示： ① 創建資料庫 ...
  • MySQL查詢顯示連續的結果
    mysql中 對於查詢結果只顯示n條連續行的問題 在領扣上碰到的一個題目:求滿足條件的連續3行結果的顯示 X city built a new stadium, each day many people visit it and the stats are saved as these column ...
  • 計算結餘數
    有一個網友問及，在SQL中，計算每一筆的結餘數。他提供的截圖說明： 實現這個功能，關鍵是獲取前一筆記錄eqty欄位的值。 下麵Insus.NET嘗試寫一下。使用最簡單的方法，就是迴圈每一筆記錄。然後可以計算 qty加上前一筆的eqty。 創建一個臨時表存儲原數： CREATE TABLE #tt ( ...
  • mysql索引 b+樹
    1、B+樹基本概念 B+樹的語言定義比較複雜，簡單的說是為磁碟存取設計的平衡二叉樹 網上經典圖，黃色p1 p2 p3代表指針，藍色的代表磁碟，裡面包含數據項，第一層17,35，p1就代表小於17的，p2就代表17-35之間的，p3就代表大於35的，可是需要註意的是，第三層才是真實的數據，17、35都 ...
  • mysql出現ERROR1698(28000):Access denied for user root@localhost錯誤解決方法
    我的操作系統是ubuntu18.04，以下是我的mysql版本： 安裝完成後，登錄mysql的時候就出現瞭如下錯誤： 因為安裝的過程中沒讓設置密碼，可能密碼為空，但無論如何都進不去mysql。 那麼該怎麼做呢，接下來就將這個解決方法自我總結記錄一下。 step1：在ubuntu的terminal（也 ...
  • oracle官網下載教程
    1、百度搜索oracle   也可以直接點擊進入    "oracle官網"   或直接進入    "下載頁面" 2、選擇中文，看的更容易些 3、拉到最下麵，選擇所有下載和試用 4、選擇資料庫下載 5、點擊下載對應版本的 ...
  • 【乾貨】一文理解Druid原理架構（時序資料庫，不是ali的資料庫連接池）
    Druid.io（以下簡稱Druid）是2013年底開源出來的， 主要解決的是對實時數據以及較近時間的歷史數據的多維查詢提供高併發(多用戶)，低延時，高可靠性的問題。 Druid簡介： Druid是一個為在大數據集之上做實時統計分析而設計的開源數據存儲。這個系統集合了一個面向列存儲的層，一個分散式、 ...
  • Redis推薦閱讀筆記整理
    Herrt灬凌夜 https://www.cnblogs.com/wuyx/archive/2018/03.html ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類