当前位置: 首页 > news >正文

vue和cordova项目整合打包,并实现vue调用android的相机的demo

经过网上查找很多资料,发现很多只有vue+cordova的项目整合,但是vue使用cordova插件的文章很少,现在把从创建cordova和创建vue到vue使用插件到项目打包到android手机运行过程记录下来;

先上项目结构目录
图片描述


cordova项目创建

1、安装cordova环境这个这边就不描述了,网上很多教程
2、创建cordova应用

cordova create app com.demo app

cordova create 创建cordova项目 app为目录 com.demo命名空间 app项目名称

3、添加平台

cd app
cordova platform add android

cd命令进入到项目文件夹里面添加安卓平台,要添加ios就把安卓换成ios就可以了

4、编译安卓app

cordova build android

编译安卓系统,如果成功就表示编译完成
注:如果没编译成功,那么就用检查环境命令去检查

cordova requirements

运行命令后会有提示环境或者其他问题

5、cordova emulate android
在安卓模拟器上运行

cordova serve android

在浏览器上面运行

cordova run android

在安卓手机上面运行,前提是电脑连接了安卓手机并且装好驱动和打开usb调试

到这里cordova项目创建完成


vue项目创建

1、vue环境和webpack安装这边就不详述了,网上很多
2、安装好vue后进入到cordova项目里面

vue init webpack vue

最后的‘vue’为项目的名字
3、图片描述

4、根据图上面提示的cd 指向vue项目后 npm run dev用开发模式跑起来项目

vue和cordova项目整合

1、把cordova项目的index.html里面的meta标签和cordova.js引用复制到vue项目的index.html
图片描述

2、修改vue项目里面的配置,直接上图,图片描述

到这里修改完成

添加cordova插件

这里以相机为例
1、进入到cordova项目目录,不是vue
图片描述

cordova plugin add cordova-plugin-camera

添加相机插件

cordova plugin ls

列出所有已安装的cordova插件

参考w3c的文档https://www.w3cschool.cn/cord...

到这里cordova安装的相机插件

重点来了:vue怎么用相机

1、修改vue项目的main.js的写法
图片描述

添加deviceready事件监听,当cordova设备准备完成后再new vue
2、创建一个js文件,我这边叫cordovaplugin.js
图片描述

3、修改App.vue文件,增加按钮和事件调用
图片描述

到这边就完成了,剩下编译和打包
4、进入vue文件夹

npm run build

图片描述

到这边vue项目编译完成
5、回到cordova项目文件夹,进行打包
图片描述

cordova run android

运行到安卓手机上,前提是有用手机连接电脑

完成-手机截图

图片描述

图片描述

相关文章:

  • 《PC端通过http的方式请求并带上cookie》
  • SUSE常用命令
  • 开源运维堡垒机(跳板机)系统 Jumpver v0.1.0 架构说明
  • 小米电视屏蔽广告规则
  • 第五章 程序结构
  • VMWare 中安装VMWareTools (Centos系统 和 Windows 系统)
  • bootstarp
  • nginx优化
  • canvas 高仿 Apple Watch 表盘
  • 软件测试(原书第二版)目录
  • 宋江是怎么当上老大的
  • Django之ORM
  • 免费的协作和协同办公软件平台onlyoffice轻松部署
  • 一名游戏开发者的告白
  • docker的Dockerfile指令
  • [Vue CLI 3] 配置解析之 css.extract
  • 「译」Node.js Streams 基础
  • Angular 响应式表单之下拉框
  • Apache Zeppelin在Apache Trafodion上的可视化
  • download使用浅析
  • export和import的用法总结
  • express.js的介绍及使用
  • git 常用命令
  • HTTP那些事
  • JavaScript对象详解
  • JavaScript设计模式之工厂模式
  • jQuery(一)
  • JWT究竟是什么呢?
  • Quartz实现数据同步 | 从0开始构建SpringCloud微服务(3)
  • Transformer-XL: Unleashing the Potential of Attention Models
  • Twitter赢在开放,三年创造奇迹
  • vuex 笔记整理
  • webpack项目中使用grunt监听文件变动自动打包编译
  • 闭包--闭包之tab栏切换(四)
  • 构建二叉树进行数值数组的去重及优化
  • 讲清楚之javascript作用域
  • 离散点最小(凸)包围边界查找
  • 前端技术周刊 2019-01-14:客户端存储
  • 一起来学SpringBoot | 第十篇:使用Spring Cache集成Redis
  • 一些关于Rust在2019年的思考
  • 积累各种好的链接
  • 数据库巡检项
  • #pragma once与条件编译
  • #图像处理
  • #在线报价接单​再坚持一下 明天是真的周六.出现货 实单来谈
  • (1)(1.19) TeraRanger One/EVO测距仪
  • (1)SpringCloud 整合Python
  • (附源码)spring boot智能服药提醒app 毕业设计 102151
  • (附源码)ssm本科教学合格评估管理系统 毕业设计 180916
  • (经验分享)作为一名普通本科计算机专业学生,我大学四年到底走了多少弯路
  • (一)基于IDEA的JAVA基础10
  • (转)【Hibernate总结系列】使用举例
  • (转)Scala的“=”符号简介
  • .“空心村”成因分析及解决对策122344
  • .MSSQLSERVER 导入导出 命令集--堪称经典,值得借鉴!