利用ionic实现IOS和Android端热更新简单搭建

1、热更新的好处?
通常ionic源码包括(html、javaScript css文件和其他资源)往常我们必须通过提交程序到应用市场、经过漫长的审核用户更新、每一个更改的小地方都需要从新打包编译。现在ionic通过使用cordova插件cordova-hot-code-push 实现ios与Android端代码功能、可不必要应用市场平台审核、便可以实现动态的app源码的目的。
2、热更新实现原理
这里写图片描述
3、基础实现方式
3.1、安装cordova-hot-code-push-cli
使用命令安装

npm install -g cordova-hot-code-push-cli

主要是生成检测配置文件,通常在www目录下动态生成chcp.jsonchcp.manifest生成两个文件、插件源码地址:https://github.com/nordnet/cordova-hot-code-push
3.2、创建项目
包含www目录的项目、已经有的项目无需创建
3.3、安装热更新插件
使用命令安装

ionic plugin add cordova-hot-code-push-plugin
ionic plugin add cordova-hot-code-push-local-dev-addon

4、打包封装
执行命令cordova-hcp build 或者cordova build
5、启动hcp server服务
从新打开一个终端窗口,cd到项目目录(包含www目录的父级项目目录)执行命令

cordova-hcp server

稍后会www目录下动态生成chcp.jsonchcp.manifest生成两个文件
6、正常运行完成前4个步骤在config.xml动态加入如图所示的连接地址
这里写图片描述
这里写图片描述
图中链接地址https://1980480f.ngrok.io/chcp.json,修改为在第8步www目录里chcp.json文件可访问的地址:例如:http://kaibin.me/hotcode/chcp.json
7、运行代码或打包我们的App
8、修改我们想要更新的代码
然后修改 chcp.json 文件的 content_url ,此地址为我们项目放置的地址

{
  "autogenerated": true,
  "release": "2018.05.30-11.36.13",
  "content_url": "http://kaibin.me/hotcode",
  "update": "now"
}

9、将项目www目录代码上传到服务器可访问的目录里
例如在服务器根目录创建hotcode命名的目录将项目www里的文件上传上去
10、 关闭我们的应用重新打开,看看代码是否更新成功
11、创建cordova-hcp模板
11.1、线上测试可卸载掉 cordova-hot-code-push-local-dev-addon防止每次自动更新新版本,可通过命令卸载:

cordova plugin remove cordova-hot-code-push-local-dev-addon

可以在 cordova 项目根目录下放一个 cordova-hcp.json,这是个模板文件
这样每次执行 cordova-hcp build就会利用这个模板生成新的 chcp.json,而不用手动更改 www/chcp.json了。
cordova-hcp.json内容如下:

{
  "autogenerated": true,
  "content_url": "http://kaibin.me/hotcode",
  "min_native_interface": 1, // app内核版本号
  "ios_identifier": "https://itunes.apple.com/cn/app/***", // iOS上线后的地址,用于内核版本更新后的确认跳转
  "update": "now"
}

12、Build options build设置,配置开发环境、测试环境与生产环境
在 /Cordova/Testproject/ 下创建 chcpbuild.options 文件,文件内容如下:

{
  "dev": {
    "config-file": "https://dev.kaibin.me/hotcode/www/chcp.json"
  },
  "production": {
    "config-file": "https://kaibin.me/hotcode/chcp.json"
  },
  "QA": {
    "config-file": "https://test.kaibin.me/hotcode/chcp.json"
  }
}

这样在build app的时候, 转为开发要用的服务器, 可执行:

ionic build -- chcp-dev

结果就是, 特定拍下的 config.xml 文件(比如, /Cordova/TestProject/platforms/android/res/xml/config.xml) 变成了这样:

<chcp>
  <config-file url="https://dev.kaibin.me/hotcode/chcp.json"/>
</chcp>

当我们需要上架app的时候 (Google Play, App Store) - 我们正常build

ionic build --release

这样 config.xml 不会改变

如果没有使用 chcpbuild.options 插件会使用 config.xml 里面默认的值。
文件必须位于 Cordova 项目根目录. 在这个文件里面,指定(JSON格式) 所有想改变 config.xml 文件的配置,源文件 config.xml (Cordova项目根目录) 不会发生变动, 改变的是 特定平台下的 config.xml (在cordova build过程的 after_prepare 阶段)。

第一步、将 myApp 目录下 config.xml <chcp> <auto-download enabled="true" /> <auto-install enabled="true" /> <config-file url="http://192.168.1.34:8080/myApp/www/chcp.json" /> <local-development enabled="true" /> </chcp> 地址改为自己的地址。 第二步、将myApp\platforms\android\app\src\main\res\xml目录下 config.xml <chcp> <auto-download enabled="true" /> <auto-install enabled="true" /> <config-file url="http://192.168.1.34:8080/myApp/www/chcp.json" /> <local-development enabled="true" /> </chcp> 第三步、myApp\platforms\android\app\src\main\assets 目录下 .chcpenv { "content_url": "http://192.168.1.34:8080/myApp/www/", "config_url": "http://192.168.1.34:8080/myApp/www/chcp.json" } cordova-hcp.json { "autogenerated": true, "update": "start", "content_url": "http://192.168.1.34:8080/myApp/www/" } 的 地址改为自己的 地址 第四步、将android项目导入Android Studio 第五步、 myApp\platforms\android\app\src\main\assets 目录下 执行 cordova-hcp build 命令后将www 目录下的所有文件拷贝到你自己的 文件服务器上。 第六步、启动服务器 第七步、发布安装app程序。 第八步、修改www目录下的文件信息,重新执行第五步。 第七步、再次打开app程序("update": "start",需两次)。 cordova-hcp.json { "autogenerated": true, "update": "start", "content_url": "http://192.168.1.34:8080/myApp/www/" } start - app启动时安装更新. 默认值. resume - app从后台切换过来的时候安装更新. now - web内容下载完毕即安装更新. 注意:网站的路径
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值