参考文章：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项目操作----------------------------