Cordova结合Vue学习Camera

最新推荐文章于 2020-12-29 08:14:48 发布

weixin_30305735

最新推荐文章于 2020-12-29 08:14:48 发布

阅读量152

点赞数

文章标签： javascript webpack 移动开发 ViewUI

原文链接：http://www.cnblogs.com/Free-Thinker/p/10762972.html

版权

简单聊两句

学习Vue+Cordova打包编译App，首先你要安装Cordova与vue，在这里本人就不说明了，自行看文档与搜索相关资料。

Cordova中文官网地址

Vue中文官网地址

第一步：首先在vue代码中加入cordova-plugin-camera的调用方法

navigator.camera.getPicture是调用camera的方法，他会附带三个参数，cameraSuccess是提供图像数据的回调函数。，cameraError是提供错误消息的回调函数，CameraOptions是可选参数来自定义相机设置参数（对象类型）。

 methods: {
    //显示选择框事件
    selectcamera: function() { return this.sheetVisible=true; }, //调用拍照 camera:function(){ //拍照设置参数 var cameraOptions={ quality: 50, sourceType:1, destinationType: Camera.DestinationType.FILE_URI, }; //此处是官网提供的调用方法 navigator.camera.getPicture(this.cameraSuccess, this.cameraError, cameraOptions); }, //调用相册 photo:function(){ //拍照设置参数 var cameraOptions={ quality: 50, sourceType:0, destinationType: Camera.DestinationType.FILE_URI, }; navigator.camera.getPicture(this.cameraSuccess, this.cameraError, cameraOptions); }, //调取成功触发事件 cameraSuccess:function(imageData){ return this.image=imageData; }, //调取失败触发事件 cameraError:function(message){ alert(message); }, },

上面的代码是整个调用的过程，注意下图是自定义相机设置参数的详细属性键值对说明

var cameraOptions = {
      //这些参数可能要配合使用，如选择了sourcetype是0，destinationtype要相应的设置为1：【返回文件的URI(content://media/external/images/media/2 for Android)】
      quality: 50,                                            //相片质量0-100 destinationType: Camera.DestinationType.FILE_URI, //返回类型：DATA_URL= 0，返回作为 base64 編碼字串。 FILE_URI=1，返回影像档的 URI。NATIVE_URI=2，返回图像本机URI sourceType: Camera.PictureSourceType.CAMERA, //从哪里选择图片：PHOTOLIBRARY=0（从设备相册选择图片）,相机拍照=1,SAVEDPHOTOALBUM=2,0和1其实都是本地图库 allowEdit: true, //在选择之前允许修改截图 encodingType:Camera.EncodingType.JPEG, //保存的图片格式： JPEG = 0, PNG = 1 targetWidth: 200, //照片宽度 targetHeight: 200, //照片高度 mediaType:0, //可选媒体类型：圖片=0,默认值,只允许选择图片將返回指定DestinationType的参数。 視頻格式=1，允许选择视频，最终返回 FILE_URI(网址)。ALLMEDIA= 2，允许所有媒体类型的选择。 cameraDirection:0, //选择摄像头类型(前置摄像头或者后面的摄像头)：Back= 0(后置),Front-facing = 1(前置) popoverOptions: CameraPopoverOptions, //CameraPopoverOptions,iOS特供,从iPad的系统相册选择图片,指定popover的定位元素的位置箭头方向和参数 saveToPhotoAlbum: true //保存进手机相册 };

第二步使用Vue打包到Cordova生成的项目中

首先你要改vue项目中config/index.js，修改其中的build打包模块，设置成打包到cordova生成的项目目录中的www文件，仿照下图设置，即可。

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../../my_app1/www/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../../my_app1/www'), assetsSubDirectory: '', assetsPublicPath: '', /** * SourceMap */ productionSourceMap: false, // https://webpack.js.org/configuration/devtool/#production devtool: '#source-map', // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report } }

第三步使用Cordova安装cordova-plugin-camera插件与添加安卓平台,

进入Cordova项目中依次执行

cordova plugin cordova-plugin-camera

cordova platform add android@6.2.0

注意：这里为什么要添加安卓平台6.2.0呢，因为目前cordova-plugin-camera插件需要的安卓平台是小与6.3.0的，而你默认的添加的就是6.3.0。

第四步使用Android studio 进行真机调试即可

这里就不具体写详细步骤了，这里会发现一个问题，再无任何报错的且代码都正常的时候，无法调用cordova-plugin-camera，

解决办法，要在vue项目中index.html中添加一个js，然后再重复上面步骤，应该就会解决此问题

<!DOCTYPE html>
<html>

<head> <meta charset="utf-8"> <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui"> <title>vueapp2</title> </head> <script src="cordova.js"></script> <body> <div id="app"> </div> <!-- built files will be auto injected --> </body> </html>