vue-app
示例:目的:使用cordova打造一款跨平台的app。准备环境:nodejs、android_studio 或 xcodenpm安装:npm install -g cordova cordova-hot-code-push-cli一、创建cordova项目1.创建项目目录cordova create vue-app com.lxt.vue.appcd ./vue-app2.安装相应...
开发人员联系方式:251746034@qq.com
代码库: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实现直接更新。
好了,最后附上效果图:
更多推荐
所有评论(0)