1.安装node环境;
2.安装ionic,cordova框架:npm install -g cordova ionic
3.新建ionic项目
ionic start app tabs
tabs:创建一个选项卡项目
blank:创建一个空白项目
sidemenu:创建一个侧边菜单项目
super: 创建一个预制的完整项目,提供ionic开发最佳实践
conference:创建一个展示真是应用的项目
tutorial:创建一个基于ionic文档的教程项目
aws: 创建一个移动集成器启动项目
4.安装插件
ionic cordova plugin add cordova-hot-code-push-plugin
ionic cordova plugin add cordova-hot-code-push-local-dev-addon
npm install -g cordova-hot-code-push-cli
5.在config.xml配置文件,<widget></widget>中插入以下节点:
<chcp>
<config-file url="http://123.57.175.102:56/zhoutest/witlab/www/chcp.json" />
<native-interface version="1" />
</chcp>
url为服务器文件/www/chcp.json的地址;
version为当前版本号;
6.新打开一个终端执行下面命令:cordova-hcp server
输出类似以下为正常:
检查/项目名称/www 路径下 有chcp.json和chcp.manifest表示热更新服务启动正常。
7.在项目根目录下新建json文件 cordova-hcp.json
{
"autogenerated": true,
"content_url": "http://123.57.175.102:56/zhoutest/witlab/www",
//这里为服务器上www文件地址,每次更新只需要将www文件上传更新
"update": "now"
}
以后发布时只需执行cordova-hcp build命令,就可以把模板内容替换到chcp.json文件内,因为每次更新或者发布app都会使热更新服务重新生成chcp.json文件内容。
8.生成apk ionic cordova build android
此时热更新服务不能停止(cordova-hcp server),一个终端执保持热更新服务,另一个终端执行其它命令;
访问服务器地址,检查页面显示是否正常,json文件是否可以访问,json文件内的ip地址是否是服务器的发布地址
在手机上安装此apk;
一定要先生成apk再复制模板文件(cordova-hcp build ) 否则build之后模板文件可能会恢复默认值。
9.将www文件上传服务器,查看json文件是否可以访问。
10.修改项目内容,重新打包,执行 cordova-hcp build
将www文件更新上传到服务器
检查服务器上项目界面是否更改,chcp.json文件是否更改
关闭app,重新打开app,界面已经更新