Ionic3 环境搭建+热更新

版权声明:转载请自觉署名 https://blog.csdn.net/chenchenwa/article/details/81354902

环节搭建


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,重新打开即可,更新视变化大小,两到四秒

展开阅读全文

没有更多推荐了,返回首页