什么是code-push
CodePush是一個(gè)微軟開發(fā)的云服務(wù)器。通過它心赶，開發(fā)者可以直接在用戶的設(shè)備上部署手機(jī)應(yīng)用更新珊泳。CodePush相當(dāng)于一個(gè)中心倉庫，開發(fā)者可以推送當(dāng)前的更新（包括JS/HTML/CSS/IMAGE等）到CoduPush猜极，然后應(yīng)用將會(huì)查詢是否有更新中姜。
當(dāng)然我們也可以使用code-push-server來代替微軟云服務(wù)器，自己搭建云服務(wù)管理需要更新的代碼跟伏，待到下一篇來介紹code-push-server的使用丢胚。
1、安裝code-push CLI
$ npm install -g code-push-cli
只需要這一條命令就可以安裝受扳，既然大家都是ReactNative開發(fā)NPM肯定安裝了的携龟。
2、注冊(cè) code-push賬號(hào)
$ code-push register
會(huì)自動(dòng)打開一個(gè)授權(quán)網(wǎng)頁勘高，讓你選擇使用哪種方式進(jìn)行授權(quán)登錄峡蟋，一般選擇GitHub就行，授權(quán)成功后就會(huì)得到授權(quán)碼相满，回到終端輸入授權(quán)碼就注冊(cè)并登錄成功了
登錄注冊(cè)相關(guān)命令：
- 注冊(cè)
code-push register - 登陸
code-push login - 注銷
code-push logout - 列出 登陸的token
code-push access-key ls - 刪除某個(gè)access-key
code-push access-key rm <accessKey>
3层亿、在code-push服務(wù)器注冊(cè)App
為了讓CodePush服務(wù)器有我們的App，我們需要CodePush注冊(cè)App立美。這里需要注意如果我們的應(yīng)用分為iOS和Android兩個(gè)平臺(tái)匿又，這時(shí)我們需要分別注冊(cè)兩套key。系統(tǒng)默認(rèn)有兩套部署環(huán)境建蹄，一個(gè)是Production和Staging碌更，分別對(duì)應(yīng)生產(chǎn)版的熱更新部署，Staging代表開發(fā)版的熱更新部署洞慎，但是我們也可以自定義添加部署環(huán)境痛单。在ios中將staging的部署key復(fù)制在info.plist的CodePushDeploymentKey值中，在android中復(fù)制在Application的getPackages的CodePush中
- 添加部署環(huán)境
code-push deployment add <app_name> test//創(chuàng)建test環(huán)境 - 添加應(yīng)用平臺(tái)
code-push app add <app_name> <os> <platform>例如添加iOS平臺(tái)
$ code-push app add iOSRNHybrid ios react-native,多個(gè)平臺(tái)執(zhí)行多次 - 查看應(yīng)用列表
code-push app list - 查看APP的環(huán)境信息
code-push deployment list <app_name> --format json
Usage: code-push app <command>
命令：
add Add a new app to your account
remove Remove an app from your account
rm Remove an app from your account
rename Rename an existing app
list Lists the apps associated with your account
ls Lists the apps associated with your account
transfer Transfer the ownership of an app to another account**
4劲腿、ReactNative集成code-push
安裝組件
項(xiàng)目根目錄下 npm install react-native-code-push --save
添加依賴 npm link react-native-code-push
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 = {
//設(shè)置檢查更新的頻率
//ON_APP_RESUME APP恢復(fù)到前臺(tái)的時(shí)候
//ON_APP_START APP開啟的時(shí)候
//MANUAL 手動(dòng)檢查
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 下次恢復(fù)到前臺(tái)時(shí)
//ON_NEXT_RESTART 下一次重啟時(shí)
//IMMEDIATE 馬上更新
mandatoryInstallMode : CodePush.InstallMode.IMMEDIATE ,
deploymentKey: 'iOS平臺(tái)Key旭绒，部署環(huán)境(Production/Staging)',
//對(duì)話框
updateDialog : {
//是否顯示更新描述
appendReleaseDescription : true ,
//更新描述的前綴。 默認(rèn)為"Description"
descriptionPrefix : "更新內(nèi)容：" ,
//強(qiáng)制更新按鈕文字，默認(rèn)為continue
mandatoryContinueButtonLabel : "立即更新" ,
//強(qiáng)制更新時(shí)的信息. 默認(rèn)為"An update is available that must be installed."
mandatoryUpdateMessage : "必須更新后才能使用" ,
//非強(qiáng)制更新時(shí)挥吵，按鈕文字,默認(rèn)為"ignore"
optionalIgnoreButtonLabel : '稍后' ,
//非強(qiáng)制更新時(shí)重父，確認(rèn)按鈕文字. 默認(rèn)為"Install"
optionalInstallButtonLabel : '后臺(tái)更新' ,
//非強(qiáng)制更新時(shí)，檢查到更新的消息文本
optionalUpdateMessage : '有新版本了忽匈，是否更新房午？' ,
//Alert窗口的標(biāo)題
title : '更新提示'
}
}
);
}
componentWillMount() {
CodePush.disallowRestart();//禁止重啟
this.syncImmediate(); //開始檢查更新
}
componentDidMount() {
CodePush.allowRestart();//在加載完了，允許重啟
}
/*或者采用這一段代碼
componentDidMount() {
CodePush.sync({
updateDialog: {
appendReleaseDescription: true,
descriptionPrefix:'\n\n更新內(nèi)容：\n',
title:'更新',
mandatoryUpdateMessage:'',
mandatoryContinueButtonLabel:'更新',
},
mandatoryInstallMode:CodePush.InstallMode.IMMEDIATE,
deploymentKey: 'iOS平臺(tái)Key丹允，部署環(huán)境(Production/Staging)',
});
}
*/
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郭厌、原生應(yīng)用中配置code-push
使用Xcode打開項(xiàng)目，Xcode的項(xiàng)目導(dǎo)航視圖中的PROJECT下選擇你的項(xiàng)目雕蔽，選擇Info頁簽 折柠，在Configurations節(jié)點(diǎn)下單擊 + 按鈕 ，選擇Duplicate "Release Configaration批狐，輸入Staging
配置Configurations選擇Build Settings tab液走，搜索Build Location -> Per-configuration Build Products Path -> Staging，將之前的值：$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME) 改為：$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)
配置Targets選擇Build Settings tab贾陷，點(diǎn)擊 + 號(hào)，選擇Add User-Defined Setting嘱根，將key設(shè)置為CODEPUSH_KEY髓废，Release 和 Staging的值為前面創(chuàng)建的key，我們直接復(fù)制進(jìn)去即可
添加CODEPUSH_KEY打開Info.plist文件该抒，在CodePushDeploymentKey中輸入$(CODEPUSH_KEY)慌洪，并修改Bundle versions為三位
配置Info.plist
如果是cocoapods進(jìn)行項(xiàng)目管理，那么修改podfile文件
pod 'CodePush', :path => './node_modules/react-native-code-push'
請(qǐng)正確填寫path路徑
6凑保、發(fā)布更新的版本
發(fā)布更新兩種方式：
1冈爹、打包和發(fā)布
react-native bundle --platform <ios/android> --entry-file <index
.ios.js RN的入口文件> --bundle-output <./bundles/SwitchCheck010004.js 打包jsbundle放置的路徑> --assets-dest <./bundles 資源文件的路徑>
code-push relase [AppName] -d [Deployment參數(shù)] [更新文件目錄] [需要更新到App的版本號(hào)]
2、打包并發(fā)布
//綜合的上面說的1欧引，2步的操作：1频伤，新建存放打包后的目錄，打包js和資源文件到此目錄芝此；2憋肖，根據(jù)命令行配置參數(shù)更新此目錄的內(nèi)容
code-push release-react <appName> <platform>
[--bundleName <bundleName>]js bundle默認(rèn)的文件名
[--deploymentName <deploymentName>]--d部署環(huán)境
[--description <description>]--des更新描述
[--development <development>]--dev false
[--disabled <disabled>]-x更新包是否讓用戶使用，如果為true婚苹，則不會(huì)讓用戶下載這個(gè)更新包
[--entryFile <entryFile>]-e入口文件
[--mandatory]-m是否強(qiáng)制更新
[--sourcemapOutput <sourcemapOutput>]
[--targetBinaryVersion <targetBinaryVersion>]-t目標(biāo)版本
[--rollout <rolloutPercentage>] 用來指定可以接收到這個(gè)更新的用戶的百分比岸更，取值范圍為0-100，不指定時(shí)默認(rèn)為100
7膊升、后續(xù)
清除已經(jīng)上傳的版本 code-push deployment clear <app-name> 部署環(huán)境//Production, Staging等
8怎炊、參考
code-push常用命令
CodePush熱更新詳細(xì)接入教程
微軟的React Native熱更新 - 使用篇
react-native-code-push進(jìn)階篇
ReactNative博客
