ionic3 热更新

简介: ionic3 热更新

ionic3 热更新

jdk 安装+环境变量

ANDROID sdk 安装+环境变量

gradle 安装+环境变量

nodejs 安装

ionic3 安装

项目中常用指令

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( 项目根目录platformsandroidbuildoutputsapk)
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

4.执行完之后会在www文件夹中生成 两个文件:

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

Update:有如下几个固定参数 start(app启动时安装更新,默认值)

now(app从后台切换过来的时候安装更新)
resume(web内容下载完毕即安装更新)
min_native_interface:最低版本号
content_url:项目在服务器上面的地址

5.在App根目录下面新建文件cordova-hcp.json,内容如下:

{
"autogenerated": true,
"content_url": "http://www.yourserver.com/www",
"update": "start"
}

6.将www目录下的.chcpenv文件修改为你的服务器:

{
    "content_url": "http://www.yoursever.com/www",
    "config_url": "http://www.yourserve.com/www/chcp.json"
    }

7.在config.xml文件标签中添加:
<chcp>

`<local-development enabled="true" />`

<config-file url="http://192.168.0.111/www/chcp.json" />
</chcp>

  • 注意:这里的http://www.yourserver.com...均指你的存放热更新文件的服务器地址!(就是www文件)。

热更新项目

1.编译后打包apk或者执行ionic run android

2.打开命令行窗口两个

第一个窗口执行cordova-hcp server命令(更新热更新文件)
第二个窗口执行ionic build android命令打包(编译项目)

3.打包成功后手机上安装APK,

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

  • 注意:不用复制 www 文件到 "http://www.yourserver.com/www" 中
  • 因为:因为程序根目录.chcpenv文件内有个url配置的是ionic自己的临时服务器,每次执行cordova-hcp build会把www目录下的文件上传至整个服务器,并且支持热更新的apk会去上面请求。
    {

"content_url": "https://ff01e9d1.ngrok.io",
"config_url": "https://ff01e9d1.ngrok.io/chcp.json"
}
更改
{
"content_url": "http://192.168.1.145:8088",//你自己的地址
"config_url": "http://192.168.1.145:8088/chcp.json"
}

5.ionic cordova build android完之后,要执行cordova-hcp build进行配置更新


1、上午明白了几个关键思路和功能后,继续

    cordova-hcp init
        这个会初始化 www 目录下 chcp.json 主要信息
    config 中 local-development enabled="false"
        去掉本地调试(缺省是开着的)
    sudo cordova-hcp server
        这个用来本地测试
    sudo cordova-hcp build
        这个会重新生成 www 目录下的 chcp.json
    cordova build
        这个会重新生成 platforms ,主要chcp相关的是 assets/www 下的 chcp.json
2、当前项目上午已经 cordova-hcp init 过,所以,直接 cordova-hcp build
目录
相关文章
|
Android开发 iOS开发 数据格式
Ionic实现iOS与Android端代码『热更新』
热更新的好处 通常ionic源码可包括(HTML,JavaScript,CSS文件和其他资源),往常我们必须通过提交程序到应用市场,经过漫长的审核后才可让用户更新,每改动一个小地方都需要重新打新版本。
2433 0
|
JavaScript 前端开发 Android开发
Ionic 开发中遇到的常见问题及解决方案
Ionic 常见问题及解决方案
8379 0
|
Web App开发 索引
Ionic 2 开发(一)_安装与目录结构
由于公司开始使用后ionic 进行前段开发,现在需要学习下ionic,虽然是后台开发,但是还是有必要了解下的 安装Node.js 官网:http://nodejs.cn/ 自行下载安装 安装Ionic npm install -g cordova npm install -g ionic 设置淘宝镜像 npm config set registry https://registry.
1099 0
|
Web App开发 移动开发 JavaScript
Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App
原文:Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App 安装VS2015 Update2的过程是非常曲折的。还好经过不懈的努力,终于折腾成功了。 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错。
1794 0
|
缓存 JavaScript Android开发
Ionic 1 & 2 开发常见问题 Q&A
原文发表于我的技术博客 本文分享了在 Ionic 1 & 2 版本开发过程中常见问题的一些 Q&A,供慕课网同学或其他朋友参考。原文发表于我的技术博客 1. 版本的问题 Ionic 2 目前属于快速迭代更新的版本,版本的更新会带来如文件结构和少许代码的变更,不过底层还是构建于 Angular 2 ...
1533 0
ionic开发之用户头像修改-图片选择与上传
用户头像修改,图片选择上传,非常常用的功能,本来打算和wap版一样,也用XMLHttpRequest和FormData来处理图片异步上传,结果在手机上测试的时候发现,onload事件没有触发,没找到原因,本来想省点事才不用插件去实现这个功能的,这下看来只能用插件了。
1698 0
|
移动开发 前端开发 JavaScript
【技术干货】前端开发之IONIC移动端开发
Ionic是一套HTML5 Hybrid Mobile应用开发框架,本文给大家介绍的是如何在MAC下搭建Ionic开发平台和开发移动端应用。快点戳进来看看吧~
6004 0
|
前端开发 JavaScript iOS开发
ionic react-native和native开发移动app到底那个好
ionic react-native和native开发移动app那个好 ? 移动端开发如何选型?这里介绍一下我眼中的ionic,react-native,native 三种移动端开发选型对比。欢迎大家补充指正一、 跨平台特性    ionic : write once, run anywhere (...
1206 0
|
JavaScript 开发工具 Python
使用cordova+Ionic+AngularJs进行Hybird App开发的环境搭建手册
一,所需工具       1,JDK:生成     2,安卓SDK开发环境     3,NodeJs:主要使用的还是npm     4,Python开发环境     5,VS 2012(2008,2015也可以,已亲测):安装这个主要是需要一些.net的东西,也没具体查是啥,图个省事。
1483 0