Cordova - 实现热更新 !

Cordova版本:8.0.0

更新APP平台:Android

操作系统:Windows

Cordova的热更新,作用是把www内的变动部分更新到APP中,实现主程序不动,完成更新!!这个热更新功能,对于IOS APP更有意义,因为,可以避免繁琐的苹果审核!!这个热更新几乎是所有Cordova开发都需要的功能!!!

Cordova热更新插件:https://github.com/nordnet/cordova-hot-code-push

Cordova热更新工具:https://github.com/nordnet/cordova-hot-code-push-cli

热更新,如何实现的?Cordova的热更新插件,靠什么去找到需要更新的程序呢?我们先不管这些问题了,先把上面插件和工具安装上再说!

一,安装Cordova热更新插件和热更新工具

1,安装Cordova热更新插件

cordova plugin add cordova-hot-code-push-plugin

cordova plugin add https://github.com/nordnet/cordova-hot-code-push.git

2,安装Cordova热更新工具,打开DOS窗口,输入下面命令后回车

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

假设,上面热更新插件和热更新工具都安装完毕了,那么回头看上面我提到的问题,应该搞清楚这些,那么就更容易理解和使用Cordova热更新插件了!

二,了解热更新重要文件和配置。

1,config.xml ,这个文件是Cordova工程配置文件,在Cordova工程的根目录。这里面需要加入一个很重要的配置项:

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

这个url,是Cordova热更新配置文件,JSON格式的,存放于需要热更新的程序根目录中,而且必须能够被Cordova以Http方式访问到,否则无法更新!!!下面是我的配置信息截图:

 2,cordova-hcp.json,这是Cordova热更新工具自动生成的文件,用于热更新工具编译。存放位置,Cordova工程根目录。下面是我的这个文件的配置项目:

复制代码

{
  "name": "CordovaHotUpdate",
  "ios_identifier": "",
  "android_identifier": "io.cordova.hellocordova",
  "update": "start",
  "content_url": "http://192.168.2.3"
}

复制代码

两个参数很重要,影响到是否可以更新和如何更新?

content_url:这是Cordova热更新程序存放目录,对应Cordova工程的www目录,以后程序变化之后,使用Cordova热更新工具编译之后,直接把www目录中所有文件覆盖这个目录中的所有文件就可以了。

update:这是热更新的方式,通过它决定以什么样的方式更新Cordova程序。

3,chcp.json,这是极其重要的一个文件,是否能够热更新,它起到至关重要的作用!这个文件存放目录,热更新程序的根目录。Cordova热更新插件进行热更新,必须首先访问这个文件,通过它来获取热更新程序存放目录,以及热更新方式!它的配置和上面的“cordova-hcp.json”基本一样。这个文件是Cordova热更新工具自动生成的文件。

4,chcp.manifest,这是极其重要的一个文件,是否能够热更新,它起到至关重要的作用!它里面记录了程序的变动。这个文件是Cordova热更新工具自动生成的文件。

三,实现热更新。前提是已经安装完了Cordova热更新插件和帮助工具。

注意:所有命令均是在Cordova工程目录下操作的,在DOS窗口执行命令之前,必须首先进入Cordova工程根目录

1,生成热更新相关配置文件。在DOS窗口,先进入Cordova工程根目录,随后在DOS窗口中输入下面命令:

cordova-hcp init

这个时候,窗口中会出现多个问题,等待你输入,最重要的是上面我提到的两个update和content_url,把上面问题都回答完毕后,回车就会生成了cordova-hcp.json,存放在Cordova根目录下!content_url,是非常重要的配置项,这是Cordova更新程序的在服务器上的存放目录,必须保证这个目录能够以http方式被访问,而且一定保证里面的chcp.json也能够以http方式访问(IIS应该设置一下才能访问扩展名为json的文件)。

2,用热更新帮助工具编译当前程序。在DOS窗口中输入下面命令。

cordova-hcp build

执行这个命令后,会很快编译完毕,如果程序不大的话,随后你会在www目录中发现两个文件:chcp.json和chcp.manifest,这两个文件,是这个热更新帮助工具自动生成的,不要手动去修改,否则如果修改错误了,热更新也应该不能完成了!

