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文件和其他资源),往常我们必须通过提交程序到应用市场,经过漫长的审核后才可让用户更新,每改动一个小地方都需要重新打新版本。
2371 0
|
Android开发
ionic3项目实战教程 - 第13讲 ionic3社交分享(QQ分享和微信分享)
ionic3项目实战教程 - 第13讲 ionic3社交分享(QQ分享和微信分享) 图片发自简书App 这一讲主要包含以下几个部分: 1.在微信开放平台创建应用获得wechatappid; 2.
1404 0
|
Android开发 iOS开发
ionic3项目实战教程 - 第12讲 ionic3制作icon和splash
这一讲主要包含以下几个部分: 1.设计icon; 2.设计splash; 3.生成各个平台各个尺寸的icon和splash; 1.设计icon 来,打开你的PS,新建-文件,像素为1024*1024,背景透明,确定; .
1168 0
|
Web App开发
ionic3项目实战教程 - 第11讲 ionic3个人中心界面设计
ionic3项目实战教程 - 第11讲 ionic3个人中心界面设计 这一讲主要包含一下几个部分: 1.个人中心ts具体代码展示; 2.个人中心html具体代码展示; 3.
1365 0
ionic3项目实战教程 - 第10讲 ionic3分类菜单设计(类似外卖)
注意,干货来了,相比前面几讲这一讲就要难以消化多了,请做好心理准备。 因为在这之前,经常看到有群友在求这种分类菜单的组建,今天我就为大家再造一个轮子 [微笑脸]。
1086 0
|
Web App开发
ionic3项目实战教程 - 第8讲 ionic3商品详情页的实现
这一讲主要包含以下几个部分: 1.创建商品详情页 2.获取商品详情页的数据 3.展示商品详情页的数据 1.创建商品详情页 执行 ionic g page product-details 8-1.
1061 0
|
Web App开发
ionic3项目实战教程 - 第9讲 ionic3应用内主题浏览器ThemeableBrowser的使用
这一讲主要实现商品的"抢购"功能 1.安装ThemeableBrowser插件; 2.使用ThemeableBrowser插件; 1.安装插件 分别执行以下命令: ionic cordova plugin add cordova-plugin-t...
1435 0
ionic3项目实战教程 - 第7讲 ionic3商品列表页的实现
这一讲主要包含以下几个部分: 1.创建商品列表页 2.根据分类获取商品列表 2.展示商品列表 1.创建商品列表页 执行 ionic g page product-list 7-1.
870 0
ionic3项目实战教程 - 第5讲 ionic3商城首页透明导航栏设计
这一讲主要包含以下几个部分 1.配置APP主色调; 2.设置ion-content组建的fullscreen属性; 3.设计透明导航栏 配置APP主色调; 找到src/theme/variables.
1329 0
|
Go
ionic3项目实战教程 - 第4讲 ionic3商城首页设计(幻灯片+图标分类)
商城首页主要包含以下几个部分 1.使用ion-slide实现首页幻灯片; 2.使用ion-grid实现商品分类; 3.使用ion-list实现商品列表; 说一下实现思路 1.先获取网络请求的数据,查看数据结构; 2.根据数据结构来判断需要展示的数据,编写html; 3.调整界面样式,编写scss; 准备工作 开始之前请到阿里开源图标库准备首页需要的小图标,不想自己找的同学,在文章最后的交流群的群文件里有导出好的资源小图标,下载后直接放到项目的src/assets/icon/目录中即可。
1124 0