cordova + vue cli构建跨平台应用
一、开发环境搭建
node.js
二、cordova
主要用于将开发好的网页打包成APP,支持的平台有:Android、IOS、Blackberry 10、OS X、Ubuntu、Windows、WP8。官网
2.1 安装
npm i cordova -g
复制代码
2.2新建项目
cordova create 项目名称
复制代码
2.3添加平台
可添加的平台:Android、IOS、Blackberry 10、OS X、Ubuntu、Windows、WP8 运行前需要配置平台的sdk,配置方法就不详细描述了,官网都有详细的说明。 cordova platform add 平台名
cordova platform add android
复制代码
2.4添加插件
插件搜索页 cordova plugin add 插件名
示例: 添加热更新插件
cordova plugin add cordova-hot-code-push-plugin
复制代码
2.5运行调试
运行前需要配置平台的sdk,配置方法就不详细描述了。Android配置
cordova run 平台名
复制代码
示例:cordova run android 运行安卓
2.6打包成安装文件
该操作会将cordova项目下的www目录打包成网页;
cordova build 平台名
复制代码
三、 vue
官网 非官方文档:个人推荐收藏这个网址,资源比较丰富。
3.1安装
npm install --global vue-cli
复制代码
3.2新建项目
注意:在cordova项目下新建项目
vue init webpack 项目名
复制代码
3.3安装依赖
在vue项目下执行
npm i
复制代码
3.4打包
在vue项目下执行
npm run build
复制代码
3.5调试
在vue项目下执行
npm run dev
复制代码
四、整合vue与cordova
4.1更vue改打包方式
打开vue项目下的config/index.js文件按图指示修改文件
4.2vue添加cordova依赖
更改vue下的index.html文件,在添加以下内容。
<script src="cordova.js"></script>
复制代码
4.3打包应用
在vue目录下执行vue的打包命令,然后回到cordvoa目录下运行打cordova的打包命令。
4.4 自定义脚本命令
每次测试的时候先要,在vue下输入npm run build,然后在输入cordova run build,这里我们通过自定义脚本整合这两个命令。
1. 更改vue下的package.json 如下面的代码所示:在最后加入一条("android": "npm run build && cordova run android"),这句话等同于在命令行中输入npm run build && cordova run android
..."scripts": {"dev": "node build/dev-server.js","start": "node build/dev-server.js","build": "node build/build.js","unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run","e2e": "node test/e2e/runner.js","test": "npm run unit && npm run e2e","lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs","android": "npm run build && cordova run android"}...
复制代码
2. 运行 命令行输入npm run 自定义的脚本名,示例:npm run android
五、热更新插件
5.1安装依赖
1. 添加自动更新插件
cordova plugin add cordova-hot-code-push-plugin
复制代码
2. 开发环境依赖 不安装该插件会导致,本地运行后网页得不到更新。
cordova plugin add cordova-hot-code-push-local-dev-addon
复制代码
3. 安装自动更新客户端,一台电脑只需要安装一次。
npm install -g cordova-hot-code-push-cli(使用见发布更新)
复制代码
5.2cordova-hcp.json
在cordova项目跟目录下新建该文件。
key | 含义 | 说明 |
---|---|---|
content_url | 项目地址 | 放在服务器上的项目地址 |
update | 更新方式 | app的更新方式 |
update的可选值
值 | 含义 |
---|---|
start | app启动时更新,默认为该值 |
resume | app从后台回复时更新 |
now | 下载完成后立即更新 |
示例
{ "update": "start", "content_url": "http://60.205.169.27:80/cordovaDemo/www"
}
复制代码
5.3config.xml
在cordova项目根目录下为该文件添加新的配置,在config-file中填写chcp.json的地址,默认位置为www/chcp.json。
<widget>...<chcp><auto-download enabled="true" /><auto-install enabled="true" /><config-file url="http://60.205.169.27:80/cordovaDemo/www/chcp.json" />
<!--发布时更改为false,否则更新无法使用。--><local-development enabled="true" /></chcp>...
</widget>
复制代码
5.4发布更新
- 在cordova项目下执行cordova-hcp build.此时会在www目录下生成chcp.json,chcp.manifest两个文件,chcp.json中有部分内容与之前配置的cordova-hcp.json文件相同。
- 将根cordova目录下的www目录替换服务器上的www目录
5.5两个重要方法
两个方法配合使用,先获取更新信息,然后在安装更新。
方法名 | 作用 |
---|---|
fetchUpdate | 获取更新信息 |
installUpdate | 自动下载并安装更新 |
开发过程中会遇到一些错误,见error 详情
5.6JS代码示例
document.addEventListener('deviceready', () => {let chcp = window.chcpchcp.fetchUpdate(function (error, data) {if (!error) {chcp.installUpdate((err) => {let msg = '更新成功'if (err) {msg = JSON.stringify(err)}window.alert(msg)})} else {if (error.code === 2) {window.alert('无更新')} else {window.alert(`error:${JSON.stringify(error)};data:${JSON.stringify(data)}`)}}})
}, false)
复制代码
参考
用 Vue.js 架构 Webapp 进阶笔记
cordova + vue cli构建跨平台应用相关推荐
- Vue CLI构建SPA项目教你手把手创建SPA项目
下载安装Vue-CLI 官方文档:https://cli.vuejs.org/zh/ 首先要确定自己的电脑上安装了 Node.js 8.9 或更高版本. 然后,我们就可以使用 npm 来安装 vue/ ...
- cli vue 外部js 引入 文件_javascript - vue cli构建的项目中,vue组件里怎么引入外部js文件里的方法...
问 题 我想在content组件里调用外部js(test.js)里的diyfun方法,怎么实现呢? 我的content组件代码: Click export default { data () { re ...
- Cordova+Vue构建Hybrid APP简易实操
当下APP市场,因为Native APP开发成本高,Web APP不稳定,混合开发APP大行其道,成为越来越多开发者的首选.Hybrid APP开发框架也比较多,Weex.Ionic.PhoneGap ...
- 前端工作笔记-Nginx安装及vue cli部署
目录 Linux中Nginx安装 vue cli部署 Linux中Nginx安装 这里找了一台Linux机器: tar –zxvf xxxxx.gz 换root来搞 ./configure make ...
- vue安装Postcss_Flask和Vue.js构建全栈单页面web应用【通过Flask开发RESTful API】
前言: 看了一些国外的关于介绍flask和vue的前后端分离的文章,但没看到比较通俗易懂,代码完善的,直到昨天看到一篇新出的文章,而且内容非常棒,所以翻译过来,供大家一起学习. 原文来自Develop ...
- Vue学习笔记:使用CLI构建Vue项目
Vue学习笔记:使用CLI构建Vue项目 一.安装Vue CLI 要用到集成在node.js里的npm来安装Vue CLI. 1.下载并安装node.js 2.配置node.js的环境变量 3.启动命 ...
- Vue CLI 脚手架详解:快速构建 Vue.js 项目的利器
目录 一.安装和创建项目 二.项目结构 三.开发和构建 四.插件和配置 Vue CLI 是 Vue.js 官方提供的脚手架工具,它可以帮助开发者快速搭建 Vue.js 项目的基础结构,并提供了丰富的功 ...
- 开发APP新选择:使用 Vue Native 构建移动应用
Vue Native 是一个 JavaScript 框架,旨在使用 JavaScript 构建可以在 Android 和 iOS 上运行的跨平台移动应用程序.通过封装 React Native,开发人 ...
- cordova+vue打包apk
vue+cordova开发移动APP项目 一.环境(版本及配置) 1.node 12.13.1 执行命令查看版本 node -v 显示版本号则安装成功. 2.cordova 9.0.0 执行命令查看版 ...
最新文章
- 启动oracle em命令
- 前端遍历导致查询数据时间过长_OLAP 服务器,空间换时间可行吗?
- 深度学习RCNN, Fast-RCNN, Faster-RCNN的一些事
- 【Pygame小游戏】剧情流推荐:什么样的游戏才能获得大家的喜欢呢?(魔鬼恋人、霸总娇妻版)
- windows下wamp安装
- 四色原型图进行业务建模的思考
- 阿里双11大促秒杀活动下的缓存技术与高水位限流实现
- python什么是堆什么是栈_python中堆和栈_Python小知识00002
- DateTimeFormat注解
- Atitit 常见每日流程日程日常工作.docx v7 r8f
- 基于PHP+MySQL的个人网页设计与实现
- java 经纬度度分秒转度_用java实现经纬度坐标度分秒与度批量转换
- 利用Office公式编辑器特殊处理逻辑的免杀技术分析(CVE-2017-11882)
- 推荐三款自己使用过的鼠标手势插件
- php函数大小写转化,php大小写转换函数(strtolower、strtoupper)用法介绍
- matlab多重积分编程,多重积分的MATLAB实现.pdf
- 1.windows11开启wsl2并安装Ubuntu 20.04
- mitmproxy系列抓包工具使用与实战
- HTML及CSS学习笔记 06 - CSS简介和常见的选择器
- Json解析后添加到ListView控件上
热门文章
- NeurIPS 2019公布获奖论文!新增杰出新方向奖项,微软华裔研究员斩获经典论文...
- 科技创新2030—“新一代人工智能”重大项目拟立项的2018年度项目公示清单
- 华为发布 AR 地图技术,但最佳的运行设备不是手机
- 全球智能制造发展现状及前景预测 工业机器人引领行业发展
- 你值得拥有!更省钱地完成数据监听
- 腾讯 AI 医学进展破解“秃头”难题,登 Nature 子刊!
- 我酸了~腾讯员工平均月薪 7.6 万 | 每日趣闻
- vue-router 按需加载的 3 种方式
- 泛型委托在项目中的应用
- 通过jquery的serializearray处理表单数据成json格式,并提交到后台处理