3,编译Cordova的APP。在DOS窗口输入对应APP编译命令,我是用Android做的APP,而且用真机连接测试,所以输入下面命令,直接把编译好的APP安装到了我的真机上。

cordova run android--device

4,修改Cordova的程序,随后再次用Cordova帮助工具编译。编译命令在上面:2

5,编译完毕后,把所有www目录,覆盖测试服务器中对应的文件。

6,重新启动APP。如果一切正常,那么你应该可以看到热更新完成了,这次修改的文件已经在你APP中显示出来了!这里也取决于你的update参数如何配置,具体配置说明,请参考官方文档说明。

可能引起困惑问题:

1,热更新服务器需要安装什么软件吗?什么软件都不需要安装,只需要你能保证存放热更新程序的目录以http方式正常访问,而且json格式的文件,也必须同样以Http方式访问到。

2,我只安装热更新插件,是否可以实现热更新?应该可以,但是比较麻烦,那些配置文件手动处理不太方便,而且还有一个标明文件变动的文件,那个处理应该很费解,最好还是使用Cordova帮助工具。

3,Cordova热更新帮助工具,有一个"server"命令,我是否需要?确实,这个工具提供了一个这样的命令,命令如下:

cordova-hcp server

这个命令,是帮助你在本地实现一个http服务器,测试Cordova热更新,也可以在开发时候使用这样方式来更新程序,真正在互联网上服务器实现热更新时候,不需要这个命令。

最后截图,是我的Android APP实现热更新之后的图片:

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第一步、将 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内容下载完毕即安装更新. 注意:网站的路径
cordova-hot-code-push-plugin 是 Cordova 平台下的一个插件,可以帮助开发者实现 APK 包热更新。下面是详细的使用教程: 1. 安装插件 在 Cordova 项目中执行以下命令安装插件: ```bash cordova plugin add cordova-hot-code-push-plugin ``` 2. 配置插件 在 Cordova 项目的 `config.xml` 文件中添加以下配置: ```xml <hcp> <auto-download enabled="true" /> <auto-install enabled="true" /> <widget id="com.example.app" version="0.0.1"> <content src="index.html" /> <platform name="android"> <preference name="android-minSdkVersion" value="16" /> <preference name="android-targetSdkVersion" value="30" /> <icon src="res/android/ldpi.png" density="ldpi" /> <icon src="res/android/mdpi.png" density="mdpi" /> <icon src="res/android/hdpi.png" density="hdpi" /> <icon src="res/android/xhdpi.png" density="xhdpi" /> <icon src="res/android/xxhdpi.png" density="xxhdpi" /> <icon src="res/android/xxxhdpi.png" density="xxxhdpi" /> <allow-navigation href="*" /> <allow-intent href="*" /> <access origin="*" /> </platform> </widget> </hcp> ``` 其中,`auto-download` 和 `auto-install` 分别表示是否开启自动下载和自动安装更新。`widget` 标签下的其他配置项与 Cordova 项目一致。 3. 打包 APK 在 Cordova 项目中执行以下命令打包 APK: ```bash cordova build android --release ``` 4. 生成更新包 在 Cordova 项目中执行以下命令生成更新包: ```bash cordova-hcp build ``` 该命令会在项目根目录下生成一个 `www.zip` 文件,该文件包含了需要更新的代码和资源。 5. 上传更新包 将 `www.zip` 文件上传到服务器上。可以使用任何支持 HTTP 文件下载的服务器,例如 Apache、Nginx 等。 6. 应用更新 在 Cordova 项目中引入 `chcp.js` 文件,并在应用程序启动时执行以下代码: ```javascript chcp.fetchUpdate(function(error, data) { if (error) { console.error('Failed to fetch update:', error); } else if (data) { console.log('Update is available:', data); chcp.installUpdate(function(error) { if (error) { console.error('Failed to install update:', error); } else { console.log('Update installed successfully'); } }); } else { console.log('No update available'); } }); ``` 该代码会检查是否有更新可用,并在有更新时下载并安装更新。 以上就是使用 cordova-hot-code-push-plugin 实现 APK 包热更新的详细教程。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值