ionic3 android热更新

1.安装ionic,cordova框架

    npm install -g ionic@latest

    npm install -g cordova ionic

2.新建ionic项目

ionic start myapp tabs

会显示选项列表
 tabs:创建一个选项卡项目
 blank:创建一个空白项目
 sidemenu:创建一个侧边菜单项目
 super: 创建一个预制的完整项目,提供ionic开发最佳实践
 conference:创建一个展示真是应用的项目
 tutorial:创建一个基于ionic文档的教程项目
 aws: 创建一个移动集成器启动项目

任意选择一个新建即可

3.ios目前已不支持热更新,只对Android平台进行设置
设置Android平台
ionic cordova platform add android
设置安卓版本需修改下面文件内容
platforms/android/project.properties 
和platforms/android/CordovaLib/project.properties 
中的target=“你有的sdk版本”


安装热更新插件
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

4.在config.xml配置文件中加入下面节点
<chcp>
     <config-file url="http://192.168.1.42:8085/chcp.json" />
     <native-interface version="1" />
</chcp>
第一个子节点是需要发布在iis上的文件地址(服务器地址)

第二个子节点是当前版本号

5.新开一个终端执行下面命令
cordova-hcp server
如果能够正常输出类似
Running server
Checking:  /ionic/myapp/www/
local_url http://localhost:31284
Warning: .chcpignore does not exist.
Build 2017.10.27-10.17.48 created in ionic/myapp/www
cordova-hcp local server available at: http://localhost:31284
cordova-hcp public server available at: https://5027caf9.ngrok.com

检查/项目名称/www 路径下 有chcp.json和chcp.manifest表示热更新服务启动正常

6.在项目根目录下新建模板 cordova-hcp.json
{
"content_url": "http://192.168.1.42:8085/hotUpdate/www",  /*这里是项目发布的地址(服务器地址) 指到www文件夹*/
"autogenerated": true,
"update": "now"
}
以后发布时只需执行

cordova-hcp build命令,就可以把模板内容替换到chcp.json文件内,因为每次更新或者发布app都会使热更新服务重新生成chcp.json文件内容

chcp.json内容如下:

{
  "content_url": "http://192.168.1.42:8085/hotUpdate/www",
  "autogenerated": true,
  "update": "now",
  "release": "2018.03.07-11.39.06"
}

7.生成apk
ionic cordova build android
此时热更新服务不能停止(第五步打开的服务),一个终端执保持热更新服务,另一个终端执行其它命令

生成后执行

将apk安装到手机

cordova-hcp build (复制模板文件)
然后通过iis访问地址,检查页面显示是否正常,json文件是否可以访问,json文件内的ip地址是否是iis的发布地址

在手机上安装此apk

一定要先生成apk(ionic cordova build android) 在复制模板文件(cordova-hcp build ) 否则build之后模板文件可能会恢复默认值

8.构建iis 将项目放到iis上  检查chcp.json文件是否可以访问,若不能,针对iis7+ 在iis的站点属性的HTTP头设置里,选择MIME映射中点击”文件类型“-”新类型“,添加一个文件类型,关联扩展名:.json,内容类型(MIME):application/x-javascript

9.对项目界面或者功能进行修改
然后对配置文件config.xml的chcp节点的版本号进行修改
<native-interface version="2" /> 
重新生成apk
ionic cordova build android

执行 cordova-hcp build 

将项目上传到iis

检查iis上项目界面是否更改,chcp.json文件是否更改

关闭app,重新打开app,界面已经更新


demo下载地址:https://pan.baidu.com/s/1ne-bmNE0uP8jkbLbCJUVSA





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
IONIC 功能全演示 ===================== - 使用Ionic提供的UI 组件。Ionic本身是致力于建立统一的移动混合app构建平台,核心基础是Angular+Cordova。 - 通过Angular指令封装,以及预定义的CSS,提供了开箱即用的HTML5 Mobile组件。 - 构建与开发支持,能够直接运行www目录下的index.html进行开发调试。同时也支持发布人员利用gulp构建输出到dist目录 - 利用gulp,同样演示了单元测试以及场景测试。 - [在线演示,内有地址二维码,可手机浏览](http://1.thm1118.sinaapp.com/static/ionic/www/index.html) ## 预览 ![信息卡片](screenshot/card.png) ![下拉刷新](screenshot/pullrefress.png) ![表单元素](screenshot/form.png) ![菜单](screenshot/menu.png) ![列表左滑按钮](screenshot/option.png) ![弹出层](screenshot/pop.png) ![tab](screenshot/tab.png) ![幻灯](screenshot/slide.png) ![图片水平滚动](screenshot/hscroll.png) ![毛玻璃效果](screenshot/blure.png) ![2000条数据搜索](screenshot/search.png) ![输入自动完成](screenshot/autocomplete.png) ![列表自动分组](screenshot/autogroup.png) ![媒体相册](screenshot/galaxy.png) ![chartjs统计图](screenshot/chartjs.png) ![百度统计图](screenshot/echat.png) ![图片延时加载](screenshot/imageload.png) ## 基础环境 纯webapp运行或演示,只需要一个 web server部署即可。 ## 目录结构说明 - www 目录:源码目录 - dist目录:构建输出目录 ## 利于开发,测试和打包部署的nodejs环境 简单开发可以不依赖nodejs环境。但是有了基于nodejs的javascript完整开发周期环境,会极大提升开发效率,保障质量。 - nodejs 最新版。 - 有些node包的安装需要c++编译,x86版本只需要 x86的C++编译器,windows上的x64 c++编译器需要特别设置。 - npm 会很慢,要么使用代理,要么使用国内镜像,比如 [淘宝镜像](http://npm.taobao.org/) , 使用淘宝镜像后,npm命令需要替换成cnpm命令。 - `npm install -g gulp` - `npm install -g ionic` - 如需编译sass的话,安装 [ruby](https://www.ruby-lang.org/zh_cn/),再执行 `gem install sass`(如遇到ssl错误,修改为http源:gem source -a http://rubygems.org/) - `npm install -g node-gyp` - 有的node包依赖python编译,安装 [python2.7](https://www.python.org/) - c++编译环境[MSVStudio 免费版](https://www.visualstudio.com/downloads/download-visual-studio-vs#d-express-windows-desktop).。注意根据studio不同版本指定 --msvs_version=2013 选项 - 安装项目开发依赖包,在项目根目录下运行 `npm install` ### “所见即所得”式开发 - 在项目根目录下运行 `ionic serve`,即可在www目录下开展“所见即所得”的方式开发 - 另外一种方式,在webstorm里对index.html 按debug运行,同样是“所见即所得”的方式开发 ### CROS支持 - 生产环境的 CROS支持要么使用jsonp技术,要么在服务端设置代理。 - 而开发环境下要么 基于不安全做法,服务端api 设置头`Access-Control-Allow-Origin:*" `,要么按如下便捷设置: 基于`ionic serve`, 可以在开发时使用本地代理。ionic.project 内设

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值