2. 程式人生 > >CodePush熱更新組件詳細接入教程

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

阿新 • • 發佈：2018-09-05
plist文件 android平臺 cli all 最新版本 tran 註冊登錄 att 包括

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

2、註冊 CodePush賬號

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

$ code-push register

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

技術分享圖片
image

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

技術分享圖片
image

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

技術分享圖片
image

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

$ code-push login

技術分享圖片
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

添加Android平臺應用

$ code-push app add iOSRNHybridForAndroid Android react-native
技術分享圖片
image

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

$ code-push app list

技術分享圖片
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

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

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

技術分享圖片
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
  • 選擇Build Settings tab，搜索Build Location -> Per-configuration Build Products Path -> Staging，將之前的值：$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME) 改為：$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)
技術分享圖片
image
  • 選擇Build Settings tab，點擊 + 號，選擇Add User-Defined Setting，將key設置為CODEPUSH_KEY，Release 和 Staging的值為前面創建的key，我們直接復制進去即可
技術分享圖片
image
  • 打開Info.plist文件，在CodePushDeploymentKey中輸入$(CODEPUSH_KEY)，並修改Bundle versions為三位
技術分享圖片
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
  • 生成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
  • 將生成的bundle文件和資源文件拖到我們的項目工程
技術分享圖片
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

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

查詢Production

$ code-push deployment history projectName Production

查詢Staging

$ code-push deployment history projectName Staging

技術分享圖片
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

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

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

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

技術分享圖片
image
  • 創建應用時，信息要填寫正確
技術分享圖片
image
  • 當執行link，命令卡住不執行時，這時直接按回車鍵先ignore key即可
技術分享圖片
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學習資料給大家，謝謝大家支持！

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

相關推薦

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

plist文件 android平臺 cli all 最新版本 tran 註冊登錄 att 包括 CodePush熱更新組件詳細接入教程 什麽是CodePush CodePush是一個微軟開發的雲服務器。通過它，開發者可以直接在用戶的設備上部署手機應用更新。CodePush

IT輪子系列（七）——winform 版本更新組件

一個 closed version eight class 使用 splay end blank 前言 最近做了一個winform客戶端的項目，裏面有一個功能是版本更新。以前也有寫過，可忘了具體的邏輯。網上也有介紹用發布模式進行更新的，自己嘗試後沒有成功，提示“vba證書無

Cocos Creator 熱更新文件MD5計算和需要註意的問題

req ole build 完成後 return ted xe8 ati fse Creator的熱更新使用jsb。熱更新基本按照 http://docs.cocos.com/creator/manual/zh/advanced-topics/hot-update.html

Cordova - XCode10編譯熱更新插件錯誤解決方法！

orm 最終 插件 mes source std 錯誤提示 ica mru 操作系統：OSX10.14 XCode：10.1 熱更新插件：https://github.com/nordnet/cordova-hot-code-push 這個熱更新插件，在安卓下編譯，沒有問題

CodePush熱更新切換本地與微軟服務

之前測試code-push-server時候將服務端地址寫成本地了 操作程式碼： code-push login http://192.168.1.100:3000        此後很長一段時間沒有使用，並且本地服務程式碼、資料庫

CodePush 熱更新ReactNative之CodePush CLI操作

因為微軟開源的這個做的還不錯,所以拿來用了 1. CodePush CLI安裝 CodePush CLI安裝 : npm install -g code-push-cli 2. Account 賬號管理 註冊code-push reg

使用CodePush熱更新ReactNative JS程式碼

糾結了半天，不知要不要用ReactNative來開發新專案， 例如本地儲存，例如webView 裡面js 與native 的互動，例如地圖，糾結。。。 通過檢視文件，一一得到答案，還是很想用ReactNative做這個專案。 最吸引我的就是傳說中的熱更新。但是，，具

CodePush熱更新雲服務在Cordova專案中的應用實踐

