? ? ? ? 搞了兩天，開始用react-native-pushy來做熱更新，但是編譯都編譯不過，我就頭疼了，后來想想還是算了，我還是用微軟的吧，國內(nèi)的東西如果做得讓我們都放心的話，我就會用了，也可能是我不懂吧。廢話少說，下面就開始進(jìn)行我的codepush挖坑之路。測試了兩個軟件都還成功，挺不錯的。
? ? ? ? 而且很多文章上講的內(nèi)容已經(jīng)過時(shí)了，codepush也隨著RN的更新也一直在更新，所以文章還是用最新的，最好是看github的地址。
? ? ? ? codepush是微軟的一套用于熱更新的服務(wù)，微軟的github地址：https://github.com/Microsoft/react-native-code-push，里面講述了詳細(xì)的使用方法。這里我就自己的操作做了一下調(diào)整。
我的代碼在github上，大家可以查看下：https://github.com/LiuC520/react-native-codepush01
一、安裝codepush服務(wù)
1、在終端輸入 npm install -g code-push-cli，然后等待安裝完畢。
安裝完畢后輸入 code-push -v查看版本，如果有版本就成功了，下一步。
（RN必須要用npm的，這里沒有的話自己去看下RN的官網(wǎng)，安裝下nodejs）
二、創(chuàng)建codepush賬號
1、在終端輸入 code-push register，打開了一個網(wǎng)頁選擇授權(quán)的賬號。如下所示
2、我選的是github，這樣的話會出來一個界面，把那個key復(fù)制下，并在終端復(fù)制下這個key，注冊成功。
3、在終端輸入 code-push login登錄，以后再登錄就不用注冊了，只需要輸入code-push login就可以了，然后出來一個key的頁面，輸入key就可以登錄了。
其他的代碼如下：
code-push login登陸
code-push logout注銷
code-push access-key ls列出登陸的token
code-push access-key rm 刪除某個 access-key
4、在codepush上注冊我的app，就相當(dāng)于我們在用極光推送的時(shí)候，要在極光的官網(wǎng)上注冊一個應(yīng)用，會給你一個appkey一樣的道理：
在終端輸入：code-push app add 你的應(yīng)用名字 ??
其他的命令如下：
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把a(bǔ)pp的所有權(quán)轉(zhuǎn)移到另外一個賬號
三、下面單獨(dú)操作android和ios的配置(我的RN版本是0.37)
1、首先在終端輸入 ：
npm install --save react-native-code-push@latest
安裝code-push最新版本
2、然后關(guān)聯(lián)code-push
如果你安裝了rnpm直接用命令：rnpm link react-native-code-push，如果沒有安裝先安裝npm i -g rnpm,然后再輸入rnpm link react-native-code-push，進(jìn)行關(guān)聯(lián)
3、ios端的配置如下：https://microsoft.github.io/code-push/docs/react-native.html#link-4
先用xcode打開RN項(xiàng)目下的ios，找到.xcodeproj的文件雙擊打開，點(diǎn)擊左上角的項(xiàng)目名字，找到AppDelegate.m，單擊打開，然后添加如下代碼：
#import "CodePush.h"
然后把下面這兩行代碼更改下：
jsCodeLocation = [[RCTBundleURLProvidersharedSettings]
? ? ? ? jsBundleURLForBundleRoot:@"index.ios"fallbackResource:nil];
更改成：
#ifdef DEBUG
jsCodeLocation = [[RCTBundleURLProvidersharedSettings]jsBundleURLForBundleRoot:@"index.ios"fallbackResource:nil];
#else
jsCodeLocation = [CodePush bundleURL];
#endif
4、打開xcode左側(cè)的項(xiàng)目名稱，找到general和info兩個選項(xiàng)卡：分別作如下的操作，把bundle version和codepushdeploymentKey修改下就行了：
先在終端輸入：
code-push deployment ls 您的應(yīng)用名 -k
查詢你的內(nèi)容如下：
Staging 為測試的key，Production為生產(chǎn)打包時(shí)用的key。
然后按照下圖配置ios的東西就行了
5、android端的配置如下：
同樣在rnpm link react-native-code-push 后，打開RN項(xiàng)目的android-app-src-main-java-...-MainApplication.java，打開后
public class ?MainApplication ?extends ?Application ?implements ?ReactApplication {
? ? ? private final ReactNativeHost ?mReactNativeHost=new ?ReactNativeHost(this) {
? ? ? ? ? ? ? ? @Override
? ? ? ? ? ? ? ? ? protected String getJSBundleFile() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return CodePush.getJSBundleFile();
? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ?@Override
? ? ? ? ? ? ? ? ? protected boolean getUseDeveloperSupport() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?return BuildConfig.DEBUG;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ?@Override
? ? ? ? ? ? ? ? ? protected List<ReactPackage> getPackages() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? return Arrays.<ReactPackage>?asList(
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?new ?MainReactPackage(),
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?new ?CodePush("kLavEmLMaRSwemp98FiAQ7BRK7bd4yj8ga1-f",MainApplication.this,BuildConfig.DEBUG)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? );
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ?};
? ? ? ? ? ? ? ? @Override
? ? ? ? ? ? ? ? ?public ReactNativeHost getReactNativeHost() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?return ? mReactNativeHost;
? ? ? ? ? ? ? ? ? ? }
}
其中new codepush里面的第一個字符串就是上面通過 code-push deployment ls 應(yīng)用名 -k 查詢出來的deployment key，我這里是直接用的Production key。
6、然后修改version name，
在 android/app/build.gradle中有個 android.defaultConfig.versionName屬性，我們需要把 應(yīng)用版本改成 1.0.0（默認(rèn)是1.0，但是codepush需要三位數(shù)）。
android{
? ? defaultConfig{
? ? ? ? versionName"1.0.0"
? ? }
}
四、RN中的操作如下：
詳細(xì)的操作在官網(wǎng)demo示例中：https://github.com/Microsoft/react-native-code-push/blob/master/Examples/CodePushDemoApp/demo.js
首先導(dǎo)入：
import CodePush from "react-native-code-push";
let codePushOptions = { checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME };
sync() {
? ? ?CodePush.sync();
?}
? ? /** Update pops a confirmation dialog, and then immediately reboots the app */
?syncImmediate() {
? ? ? ?CodePush.sync(
? ? ? ? ? ? ?{ installMode: CodePush.InstallMode.IMMEDIATE,//啟動模式三種：ON_NEXT_RESUME、ON_NEXT_RESTART、IMMEDIATE
? ? ? ? ? ? ? ? updateDialog: {
? ? ? ? ? ? ? ? ? ? ? ? appendReleaseDescription:true,//是否顯示更新description，默認(rèn)為false
? ? ? ? ? ? ? ? ? ? ? ? descriptionPrefix:"更新內(nèi)容：",//更新說明的前綴。 默認(rèn)是” Description:
? ? ? ? ? ? ? ? ? ? ? ? mandatoryContinueButtonLabel:"立即更新",//強(qiáng)制更新的按鈕文字，默認(rèn)為continue
? ? ? ? ? ? ? ? ? ? ? ? mandatoryUpdateMessage:"",//- 強(qiáng)制更新時(shí)，更新通知. Defaults to “An update is available that must be installed.”.
? ? ? ? ? ? ? ? ? ? ? ? optionalIgnoreButtonLabel: '稍后',//非強(qiáng)制更新時(shí)，取消按鈕文字,默認(rèn)是ignore
? ? ? ? ? ? ? ? ? ? ? ?optionalInstallButtonLabel: '后臺更新',//非強(qiáng)制更新時(shí)，確認(rèn)文字. Defaults to “Install”
? ? ? ? ? ? ? ? ? ? ? optionalUpdateMessage: '有新版本了，是否更新？',//非強(qiáng)制更新時(shí)，更新通知. Defaults to “An update is available. Would you like to install it?”.
? ? ? ? ? ? ? ? ? ? ? title: '更新提示'//要顯示的更新通知的標(biāo)題. Defaults to “Update available”.
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? },
? ? ? ? );
}
componentWillMount(){
? ? ? ?CodePush.disallowRestart();//頁面加載的禁止重啟，在加載完了可以允許重啟
? }
?componentDidMount(){
? ? ?CodePush.allowRestart();//在加載完了可以允許重啟
}
最后在styles最后添加：
App = CodePush(codePushOptions)(App);
五、修改好后把軟件打包安裝到手機(jī)上，直接react-native run-android也行，但是打包發(fā)布后安裝到手機(jī)上這樣能看的更清楚些，具體打包流程請上rn官網(wǎng)：http://facebook.github.io/react-native/docs/signed-apk-android.html
1、打包生成bundle文件：
首先在RN項(xiàng)目下面新建一個文件夾bundles：mkdir bundles,
其次運(yùn)行打包命令：
react-native bundle --platform 平臺 --entry-file 啟動文件 --bundle-output 打包js輸出文件 --assets-dest 資源輸出目錄 --dev 是否調(diào)試。
例如：
android的打包命令：
? ? react-native bundle --platform android --entry-file index.android.js --bundle-output ./bundles/index.android.bundle --assets-dest ./bundles --dev false
ios的打包命令：
react-native bundle --platform ios --entry-file index.ios.js --bundle-output ./bundles/main.jsbundle --assets-dest ./bundles --dev false
我是把這兩個平臺的都打包了，然后在文件夾下面
2、發(fā)布更新：
然后需要在codepush上發(fā)布我們的更新，在終端輸入：
code-push release <應(yīng)用名稱> <Bundles所在目錄>?<對應(yīng)的應(yīng)用版本> --deploymentName： 更新環(huán)境 --description： 更新描述? --mandatory： 是否強(qiáng)制更新
如下：
?code-push release codepush01 ./bundles/ 1.0.0 --deploymentName Production? --description "1.修改標(biāo)題顏色。" --mandatory false
CodePush默認(rèn)是更新 staging 環(huán)境的，如果是staging，則不需要填寫 deploymentName。
如果有 mandatory 則Code Push會根據(jù)mandatory 是true或false來控制應(yīng)用是否強(qiáng)制更新。默認(rèn)情況下mandatory為false即不強(qiáng)制更新。
對應(yīng)的應(yīng)用版本（targetBinaryVersion）是指當(dāng)前app的版本(對應(yīng)build.gradle中設(shè)置的versionName "1.0.0")，也就是說此次更新的js/images對應(yīng)的是app的那個版本。不要將其理解為這次js更新的版本。
如客戶端版本是 1.0.0，那么我們對1.0.0的客戶端更新js/images，targetBinaryVersion填的就是1.0.0。
說的意思就是我們手機(jī)上上的安裝的版本是1.0.0，我們要更新這個版本的代碼，在codepush發(fā)布更新的時(shí)間，對應(yīng)的應(yīng)用版本就是手機(jī)上安裝的那個版本。
這個地方有點(diǎn)兒繞，不知道大家能不能理解，不理解的話聯(lián)系我: qq和微信都是 674668211 .
可以同時(shí)對一個應(yīng)用版本進(jìn)行多次更新，只要傳的bundle或者image不一樣就行，
在終端輸入下面的命令就可以查看你的應(yīng)用的版本更新情況：
測試版本更新：code-push deployment history 應(yīng)用名 Staging
生產(chǎn)版本更新：code-push deployment history 應(yīng)用名 Production
我的測試版本如下：
3、我的操作如下，大家可以看下：
蘋果一樣的測試成功哦，這里就不貼圖了，跟android一樣的，
如果有人不懂的話，聯(lián)系我的微信或者QQ都是674668211.
六、其他的命令：
code-push deployment add 部署
code-push deployment rename 重命名
code-push deployment rm 刪除部署
code-push deployment ls 列出應(yīng)用的部署情況
code-push deployment ls -k 查看部署的key
code-push deployment history 查看歷史版本(Production 或者 Staging)
七、其他的一些api，強(qiáng)烈建議大家去查看官網(wǎng)，慢慢研究，根據(jù)自己的需求調(diào)整響應(yīng)的api
codePush.sync(options: Object, syncStatusChangeCallback: function(syncStatus: Number), downloadProgressCallback: function(progress: DownloadProgress)): Promise<Number>;
deploymentKey （String）： 部署key，指定你要查詢更新的部署秘鑰，默認(rèn)情況下該值來自于Info.plist(Ios)和MainApplication.java(Android)文件，你可以通過設(shè)置該屬性來動態(tài)查詢不同部署key下的更新。
installMode (codePush.InstallMode)： 安裝模式，用在向CodePush推送更新時(shí)沒有設(shè)置強(qiáng)制更新(mandatory為true)的情況下，默認(rèn)codePush.InstallMode.ON_NEXT_RESTART即下一次啟動的時(shí)候安裝。
mandatoryInstallMode (codePush.InstallMode):強(qiáng)制更新,默認(rèn)codePush.InstallMode.IMMEDIATE。
minimumBackgroundDuration (Number):該屬性用于指定app處于后臺多少秒才進(jìn)行重啟已完成更新。默認(rèn)為0。該屬性只在installMode為InstallMode.ON_NEXT_RESUME情況下有效。
updateDialog (UpdateDialogOptions) :可選的，更新的對話框，默認(rèn)是null,包含以下屬性
? ? ? ? ? ?appendReleaseDescription (Boolean) - 是否顯示更新description，默認(rèn)false
? ? ? ? ? ? descriptionPrefix (String) - 更新說明的前綴。 默認(rèn)是” Description: “
? ? ? ? ? ? mandatoryContinueButtonLabel (String) - 強(qiáng)制更新的按鈕文字. 默認(rèn) to “Continue”.
? ? ? ? ? ? mandatoryUpdateMessage (String) - 強(qiáng)制更新時(shí)，更新通知. Defaults to “An update is available that must be installed.”.
? ? ? ? ? ? optionalIgnoreButtonLabel (String) - 非強(qiáng)制更新時(shí)，取消按鈕文字. Defaults to “Ignore”.
? ? ? ? ? ? ?optionalInstallButtonLabel (String) - 非強(qiáng)制更新時(shí)，確認(rèn)文字. Defaults to “Install”.
? ? ? ? ? ? optionalUpdateMessage (String) - 非強(qiáng)制更新時(shí)，更新通知. Defaults to “An update is available. Would you like to install it?”.
? ? ? ? ? title (String) - 要顯示的更新通知的標(biāo)題. Defaults to “Update available”.
具體可以查看我上面的代碼：
還有一個是：codePush.InstallMode，有三種模式，
? ? ? ? ? ? ? ? ?一個是立即啟動，nstallMode.IMMEDIATE
? ? ? ? ? ? ? ? 一個是下次啟動安裝：InstallMode.ON_NEXT_RESTART
? ? ? ? ? ? ? ? 一個是程序在前臺，并沒有從后臺切換到前臺的情況下用的InstallMode.ON_NEXT_RESUME
八、測試：還有一個經(jīng)常用的是發(fā)布的時(shí)間進(jìn)行部分用戶升級測試：
應(yīng)用創(chuàng)建時(shí)有兩個環(huán)境，一個是Staging，一個是Production,開發(fā)階段用Staging，開發(fā)完成可以用code-push promote 將應(yīng)用遷移到Production中。
可以對一小部分用戶進(jìn)行升級測試：
code-push promote 應(yīng)用名?Staging Production -r 20%
軟件穩(wěn)定后，可以全面發(fā)布：
code-push patch 應(yīng)用名?Production -r 100%
