一、安裝Cordova及Vue-cli

首先確保本地需要有Android運(yùn)行環(huán)境

安裝Cordova：

npm i cordova -g

安裝Vue-cli：

npm i -g vue-cli

二、使用cordova初始化項(xiàng)目并安裝android平臺(tái)

使用命令行進(jìn)入開(kāi)發(fā)目錄后執(zhí)行:

cordova create vueapp

此命令會(huì)生成vueapp目錄，vueapp即是完整的cordova項(xiàng)目,新建目錄時(shí)該路徑不要存在中文命名

進(jìn)入vueapp目錄后執(zhí)行:

cordova platform add android

完成后執(zhí)行

cordova build android

會(huì)將項(xiàng)目默認(rèn)的示例打包成apk,目錄在 vueapp\platforms\android\build\outputs\apk下，直接copy到手機(jī)進(jìn)行安裝即可。

注:在進(jìn)行build過(guò)程中，會(huì)用到sdk相關(guān)平臺(tái)包，按要求進(jìn)行安裝。

三、使用cordova初始化項(xiàng)目并安裝android平臺(tái)

使vueapp項(xiàng)目支持相關(guān)插件：

cordova plugin add cordova-plugin-geolocation  #支持手機(jī)位置獲取
cordova plugin add cordova-plugin-camera  #支持手機(jī)相機(jī)與相冊(cè)調(diào)用
cordova plugin add cordova-plugin-vibration #支持調(diào)用手機(jī)振動(dòng)
cordova plugin add phonegap-plugin-barcodescanner #支持手機(jī)掃描二維碼

四、創(chuàng)建Vue項(xiàng)目

在vueapp目錄下執(zhí)行：

vue init webpack vuesrc

此命令會(huì)生成vuesrc目錄，進(jìn)入vuesrc目錄后執(zhí)行:

npm i

完成后的整個(gè)項(xiàng)目結(jié)構(gòu)如下

Screen Shot 2020-11-07 at 12.42.38 PM.png

vuesrc是我們的vue-cli整個(gè)項(xiàng)目的文件夾
www是cordova創(chuàng)建時(shí)生成的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

這么做是因?yàn)閏ordova生成app時(shí)是讀取www目錄的內(nèi)容?，F(xiàn)在開(kāi)始我們就可以正常的把src目錄當(dāng)成我們一般的vue項(xiàng)目進(jìn)行開(kāi)發(fā)了。

七、App.vue中業(yè)務(wù)的編寫(xiě)

<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項(xiàng)目，所生成的相關(guān)文件會(huì)全部進(jìn)入www目錄下。

進(jìn)入vueapp目錄執(zhí)行

cordova build android

生成相關(guān)APK

使用USB連接你的手機(jī)執(zhí)行

cordova run android

運(yùn)行結(jié)果

Screenshot_20201107-124433.jpg