学习Vue+Cordova打包编译App，首先你要安装Cordova与vue，在这里本人就不说明了，自行看文档与搜索相关资料。javascript
Vue中文官网地址html
navigator.camera.getPicture是调用camera的方法，他会附带三个参数，cameraSuccess是提供图像数据的回调函数。，cameraError是提供错误消息的回调函数，CameraOptions是可选参数来自定义相机设置参数（对象类型）。vue
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); }, },
上面的代码是整个调用的过程，注意下图是自定义相机设置参数的详细属性键值对说明java
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项目中config/index.js，修改其中的build打包模块，设置成打包到cordova生成的项目目录中的www文件，仿照下图设置，便可。android
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项目中依次执行webpack
cordova plugin cordova-plugin-cameraweb
cordova platform add android@6.2.0npm
注意：这里为何要添加安卓平台6.2.0呢，由于目前cordova-plugin-camera插件须要的安卓平台是小与6.3.0的，而你默认的添加的就是6.3.0。app
这里就不具体写详细步骤了，这里会发现一个问题，再无任何报错的且代码都正常的时候，没法调用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>