环境配置这里就不讲述了，很多文章都有写，而且写的很详细了
目录结构及注意点
完整的项目目录
注：vue项目我并没有放在该cordova项目里，因为这个并不一定要放在一起，只需要打包后的文件复制过来即可，后面会讲到
androidstudio选择打开的目录
两个www文件夹的区分
这个要重点讲
cordova目录下的www文件夹
?红框标注的是vue打包后复制过来的文件，这里的打包文件是cordova build android 后生成apk里显示的内容
android目录下的www文件夹
?红框标注的也是vue打包后的文件，这个是在androidstudio上在线运行项目显示的页面内容
简而言之：
????????如果打包apk测试就替换cordova下的www文件夹中vue打包文件；
????????如果在线运行就替换android下的www文件夹中vue打包文件
vue项目目录
vue代码编写
这里主要讲如何使用cordova插件，即调用原生android权限（照相、相册、位置等），这里只写其中几个，其他插件使用方法可以参考Cordova 教程_w3cschool
大家注意看里面的注释哦?
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>vueapp</title>
<!-- 这个cordovajs不需要我们自已引入，打包后会在www文件下自动生成，上面的目录截图里有，可以仔细看一下 -->
<script type="text/javascript" src="cordova.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
?main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
console.log(navigator)
// 监听cordova启动，等启动后再做页面渲染
// 如果要在线运行vue项目看页面效果，可以把这个方法先注释掉，打包的时候再还原即可
document.addEventListener('deviceready', function() {
// 查看电池电量
window.addEventListener("batterystatus", onBatteryStatus, false);
function onBatteryStatus(info) {
alert("BATTERY STATUS: Level: " + info.level + " isPlugged: " + info.isPlugged);
}
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
}, false)?App.vue
<template>
<div id="app">
<p>测试</p>
<!-- 获取当前地理位置 -->
<button id="cordovaDevice" @click="useLocal">地理位置</button>
<!-- 使用相机功能按钮 -->
<button @click="useCameraPlugin('SAVEDPHOTOALBUM')">从文件夹获取</button>
<button @click="useCameraPlugin('Camera')">使用相机</button>
<!-- 获取图片的展示 区域 -->
<img id="myImage" style="height: 200px;">
</div>
</template>export default {
name: 'App',
data(){
return{
}
},
methods: {
// type：SAVEDPHOTOALBUM/Camera 分别是调用图库文件和调用相机
// 这里的Camera是打包后从自动生成的cordova.js里获取的，在线运行vue项目的时候点击会报错，但是打包后能正常使用插件
// navigator是指当前浏览器的信息，可以直接调用
useCameraPlugin (type) {
const sourceTypeObj = { "SAVEDPHOTOALBUM":Camera.PictureSourceType.SAVEDPHOTOALBUM, "Camera" :Camera.PictureSourceType.Camera}
let sourceType = sourceTypeObj[type]
// 下面的写法是参照h3c，网址在上面给出来了
navigator.camera.getPicture(onSuccess, onFail, {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: sourceType
});
function onSuccess(imageData) {
document.getElementById('myImage').src = "data:image/jpeg;base64," + imageData;
}
function onFail(message) {
alert('Failed because: ' + message);
}
},
// 下面的写法是参照h3c，网址在上面给出来了
useLocal() {
alert("Cordova version: " + device.cordova + "\n" +
"Device model: " + device.model + "\n" +
"Device platform: " + device.platform + "\n" +
"Device UUID: " + device.uuid + "\n" +
"Device version: " + device.version);
}
},
}
?这里的打包配置文件其实改不改都没有什么影响
如果你的vue文件放在了cordova项目目录下，你可以改成没注释的的内容，但是要注意的是，打包后，之前的打包文件仍然存在，所以还是需要手动先将之前的打包文件删除掉，再重新执行打包vue项目命令；
我是觉得反正都要手动删除，就懒得把项目放在一起，后面也不方便多个vue使用同一个外壳，就保留了原始的打包配置（注释掉的地方），然后手动删除之前的打包文件，然后再复制新的打包文件，以后如果项目上线，只做页面的升级也是这么处理的
运行效果
vue项目在线运行
?android在线运行
?
over 填坑结束
有问题评论留言哦