一发皿、安裝Cordova及Vue-cli
首先確保本地需要有Android運行環(huán)境
安裝Cordova：
npm i cordova -g
安裝Vue-cli：
npm i -g vue-cli
二、使用cordova初始化項目并安裝android平臺
使用命令行進入開發(fā)目錄后執(zhí)行:
cordova create vueapp
此命令會生成vueapp目錄拂蝎，vueapp即是完整的cordova項目,新建目錄時該路徑不要存在中文命名
進入vueapp目錄后執(zhí)行:
cordova platform add android
完成后執(zhí)行
cordova build android
會將項目默認的示例打包成apk,目錄在 vueapp\platforms\android\build\outputs\apk下穴墅，直接copy到手機進行安裝即可。
注:在進行build過程中，會用到sdk相關(guān)平臺包玄货，按要求進行安裝皇钞。
三、使用cordova初始化項目并安裝android平臺
使vueapp項目支持相關(guān)插件：
cordova plugin add cordova-plugin-geolocation #支持手機位置獲取
cordova plugin add cordova-plugin-camera #支持手機相機與相冊調(diào)用
cordova plugin add cordova-plugin-vibration #支持調(diào)用手機振動
cordova plugin add phonegap-plugin-barcodescanner #支持手機掃描二維碼
四誉结、創(chuàng)建Vue項目
在vueapp目錄下執(zhí)行：
vue init webpack vuesrc
此命令會生成vuesrc目錄鹅士，進入vuesrc目錄后執(zhí)行:
npm i
完成后的整個項目結(jié)構(gòu)如下
Screen Shot 2020-11-07 at 12.42.38 PM.png
vuesrc是我們的vue-cli整個項目的文件夾
www是cordova創(chuàng)建時生成的cordova的web文件夾
五、修改src下的index.html惩坑，加入cordova.js
<script src="cordova.js"></script>
Screen Shot 2020-11-07 at 12.44.10 PM.png
六掉盅、修改src下config
找到src里面config目錄下index.js，使其build生成到www目錄下
Screen Shot 2020-11-07 at 12.43.39 PM.png
這么做是因為cordova生成app時是讀取www目錄的內(nèi)容∫允妫現(xiàn)在開始我們就可以正常的把src目錄當成我們一般的vue項目進行開發(fā)了趾痘。
七、App.vue中業(yè)務(wù)的編寫
<template>
<div id="app">
<img :src="imgsrc" width="64" height="64"><br/>
<button @click="getposition(1)">獲取位置</button>
<span>{{msg}}</span><br/>
<button @click="getimage()">顯示本地圖片</button>
<button @click="getcode()">獲取二維碼</button><br/>
<span>{{codeinfo}}</span>
<router-view/>
</div>
</template>
<script>
import logo from './assets/logo.png'
export default {
name: 'App',
data:function(){
return {
imgsrc:logo,
msg:'cordova not init',
codeinfo:''
}
},
methods:{
getcode()
{
var me = this;
cordova.plugins.barcodeScanner.scan(
function (result) {
me.codeinfo="We got a barcode\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled;
},
function (error) {
alert("Scanning failed: " + error);
}
);
},
getimage()
{
var me= this;
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.FILE_URI,sourceType:0 });
function onSuccess(imageURI) {
me.imgsrc = imageURI;
}
function onFail(message) {
alert('Failed because: ' + message);
}
},
getposition:function(val)
{
navigator.vibrate(500);
var me = this;
var onSuccess = function(position) {
me.msg='Latitude:\t' + position.coords.latitude + '\n' +
'Longitude:\t' + position.coords.longitude + '\n' +
'Altitude:\t' + position.coords.altitude + '\n' +
'Accuracy:\t' + position.coords.accuracy + '\n' +
'Altitude Accuracy:\t' + position.coords.altitudeAccuracy + '\n' +
'Heading:\t' + position.coords.heading + '\n' +
'Speed:\t' + position.coords.speed + '\n' +
'Timestamp:\t' + position.timestamp + '\n';
};
// onError Callback receives a PositionError object
//
var error= function(error) {
me.msg='code: ' + error.code + '\n' +
'message: ' + error.message + '\n';
}
navigator.geolocation.getCurrentPosition(onSuccess, error,{maximumAge: 30000, timeout: 30000, enableHighAccuracy: val});
}
},
mounted(){
document.addEventListener("deviceready", onDeviceReady, false);
var me = this;
function onDeviceReady() {
me.msg="cordova is ready";
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
八蔓钟、編譯
在src目錄下執(zhí)行
npm run build
打包vue項目永票，所生成的相關(guān)文件會全部進入www目錄下。
進入vueapp目錄執(zhí)行
cordova build android
生成相關(guān)APK
使用USB連接你的手機執(zhí)行
cordova run android
運行結(jié)果
Screenshot_20201107-124433.jpg
