Ionic3 环境搭建+热更新

环节搭建

1. jdk 安装+环境变量

添加JAVA_HOME为jdk安装路径D:\Program Files\Java\jdk1.7.0_51

添加CLASSPATH为%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar

Path后追加;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

检查安装版本java -version

2. ANDROID sdk 安装+环境变量

添加ANDROID_HOME为sdk安装路径D:\Program Files\sdk

path后追加;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

检查安装版本adb -version

3. gradle 安装+环境变量

gradle在打包时需要

添加GRADLE_HOME为gradle安装路径D:\Program Files\gradle-3.3

path后追加;%GRADLE_HOME%\bin

检查版本gradle -version

4. nodejs    安装

检查版本node -version

5. ionic3     安装

npm install -g cordova ionic

检查版本ionic -version

6.项目中常用指令

ionic start demo 新建一个名叫demo的项目

ionic serve 启动服务

ionic serve --lab 在浏览器中启动多个模拟

ionic g page demo 新建一个名叫demo的页面

ionic g provider demo 新建一个名叫demo的服务

ionic cordova platform add android 添加安卓平台

ionic cordova platform add ios 添加ios平台

ionic cordova build android 生成安卓apk（ 项目根目录\platforms\android\build\outputs\apk）

ionic cordova build ios 生成Xcode项目文件，然后可打开Xcode进行打包

添加支持热更新

1.先安装热更新插件：
在你的电脑端全局安装：
npm install -g cordova-hot-code-push-cli
2.cd到项目目录下给项目添加插件：

cordova plugin add cordova-hot-code-push-local-dev-addon ( 此步可省略)

cordova plugin add cordova-hot-code-push-plugin
3.执行：

cordova-hcp server
执行完之后会在www文件夹中生成 两个文件：

chcp.json chcp.manifest
chcp.json文件主要是插件的配置信息，
chcp.manifest文件则是www目录下各文件的hash值参照表。

Update：有如下几个固定参数 start(app启动时安装更新，默认值)
now(app从后台切换过来的时候安装更新)
resume(web内容下载完毕即安装更新)
min_native_interface：最低版本号
content_url:项目在服务器上面的地址

在App根目录下面新建文件cordova-hcp.json，内容如下：

{
  "autogenerated": true,
  "content_url": "http://www.yourserver.com/www",
  "update": "start"
}
注意：这里的http://www.yourserver.com...均指你的存放热更新文件的服务器地址！
将www目录下的.chcpenv文件修改为你的服务器：

  {
    "content_url": "http://www.yoursever.com/www",
    "config_url": "http://www.yourserve.com/www/chcp.json"
    }
在config.xml文件<widget>标签中添加：

  
 <chcp>
    <local-development enabled="true" />
    <config-file url="http://192.168.0.111/www/chcp.json" />
  </chcp>
修改src里的内容，然后重新编译；编译后打包apk或者执行ionic run android把www里面的代码压缩之后，再执行

cordova-hcp build
然后把www目录复制到你的服务器上，退出APK再打开，看看后台做的修改是否在apk里跟着改变了。（也可以直接修改www目录下的文件内容，主要是修改main.js里的东西然后执行

cordova-hcp build
再把www复制到服务器看看修改效果）
到此打包好APK安装到手机上。
 

调试窍门

前提配置好了热更新 很重要

在程序目录下 按shift+右键 打开命令行窗口两个

第一个窗口执行cordova-hcp server命令

第二个窗口执行ionic build android命令打包

打包成功后手机上安装APK，下次程序修改后直接执行命令二，打开之前安装的手机app你会发现已经变成最新的了。

为什么这么神奇？

因为程序根目录.chcpenv文件内有个url配置的是ionic自己的临时服务器，每次执行cordova-hcp build会把www目录下的文件上传至整个服务器，并且支持热更新的apk会去上面请求。如下：

{
  "content_url": "https://ff01e9d1.ngrok.io",
  "config_url": "https://ff01e9d1.ngrok.io/chcp.json"
}

2018年8月3日 16:18:48

热更新注意事项
1，配置热更新的最后步骤增加：.chcpenv内链接修改成自己的服务器

{
  "content_url": "http://192.168.1.145:8088",
  "config_url": "http://192.168.1.145:8088/chcp.json"
}

2，ionic cordova build android完之后，要执行cordova-hcp build进行配置更新
3，关闭app，重新打开即可，更新视变化大小，两到四秒