vue-app

开发人员联系方式：[email protected]
代码库：https://github.com/chenjia/vue-app
示例：http://47.100.119.102/vue-app
目的：使用cordova打造一款跨平台的app。

附上electron打包桌面系统链接：https://blog.csdn.net/weixin_39648546/article/details/90409037

准备环境：nodejs、android_studio 或 xcode
npm安装：

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

一、创建cordova项目
1.创建项目目录

cordova create vue-app com.lxt.vue.app
cd ./vue-app

2.安装相应平台

#这里依据自己的开发环境而定
cordova platform add android		
cordova platform add ios		

3.添加相应插件

#此插件用于热更新app
cordova plugin add cordova-hot-code-push-plugin	

插件文档地址：https://github.com/nordnet/cordova-hot-code-push/wiki/Listen-for-update-events
这里重点描述一下，该插件有两个小缺陷
1）只能帮你更新www目录下的静态资源，且无法显示更新进度
2）并不包括原生插件的更新，如果需要更新原生部分的功能建议重新下载app

第一个缺陷有人在github上扩展了此插件，提供了下载进度的功能，需要将插件的原生部分实现替换掉，感谢开源社区带来的力量，插件参考地址：https://github.com/SandLZ/cordova-hot-code-push

第二个问题因框架原因，没有较好的解决方案。个人的做法是维护一个原生的版本号，如果不一致就在打开app的时候跳转到一个线上的地址提示用户重新下载该app，这种方式似乎也能接受。

此时项目环境已经基本搭建完毕，此时你的vue-app/www目录下可以换成你app的html5代码实现。你可以用任意主流的前端框架通过npm run build后打包生成的静态代码替换原有内容，angular、vue、react开发的都可以，这三种作者都试过。
使用安卓平台的同学注意了，建议加上一个浏览器插件cordova-plugin-crosswalk-webview，原因是使用的chrome的内核能，加快app（内嵌的浏览器）的运行速度，统一安卓浏览器版本，执行cordova build android可以打包出apk文件。

打包好apk后，如果app需要更新时，先将新的www目录资源更新后，执行cordova-hcp build,
该命令会生成两个文件chcp.json和chcp.manifest，第一个文件记录了版本更新的信息，第二个文件记录了需要更新的文件及hash码，插件就是根据这些hash码来判断是否需要重新下载这个文件的。这里提供一个小技巧，在vue-app目录下创建一个cordova-hcp.json文件：

{
  "content_url": "http://47.100.119.102/vue-app",
  "update": "now",
  "appVersion":"1.0.0",
  "nativeVersion": "1.0",
  "description":[
  	"1. 优化首屏加载速度",
    "2. 修复少量的bug",
    "3. 测试增量更新功能"
  ]
}

这样你在每次执行cordova-hcp build后会默认用这个json文件里面的内容为模版，你需要指定在线更新的web服务器地址content_url，这里的appVersion和nativeVersion用于后续判断更新的逻辑，description是版本更新内容的描述。

build之后生成的这两个文件连同www目录下的文件一并部署到外网可访问的web服务器上。你可以使用github或者gitlab，如果有自己的外网服务器那更好（github更新较慢）。
如果你的 cordova-hot-code-push-plugin 是用的默认配置，那么打开app会自动更新，更新的原理是app打开后会从你的web服务器上下载最新的静态文件。

这种方式很傻，只能在app打开后就直接下载更新文件，如果你是有追求的人那么应该按照下面的方式来做，可以实现比较人性化的提示。用上面那位好人（SandLZ）扩展的插件，替换掉安装插件cordova-hot-code-push-plugin的原生文件，安卓的是java文件，ios是.h和.m文件。然后在config.xml里面设置在线更新地址和禁止自动更新和禁止自动安装。

<chcp>
    <config-file url="http://47.100.119.102/vue-app" />
    <auto-download enabled="false" />
    <auto-install enabled="false" />
</chcp>

到目前为止，在线更新的配置就告一段落了，剩下的是在www目录里面的html5代码里面加上在线更新的逻辑（提示更新及显示版本信息）。具体代码因项目各异就不贴出来了，可以参考https://github.com/SandLZ/cordova-hot-code-push里面的文档实现，作者自己的实现在https://github.com/chenjia/vue-app/blob/master/src/utils/version.js 里面。

version.checkForUpdate 负责检查是否有新版本
version.fetchUpdate 负责下载更新文件
version.installUpdate 负责安装新版本

每个步骤你都可以通过js来定制，是不是很灵活？
你还可以在系统设置中提示用户是否有新的版本可供下载，如果有则显示一个new的小图标提示用户可以更新。甚至，你还可以集成极光推送这种推送的插件，在发布新版本后直接推送消息给用户提示版本更新，当用户点击通知后调用js里面的version.checkForUpdate实现直接更新。

好了，最后附上效果图：