參考文章：https://blog.csdn.net/u011042316/article/details/83828371
https://segmentfault.com/a/1190000014101362
一、建立vue項目和cordova項目步驟略過....
---------------------以下修改的都是vue項目--------------------------------
二、使用最簡單的方法調用相機接口 (HelloCordova.vue)
<template>
<div>
<button id="btn1" @click='takePic'>點擊拍照</button>
<button id="btn2">從相冊中獲取</button>
<img style="display:block;width:100%;" id="image">
</div>
</template>
<script>
export default {
data: function (){
return {
}
},
methods: {
takePic() {
navigator.camera.getPicture(success,error,{});
function success(fileurl) {
var image=document.getElementById("image")
image.src=fileurl;
}
function error() {
}
}
},
};
</script>
這裏面省略的很多配置，如getPicture裏面的option參數都未配置，詳細可見官網https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/index.html
三、main.js文件裏面主要就是這一段：添加deviceready事件監聽，當cordova設備準備完成後再new vue
document.addEventListener('deviceready', function() {
new Vue({
el: '#app',
router,
render: h => h(App),
})
}, false);
四、index.html裏面修改爲，主要是添加幾行meta信息和cordova.js：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
五、修改config/index.js文件：
我跟參考的文件不一樣，我沒有修改生成文件的路徑，只修改了assetsSubDirectory和assetsPublicPath:，最後是通過拷貝的方式覆蓋cordova項目的www文件的
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: '',
assetsPublicPath: '',
proxyTable: {
'/api': {
target: 'http://10.70.61.83:8093',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
-----------------------------------以上結束vuei項目修改-------------------------------
執行vue項目的編譯命令npm run build。 在根目錄下生成dist文件夾，將所有文件複製到cordova的www文件夾下。
-----------------------------------以下修改cordova項目---------------------------------
一、使用cordova plugin add cordova-plugin-camera 添加相機插件，可用cordova plugin ls檢查
二、使用cordova build android對項目進行打包
-----------------------------------結束對cordova項目操作----------------------------