前言 由於App每次升級打包的繁瑣性，專案中不想進行二次打包，這就需要實時更新的服務，探索了許久，發現CodePush滿足了我們的需求。 CodePush 是微軟開發的，可以實時更新 React Native 和 Cordova 應用。 CodeP

ReactNative系列之十八codepush熱更新

目前僅針對Android,iOS後續再補 1、簡介 codepush是微軟的一套熱升級解決實現，還有一種是reactnatie中文網上的react-native-pushy。這兩種方案我都試了下，推薦使用codepush, codepush在github上看文件感覺很麻煩，

codepush熱更新

初始化階段： 1:npm install -g code-push-cli 安裝客戶端 2:code-push -v 檢視是否安裝成功 3:code-push register 在co

YARN組件詳細介紹

數量 com 兩個 組件 yar 協商 con 包含 app 一、ResourceManager 內部主要有兩個組件： 　　1、Scheduler:這個組件完全是插拔式的，用戶可以根據自己的需求實現不同的調度器，目前YARN提供了FIFO、容量以及公平調度器。這

最新微信Tinker 熱修復平臺接入教程（超詳細）

目錄 Tinker接入文件 1 Tinker簡介 1.1Tinker優點 1.2 Tinker缺點 1.Tinker不支援修改AndroidManifest.xml，Tinker不支援新增四大元件(1.9.0支援新增非export的A

react-native熱更新之CodePush詳細介紹及使用方法

react-native熱更新之CodePush詳細介紹及使用方法 2018年03月04日 17:03:21 clf_programing 閱讀數：7979 標籤： react native熱更新code pus

Code Push 熱更新使用詳細說明和教程

CodePushCodePush是一個微軟開發的雲伺服器。通過它，開發者可以直接在使用者的裝置上部署手機應用更新。CodePush相當於一箇中心倉庫，開發者可以推送當前的更新（包括JS/HTML/CSS/IMAGE等）到CoduPush，然後應用將會查詢是否有更新。（歡迎關注我的gitHub）流程安裝 Cod

cakephp上傳組件教程

all res size att 文件的 相對路徑 clas 相同 rep 1.復制插件到相應目錄 Plugin和Vendor 2.添加加載文件至core.php require_once dirname(__DIR__) . ‘/Vendor/autoload.ph

React和Vue的組件更新比較

com under 維護 一次 ebo 隊列 一個隊列 節點 計算 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "Helvetica Neue"; color: #404040 } p.p2 { margin:

漁樂吧linux完整運營級組件架設教程

源碼 搭建 教程自從安卓系統上出現捕魚遊戲之後，手機捕魚類遊戲就開始火爆起來，現如今捕魚遊戲已經成為了當前市面主題遊戲中最受歡迎的一類產品。自此一部手機，一臺平板電腦，便可隨時隨地讓玩家充分體驗到捕魚遊戲的樂趣！漁樂吧的穩定性不需要多說，市場上運營漁樂吧和星力的太多了 十分穩定 最牛的是完全無需人工監控玩家的

riot.js教程【二】組件撰寫準則、預處理器、標簽樣式和裝配方法

def coffee 將在 tom enter 名稱 spa 配方法 undefined 基本要求 一個riot標簽，就是展現和邏輯的組合（也就是html和JS）； 以下是編寫riot標簽最基本的規則： 先撰寫HTML，再撰寫JS，JS代碼可以寫在<script

組件Slate教程 & UMG widget構造初始化函數中獲取其內部組件

test c++類 init 初始化 bin wid initial box flags 轉自：http://aigo.iteye.com/blog/2296218 目的：在自定義的Widget初始化完畢後，獲取其內部的button、combo等UMG組件的C++指針。

Angular2快速入門-3.多個組件（分離新聞列表頁和詳細頁）

中新 table ref date 入門 log sta ble row 上篇（Angular2快速入門-2.創建一個新聞列表）已經完成新聞列表的展示，並且點擊新聞列表的時候，下面可以展示出新聞的詳細信息，這節我們把新聞詳細和新聞列表頁面分離出來 新聞詳細單獨一個comp