臧天朔成龙,奇迹召唤师加点,杨坚代周立隋
codepush是一个微软开发的云服务器。通过它，开发者可以直接在用户的设备上部署手机应用更新。codepush相当于一个中心仓库，开发者可以推送当前的更新（包括js/html/css/image等）到codupush，然后应用将会查询是否有更新。
安装codepush指令，直接在终端上输入如下命令即可，注意：这个codepush指令只需要全局安装一次即可，如果第一次安装成功了，那后面就不在需要安装
$ npm install -g code-push-cli
注册codepush账号也很简单，同样是只需简单的执行下面的命令，同样这个注册操作也是全局只需要注册一次即可
$ code-push register
注意：当执行完上面的命令后，会自动打开一个授权网页，让你选择使用哪种方式进行授权登录，这里我们统一就选择使用github即可
当注册成功后，codepush会给我们一个key
我们直接复制这个key，然后在终端中将这个key填写进去即可，填写key登录成功显示效果如下
我们使用下面的命令来验证我的登录是否成功
$ code-push login
codepush注册登录相关命令：
为了让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
添加android平台应用
$ code-push app add iosrnhybridforandroid android react-native
我们可以输入如下命令来查看我们刚刚添加的app
$ code-push app list
codepush管理app的相关命令：
首先我们需要安装codeopush组件，然后通过link命令添加原生依赖，最后在rn根组件中添加热更新逻辑代码
安装组件
$ npm install react-native-code-push --save
添加原生依赖，这里添加依赖我们使用自动添加依赖的方式
$ react-native 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 = {
//设置检查更新的频率
//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,
},
})
这里原生应用中配置codepush我们需要分别配置ios平台和android平台
$(build_dir)/$(configuration)$(effective_platform_name) 改为：$(build_dir)/release$(effective_platform_name)
+ 号，选择add user-defined setting，将key设置为codepush_key，release 和 staging的值为前面创建的key，我们直接复制进去即可
$(codepush_key)，并修改bundle versions为三位
ios平台codepush环境集成完毕
在使用之前需要考虑的是检查更新时机，更新是否强制，更新是否要求即时等
一般常见的应用内更新时机分为两种，一种是打开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来决定安装完成的重启时机，亦即更新生效时机
在将rn的bundle放到codepush服务器之前，我们需要先生成bundle，在将bundle上传到codepush
生成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
上传bundle
$ 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服务器成功后，效果图如下：
查看发布的历史记录，命令如下
查询production
$ code-push deployment history projectname production
查询staging
$ code-push deployment history projectname staging
对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
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
发布更新包命令中的 -- t 对应的参数是和我们项目中的版本号一致的，这个不要误理解为是更新包的版本号，例如项目中的版本号为1.0.0， 这时如果我们需要对这个1.0.0 版本的项目进行第一次热更新，那么命令中的 -- t 也为1.0.0，第二次热更新任然为1.0.0
项目的版本号需要改为三位的，默认是两位的，但是codepush需要三位数的版本号
发布更新应用时，应用的名称必须要和之前注册过的应用名称一致
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
网友评论