ionic中使用热更新插件cordova-hot-code-push

网上有很多关于这方面的资料和说明，但是我并没有找到一个真正能够搭建成功的案例。因此为了让大家别再走弯路，在此我研究了一个上午搭建成功，以此来提高大家的工作效率。
cordova-hot-code-push是一款专门为混合cordova应用开发的一个热更新插件，那么什么是热更新？热更新顾名思义就是，在混合app代码（html、js、css）发生改变的时候，我们不需要重新对app打包再次进行发布，而仅需要通知cordova-hot-code-push插件，代码已经发生了改变，然后cordova-hot-code-push插件就会根据我们指定的代码服务器进行更新相关的代码。这样的好处在于，客户再也不用再到相关的app store去下载新版本的app了，只要客户联网打开了app，app就会自动更新相关代码。这仅仅是用于代码更新上。如果我们所改变的不是代码，而是改变了webview或者说升级了ionic2到了ionic3，那么cordova-hot-code-push还会自动更新吗？毫无疑问cordova-hot-code-push已经无法再次进行自动更新了，但是它可以向客户端推送新的app，并强迫用户下载升级！好了，下面我就用ionic2的项目来说说怎么搭建cordova-hot-code-push和使用。
本次搭建在OS系统中，服务端使用xampp本地搭建而成，当然windows用户也不用紧张，因为操作步骤都是一样的，在windows上你可以使用android模拟器进行测试。

1、首先建立一个ionic项目

当然你得确保你已经安装了nodejs
安装ionic和cordova

npm install -g cordova ionic

我根据官方教程，创建一个tabs项目，输入如下命令

ionic start tab tabs
cd tab
npm install
ionic serve

这样就建立好了ionic项目了。

2、安装cordova-hot-code-push插件（使用全局安装）

npm install -g cordova-hot-code-push-cli

接着在项目根目录安装cordova-hot-code-push-plugin插件

cordova plugin add cordova-hot-code-push-plugin

3、确定本地服务器ip地址

比如我安装的是xampp服务器软件，我通过http://localhost可以直接访问到服务器根目录文件，但是如果我们在模拟器中使用http://localhost和127.0.0.1就无法访问到服务器了。因此我们得获得到本机的ip地址
mac下在终端（命令行）输入ifconfig即可看到如下画面，找到你的ip地址：

Mac下查看ip地址

Mac下查看ip地址

windows下的朋友可以使用ipconfig命令进行查看，或者在网络共享中心查看本机IP地址
得到了Ip地址，那就直接使用ip地址访问下本地的服务器，看看能否正常访问，在浏览器中敲入http://192.168.22.62/访问看看，我的结果是这样的

xampp本地搭建服务器

xampp本地搭建服务器

如果你使用的是其他服务器，请自行进行检测。

4、创建cordova-hcp.json模板

cordova-hcp.json主要是为了方便我们以后的操作，不用再去修改www目录下的chcp.json文件，因此这样做主要是为了提高工作效率

项目目录结构

项目目录结构

在tab项目根目录下新建一个cordova-hcp.json文件，输入如下内容

{
"autogenerated": true,
"name": "tabs",
"min_native_interface": 1,
"content_url": "http://192.168.22.62/tabs",
"ios_identifier":"https://itues.apple.com/cn/***",
"update": "now"
}

参数
autogenerated 默认为true，自动升级的意思
name app的名称
min_native_interface 原生壳（可以理解为原生webview版本），此版本由你自己定义版本号
content_url 更新文件所在服务器的目录地址
ios_identifie 这个是ios app store的地址，作为测试，可以忽略，这个地址是打包后提交的地址
update 更新的情况，now|web内容下载完毕即安装更新；resume|app从后台切换过来的时候安装更新；start|app启动时安装更新（默认值）.

5、测试模板生成的www/chcp.json文件是否正确

cd 到项目根目录，执行下面语句

cordova-hcp build

执行后，就可以到www目录下找到chcp.json文件，查看信息，发现多了一行代码："release": "2017.06.30-15.27.25"，并且也多了一个chcp.manifest的文件

{
"autogenerated": true,
"name": "tabs",
"min_native_interface": 1,
"content_url": "http://192.168.22.62/tabs",
"ios_identifier": "https://itues.apple.com/cn/***",
"update": "now",
"release": "2017.06.30-15.27.25"
}

其实就是个时间
chcp.manifest则是每一个文件变动后的hash值，cordova-hot-code-push会去检测这个值，如果这个值发生了变动则从服务器下载相关文件进行更新。
到此，我们的模板完成了。

6、修改根目录config.xml

在中加入如下代码：

config.xml文件

config.xml文件

native-interface version="1"，这里的1必须和chcp.json中"min_native_interface": 1 是一样的，这个1代表了外壳（webview版本）版本。做外壳更新用到此参数。

7、在xcode或安卓虚拟机上运行项目

mac上，输入如下命令
ionic platform add ios
ionic cordova run ios（旧版本的ionic请运行ionic run ios）
windows上由于实现ios环境难，因此就使用android
ionic platform add android
ionic cordova run android（旧版本的ionic请运行ionic run android）
我运行的结果如下（我之前修改过默认项目的文件）：

ios下运行ionic项目

ios下运行ionic项目

8、内壳（html、js、css）热更新

首先我们修改项目下page/about.html页面，更它增加一些文字，我这里增加的是“this is about page”。
运行命令cordova-hcp build重新生成相关的文件
我们在xampp/htdocs目录下新建一个文件夹名称为tabs，接着我们将ionic根目录下的www内的所有文件拷贝到xampp/htdocs目录下。
在xcode或者安卓虚拟机中将我们的ionic app kill掉，也就是强制退出。
再次打开我们的app，你会看到about页面已经发生了变化，刚才我们添加的文字出现了。

热更新

热更新

真是屡试不爽啊，热更新真的太方便了。不过这种更新仅仅只是内壳的热更新。

9、外壳热更新（待续...）

ionic中使用热更新插件cordova-hot-code-push