资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/vue和cordova项目整合打包，并实现vue调用android的相机的demo

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

zhonghanwen / 2426人阅读

摘要：经过网上查找很多资料，发现很多只有的项目整合，但是使用插件的文章很少，现在把从创建和创建到使用插件到项目打包到手机运行过程记录下来先上项目结构目录项目创建安装环境这个这边就不描述了，网上很多教程创建应用创建项目为目录命名空间项目名称添加平台

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

先上项目结构目录

cordova项目创建

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

</>复制代码 
  1. cordova create app com.demo app

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

3、添加平台

</>复制代码 
  1. cd app
  2. cordova platform add android

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

4、编译安卓app

</>复制代码 
  1. cordova build android

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

</>复制代码 
  1. cordova requirements

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

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

</>复制代码 
  1. cordova serve android

在浏览器上面运行

</>复制代码 
  1. cordova run android

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

到这里cordova项目创建完成

vue项目创建

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

</>复制代码 
  1. 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

</>复制代码 
  1. cordova plugin add cordova-plugin-camera

添加相机插件

</>复制代码 
  1. 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文件夹

</>复制代码 
  1. npm run build

到这边vue项目编译完成
5、回到cordova项目文件夹，进行打包

</>复制代码 
  1. cordova run android

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

完成-手机截图

云服务器 GPU云服务器 vue整合webrtc 环信语音聊天vue demo vue 集成webrtc实时音视频demo vue中调用js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93852.html

相关文章

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

    摘要：经过网上查找很多资料，发现很多只有的项目整合，但是使用插件的文章很少，现在把从创建和创建到使用插件到项目打包到手机运行过程记录下来先上项目结构目录项目创建安装环境这个这边就不描述了，网上很多教程创建应用创建项目为目录命名空间项目名称添加平台 经过网上查找很多资料，发现很多只有vue+cordova的项目整合，但是vue使用cordova插件的文章很少，现在把从创建cordova和创建v...

    QiuyueZhong 评论0 收藏0

  • cordova+vue打包ios调用相机闪退解决

    摘要：项目打包，打开相机正常使用，但是打包后，需要多几个配置，才能打开，否则当调用的时候会闪退，上配置图需要在选中的文件里面添加也可以在里面配置，配置后就可以请求访问相机了 cordova+vue项目打包android，打开相机正常使用，但是打包ios后，需要多几个配置，才能打开，否则当调用的时候会闪退，上配置图showImg(https://segmentfault.com/img/bVb...

    Labradors 评论0 收藏0

  • cordova+vue打包ios调用相机闪退解决

    摘要：项目打包，打开相机正常使用，但是打包后，需要多几个配置，才能打开，否则当调用的时候会闪退，上配置图需要在选中的文件里面添加也可以在里面配置，配置后就可以请求访问相机了 cordova+vue项目打包android，打开相机正常使用，但是打包ios后，需要多几个配置，才能打开，否则当调用的时候会闪退，上配置图showImg(https://segmentfault.com/img/bVb...

    RancherLabs 评论0 收藏0

  • vue+Cordova

    摘要：系列安装安装搭建工程注自定义命名工程加入注自定义命名注意事项修改目录下的执行时，会把打包内容指定到文件夹内，根据文件夹内容构建。添加平台在加平台前，需要修改的内容，包名的命名一般是，与申请微信时所用的包名对应。 vue-cordova vue2.0系列+Cordova 安装vue-cli npm install -g vue-cli 安装Cordova npm install -g c...

    刘厚水 评论0 收藏0

发表评论

登陆后可评论

0条评论

zhonghanwen

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<