Cordova+Vue+Mint-UI+Android构建Andriod app Cordova插件(二)

Demo:https://download.csdn.net/download/javon_huang/10839244

安装vue-cordova环境:npm install --save vue-cordova

概要简介:为了方便插件的管理和调用，需封装一个底层的插件js，再通过全局声明的方式方便调用，以避免代码冗长。

引入创建底层接口cordovaplugin.js并引入cordova.js

import Vue from 'vue'
import VueCordova from 'vue-cordova'

Vue.use(VueCordova, {
    optionTestKey: 'optionTestValue'
})
if (window.location.protocol === 'file:' || window.location.port === '3000') {
    var cordovaScript = document.createElement('script')
    cordovaScript.setAttribute('type', 'text/javascript')
    cordovaScript.setAttribute('src', 'cordova.js')
    document.body.appendChild(cordovaScript)
}
export default {
    //cordova plugin add cordova-plugin-backbutton:监听手机物理按键
    appBackButton() {
        let exitAppTicker = 0;
        document.addEventListener("deviceready", function () {
            document.addEventListener("backbutton", function () {
                if (exitAppTicker == 0) {
                    exitAppTicker++;
                    setTimeout(function () {
                        exitAppTicker = 0;
                        history.go(-1);
                    }, 200);
                } else if (exitAppTicker == 1) {
                    navigator.app.exitApp(); //退出app
                }
            }, false);
        }, false);
    },
}

再在mian.js中全局声明cordovaplugin.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import 'mint-ui/lib/style.css'
import MintUI from 'mint-ui'
import axios from './services/appServer'
import store from './store/appStore'
import cordovaplugin from './services/cordovaplugin'

//配置导航守卫
router.beforeEach((to, from, next) => {
  next(true);
});
router.afterEach((to, from) => {
  // ...
  if(from.fullPath == '/portal'){
    //alert('页面信息保存成功！');
  }
});
cordovaplugin.appBackButton();
Vue.use(MintUI);
Vue.prototype.$axios=axios;
Vue.prototype.$cordovaplugin=cordovaplugin;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>',
})

插件一、物理按键监听插件：cordova plugin add cordova-plugin-backbutton

可用于监听手机物理返回键监听制作双击返回即退出app.代码详情见：步骤一。

插件二、获取手机定位信息：cordova plugin add cordova-plugin-geolocation:获取手机定位

//接口封装
appGetLocation(result) {
        if (!Vue.cordova.geolocation) {
            return 'Vue.cordova.geolocation not found !'
        }
        Vue.cordova.geolocation.getCurrentPosition((position) => {
            result({
                latitude: position.coords.latitude,
                longitude: position.coords.longitude,
                Altitude: position.coords.altitude,
                Accuracy: position.coords.accuracy,
                AltitudeAccuracy: position.coords.altitudeAccuracy,
                Heading: position.coords.heading,
                Speed: position.coords.speed,
                Timestamp: position.timestamp
            });
        }, (error) => {
            result(error)
        }, {
                timeout: 1000,
                enableHighAccuracy: true
            })
        return result;
    }

//引用
methods: {
    getLocation: function() {
     let that = this;
     that.$cordovaplugin.appGetLocation((res)=>{
        console.log(res);
        that.locationMsg=res;
     });
    }
  }

插件三、调用手机相机：cordova plugin add cordova-plugin-camera

调用手机相机发起拍照动作，并返回照片地址。

 

//接口封装
 appCamera(result) {
        if (!Vue.cordova.camera) {
            window.alert('Vue.cordova.camera not found !')
            return
        }
        Vue.cordova.camera.getPicture((imageURI) => {
            result(imageURI);
        }, (message) => {
            window.alert('FAILED : ' + message)
        }, {
                quality: 50,
                destinationType: Vue.cordova.camera.DestinationType.FILE_URI
            })
    }
//引用
methods: {
    appCamera: function() {
      let that = this;
      that.$cordovaplugin.appCamera((res)=>{
        console.log(res);
        that.cameraImg=res;
     });
    }
  }

插件四、多图片获取：cordova plugin add https://github.com/giantss/cordova-plugin-ImagePicker.git 此插件不属于cordova官方插件，在安装过程中可能会遇到些问题，可以参考以下地址进行解决:https://github.com/giantss/cordova-plugin-ImagePicker

//接口封装
 chosenMultipleImg:function(maximum,result){
        if (!window.ImagePicker) {
            window.alert('window.ImagePicker not found !');
        }
        window.ImagePicker.getPictures(
            function(res) {
                result(res);
            }, function (error) {
                console.log('Error: ' + error);
            }, {
                maximumImagesCount: maximum,
                quality: 100
            }
        );
    }
//引用
methods: {
    chosenMultipleImg: function(maximum) {
      let that = this;
      that.$cordovaplugin.chosenMultipleImg(maximum,function(res){
        console.log(res);
        that.imgList =res;
      });
    }
  }

插件五、二维码生成与读取：cordova plugin add phonegap-plugin-barcodescanner

//生成二维码
    appBarcodescannerEncode(contant,result) {
        if (!cordova.plugins.barcodeScanner) {
            window.alert('Vue.cordova.plugins.barcodeScanner not found !')
            return
        }
        cordova.plugins.barcodeScanner.encode(cordova.plugins.barcodeScanner.Encode.TEXT_TYPE, contant, function (success) {
            console.log(success);
            result(success);
        }, function (fail) {
            alert("encoding failed: " + fail);
        });
    },
    //读取条码
    appBarcodescannerScan(result) {
        if (!cordova.plugins.barcodeScanner) {
            window.alert('Vue.cordova.plugins.barcodeScanner not found !')
            return
        }
        cordova.plugins.barcodeScanner.scan(
            function (success) {
                result(success);
            },
            function (error) {
                alert("Scanning failed: " + error);
            }
         );
    },
//引用
methods: {
    barcodescannerEncode: function() {
      let that = this;
      that.$cordovaplugin.appBarcodescannerEncode("https://api.jianxunsoft.com/Edison/common/file/getOSS?bucket=edison&key=dev/designer/U00000000101/201811291024046.jpg",function(res) {
        console.log(res);
      });
    },
    barcodescannerScan: function() {
      let that = this;
      that.$cordovaplugin.appBarcodescannerScan(function(res) {
        console.log(res);
      });
    }
  }

插件六、打开文件资源管理器，返回被选择的文件的绝对路径：cordova plugin add https://github.com/laden666666/cordovaDialogsPlus

//封装
appOpenChooseFile(result) {
        if (!window.navigator.dialogsPlus) {
            window.alert('window.navigator.dialogsPlus not found !')
            return
        }
        window.navigator.dialogsPlus.chooseFile('测试', (success) => {
            result(success);
        }, (errer) => {
            console.log(errer);
        });
    }
//引用
methods: {
    openChooseFile: function() {
      let that = this;
      that.$cordovaplugin.appOpenChooseFile(function(res) {
        console.log(res);
      });
    },
  }