簡單聊兩句
學(xué)習(xí)Vue+Cordova打包編譯App，首先你要安裝Cordova與vue药有，在這里本人就不說明了，自行看文檔與搜索相關(guān)資料。
第一步：首先在vue代碼中加入cordova-plugin-camera的調(diào)用方法
navigator.camera.getPicture是調(diào)用camera的方法桩撮，他會(huì)附帶三個(gè)參數(shù)，cameraSuccess是提供圖像數(shù)據(jù)的回調(diào)函數(shù)峰弹。店量，cameraError是提供錯(cuò)誤消息的回調(diào)函數(shù)，CameraOptions是可選參數(shù)來自定義相機(jī)設(shè)置參數(shù)（對象類型）鞠呈。
methods: {
//顯示選擇框事件
selectcamera: function() {
return this.sheetVisible=true;
},
//調(diào)用拍照
camera:function(){
//拍照設(shè)置參數(shù)
var cameraOptions={
quality: 50,
sourceType:1,
destinationType: Camera.DestinationType.FILE_URI,
};
//此處是官網(wǎng)提供的調(diào)用方法
navigator.camera.getPicture(this.cameraSuccess, this.cameraError, cameraOptions);
},
//調(diào)用相冊
photo:function(){
//拍照設(shè)置參數(shù)
var cameraOptions={
quality: 50,
sourceType:0,
destinationType: Camera.DestinationType.FILE_URI,
};
navigator.camera.getPicture(this.cameraSuccess, this.cameraError, cameraOptions);
},
//調(diào)取成功觸發(fā)事件
cameraSuccess:function(imageData){
return this.image=imageData;
},
//調(diào)取失敗觸發(fā)事件
cameraError:function(message){
alert(message);
},
},
上面的代碼是整個(gè)調(diào)用的過程融师，注意下圖是自定義相機(jī)設(shè)置參數(shù)的詳細(xì)屬性鍵值對說明
var cameraOptions = {
//這些參數(shù)可能要配合使用，如選擇了sourcetype是0蚁吝，destinationtype要相應(yīng)的設(shè)置為1：【返回文件的URI(content://media/external/images/media/2 for Android)】
quality: 50, //相片質(zhì)量0-100
destinationType: Camera.DestinationType.FILE_URI, //返回類型：DATA_URL= 0旱爆，返回作為 base64 編碼字串舀射。 FILE_URI=1，返回影像檔的 URI怀伦。NATIVE_URI=2后控，返回圖像本機(jī)URI
sourceType: Camera.PictureSourceType.CAMERA, //從哪里選擇圖片：PHOTOLIBRARY=0（從設(shè)備相冊選擇圖片）,相機(jī)拍照=1,SAVEDPHOTOALBUM=2,0和1其實(shí)都是本地圖庫
allowEdit: true, //在選擇之前允許修改截圖
encodingType:Camera.EncodingType.JPEG, //保存的圖片格式： JPEG = 0, PNG = 1
targetWidth: 200, //照片寬度
targetHeight: 200, //照片高度
mediaType:0, //可選媒體類型：圖片=0,默認(rèn)值,只允許選擇圖片將返回指定DestinationType的參數(shù)。 視頻格式=1空镜，允許選擇視頻浩淘，最終返回 FILE_URI(網(wǎng)址)。ALLMEDIA= 2吴攒，允許所有媒體類型的選擇张抄。
cameraDirection:0, //選擇攝像頭類型(前置攝像頭或者后面的攝像頭)：Back= 0(后置),Front-facing = 1(前置)
popoverOptions: CameraPopoverOptions, //CameraPopoverOptions,iOS特供,從iPad的系統(tǒng)相冊選擇圖片,指定popover的定位元素的位置箭頭方向和參數(shù)
saveToPhotoAlbum: true //保存進(jìn)手機(jī)相冊
};
第二步 使用Vue打包到Cordova生成的項(xiàng)目中
首先你要改vue項(xiàng)目中config/index.js，修改其中的build打包模塊洼怔，設(shè)置成打包到cordova生成的項(xiàng)目目錄中的www文件署惯，仿照下圖設(shè)置，即可镣隶。
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插件與添加安卓平臺(tái),
進(jìn)入Cordova項(xiàng)目中依次執(zhí)行
cordova plugin cordova-plugin-camera
cordova platform add android@6.2.0
注意：這里為什么要添加安卓平臺(tái)6.2.0呢极谊，因?yàn)槟壳癱ordova-plugin-camera插件需要的安卓平臺(tái)是小與6.3.0的，而你默認(rèn)的添加的就是6.3.0安岂。
第四步 使用Android studio 進(jìn)行真機(jī)調(diào)試即可
這里就不具體寫詳細(xì)步驟了轻猖，這里會(huì)發(fā)現(xiàn)一個(gè)問題，再無任何報(bào)錯(cuò)的且代碼都正常的時(shí)候域那，無法調(diào)用cordova-plugin-camera咙边，
解決辦法，要在vue項(xiàng)目中index.html中添加一個(gè)js次员，然后再重復(fù)上面步驟败许，應(yīng)該就會(huì)解決此問題
<!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>
