当前位置: 首页 > Web前端 > HTML

vue和cordova工程集成打包,实现vue调用android摄像头的demo

时间:2023-04-02 12:48:34 HTML

在网上查了很多资料,发现只有vue+cordova的项目集成很多,但是关于vue使用cordova插件的文章却很少。下面记录一下从创建cordova、创建vue到在vue中使用插件到将项目打包到android手机的过程;首先在项目结构目录下创建一个cordova项目1.安装cordova环境。此处不赘述。网上有很多教程。2.创建一个cordova应用cordovacreateappcom.demoappcordovacreate创建一个cordova项目app为目录com.demo命名空间app项目名3.添加平台cdappcordovaplatformaddandroidcd命令进入项目文件夹添加Android平台.要添加ios,请将Android替换为ios。4.编译Androidappcordovabuildandroid编译Android系统。:如果编译不成功,则使用checkenvironment命令检查cordova要求。运行命令后,会有环境或其他问题的提示。手机端运行,前提是电脑连接安卓手机并安装好驱动并打开usb调试。cordova项目是在这里创建的。vue项目已创建。1、vue环境和webpack安装这里就不详述了。网上有很多。2.安装vue进入cordova项目后,vueinitwebpackvue的最后一个'vue'是项目名称3、4.根据上面的cd指向vue项目,npmrundev运行在开发模式和项目vue和cordova项目集成1.将cordova项目的index.html中的meta标签和cordova.js引用复制到vue项目的index.html中。2.修改vue项目中的配置,直接上图,这里完成修改并添加cordova插件这里以摄像头为例1.输入进入cordova项目目录,不是vuecordovapluginaddcordova-plugin-cameraaddcameraplugincordovapluginls列出所有已安装的cordova插件参考w3c文档https://www.w3cschool.cn/cord...cordova安装的摄像头插件重点来了:如何在vue中使用摄像头1、修改vue项目的main.js,增加deviceready事件监听。当cordova设备准备就绪时,然后新建vue2.创建一个js文件,我这里的名字是cordovaplugin.js3,修改App.vue文件,在这边添加按钮和事件调用,剩下的编译打包4.进入vue文件夹npmrunbuild编译vue项目到这里就完成了5.回到cordova项目文件夹,打包cordovarunandroid在安卓手机上运行,??前提是手机连接电脑即可完成——手机截图