Github代码地址：https://github.com/coffeelife/HotCodeTest.git

搭建Cordova环境教程网址：https://rensanning.iteye.com/blog/2163892

//使用教程git clone https://github.com/coffeelife/HotCodeTest.gitcd HotCodeTestnpm install -g cordova
npm install -g ripple-emulator
cd HotCodeTestnpm install
cordova platforms add android@5//5代表安卓版本号，5以上的话ripple emulate需要使用iphone模拟器cordova platforms add ios@5//5版本可以兼容异形屏//各个端运行ripple emulate//chrome浏览器运行，前提安装了ripple-emulatecordova run android//platforms安装了androidcordova run ios//platforms安装了ios

背景

现在很多应用和游戏都使用热更新功能，常见的热更新框架有微软的codepush,还有JsPatch，本篇文章介绍一下我们原来是用过的hotCode热更框架，原来做Cordova项目使用过热更新，主要方便苹果发版，苹果发版每次都要经过审核流程，需要时间太长，因此引入了Cordova内部的hotCode插件，来解决频繁发版的问题。

此项目以Cordova项目为基础，我是在Mac下操作所有流程，需要有一个用来存放热更新源文件的服务器，当然需要可以外网访问到，然后需要安装node.js和Cordova环境，需要Android和ios开发环境支持。

Cordova环境搭建

搭建Cordova环境教程网址：https://rensanning.iteye.com/blog/2163892

注意：安装Cordova之前需要安装Android环境，具体按照上面网址配置

安装Cordova

//安装node.js
npm -v//检测是否安装成功
npm install -g cordova//安装Cordova CLI
cordova -v//检测cordova是否安装成功

创建Cordova项目

cordova cordova create HotCodeTest com.gm.test.hotcode HotCodeTest

HotCodeTest为工程名称

com.gm.test.hotcode为工程包名

HotCodeTest为项目名称

为项目添加平台支持

//进入工程目录cd HotCodeTestcordova platforms add ios //添加ios平台cordova platforms add android 添加android平台//注意 我这为了兼容使用了Android 5.0的版本cordova platforms add android@5

5cdd1ebf9c06f61381

添加成功之后

package.json

{
  "name": "com.gm.test.hotcode",
  "displayName": "HotCodeTest",
  "version": "1.0.0",
  "description": "A sample Apache Cordova application that responds to the deviceready event.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "ecosystem:cordova"
  ],
  "author": "Apache Cordova Team",
  "license": "Apache-2.0",
  "dependencies": {//ios和Android平台版本
    "cordova-android": "^5.2.2",
    "cordova-ios": "^5.0.1"
  },
  "devDependencies": {
    "cordova-plugin-whitelist": "^1.3.3"
  },
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {}
    },
    "platforms": [//ios和Android平台
      "ios",
      "android"
    ]
  }
}

此时你会发现项目目录地下platforms多了ios和android两个目录

运行项目

如果想要在chrome浏览器中查看效果的话，可以安装一个工具Ripple Emulator

npm install -g ripple-emulator

在浏览器中查看效果

ripple emulate

这样会在localhost的4400开启一个服务，并会自动打开浏览器查看效果。

访问网址：http://localhost:4400/?enableripple=cordova-3.0.0

效果如图

5cdd2169330e864915

在真机上查看效果，安卓的话，可以用Android studio引入项目，然后运行到手机上也可以使用下面的命令行；ios的话可以用xcode引入项目，然后运行到模拟器或者真机上，效果如图

cordova run android//运行到Android虚拟机或者真机上
cordova run ios//运行到ios虚拟机或者真机上

5cdd227f9dca916505

使用hotCode插件(plugin)

使用cordova内置的hotcode插件：cordova-hot-code-push-plugin

流程示意图

5cde6c53221ed63559

1. 用户打开你的app.

2. 插件初始化，在后台进程启动 升级加载器（update loader）.

3. Update loader 从 config.xml 取 config-file 配置（一个url），并从此url加载一段 JSON 配置. 然后它把这段JSON配置中的 release 版本号 和当前app 已经安装的进行比较. 如果不同 - 进入下一步.

4. Update loader 使用app配置（application config）中的 content_url ，去加载清单文件（manifest）. 它会找出自上次升级以来，哪些文件需要更新.

5. Update loader 从 content_url下载更新文件.

6. 如果一切顺利 - 发出一个"升级文件已经准备好，可以安装了"的通知.

7. 升级文件已安装, app重新进入更新过的页面.

安装hotcode

npm install -g cordova-hot-code-push-cli//全局安装hotcode工具cordova plugin add cordova-hot-code-push-plugin//添加热更新插件

安装完成之后package.json文件如下

"dependencies": {
    "cordova-android": "^5.2.2",
    "cordova-hot-code-push-plugin": "^1.5.3",//多了这个插件
    "cordova-ios": "^5.0.1"
  },
  "devDependencies": {
    "cordova-plugin-whitelist": "^1.3.3"
  },
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-hot-code-push-plugin": {}//多了这个插件
    },
    "platforms": [
      "ios",
      "android"
    ]
  }

配置hotcode配置文件

在项目根目录下的config.xml文件中添加内容