Vue调用Cordova的Navtive功能:获取地理位置,手机振动,调取手机图片,扫描二维码

一、安装Cordova及Vue-cli

安装Cordova及相关依赖的具体教程在我上一篇文章里
安装Cordova:
npm i cordova -g
安装Vue-cli:
npm i -g vue-cli

二、使用cordova初始化项目并安装android平台

使用命令行进入开发目录后执行:
cordova create vueapp

此命令会生成vueapp目录,vueapp即是完整的cordova项目,新建目录时该路径不要存在中文命名

进入vueapp目录后执行:
cordova platform add android
完成后执行
cordova build android

会将项目默认的示例打包成apk,目录在 vueapp\platforms\android\build\outputs\apk下,直接copy到手机进行安装即可。

注:在进行build过程中,会用到sdk相关平台包,按要求进行安装。

三、使用cordova初始化项目并安装android平台

使vueapp项目支持相关插件:
cordova plugin add cordova-plugin-geolocation  #支持手机位置获取
cordova plugin add cordova-plugin-camera  #支持手机相机与相册调用
cordova plugin add cordova-plugin-vibration #支持调用手机振动
cordova plugin add phonegap-plugin-barcodescanner #支持手机扫描二维码

四、创建Vue项目

在vueapp目录下执行:
vue init webpack src
此命令会生成src目录,进入src目录后执行:
npm i

完成后的整个项目结构如下
在这里插入图片描述
红色框中的src是我们的vue-cli整个项目的文件夹
蓝绿框中的www是cordova创建时生成的cordova的web文件夹

五、修改src下的index.html,加入cordova.js

<script src="cordova.js"></script>

在这里插入图片描述

六、修改src下config

找到src里面config目录下index.js,使其build生成到www目录下

在这里插入图片描述
这么做是因为cordova生成app时是读取www目录的内容。现在开始我们就可以正常的把src目录当成我们一般的vue项目进行开发了。

七、App.vue中业务的编写

<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>
export default {
  name: 'App',
  data:function(){
    return {
      imgsrc:'./static/logo.png',
      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目录下执行
npm run build 

打包vue项目,所生成的相关文件会全部进入www目录下。

进入vueapp目录执行
cordova build android

生成相关APK

使用USB连接你的手机执行
cordova run android

在这里插入图片描述

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在Vue调用摄像头进行二维码扫描,可以使用第三方库JSQR来实现。首先,我们需要先安装JSQR库。 在Vue项目的终端中运行以下命令来安装JSQR: ``` npm install jsqr --save ``` 安装完成后,我们可以在Vue的组件中引入JSQR库,并使用它的方法来进行二维码扫描。 在需要调用摄像头进行扫描的组件中,我们可以创建一个video元素来预览摄像头捕获的图像,并创建一个canvas元素来展示扫描到的二维码。 ```vue <template> <div> <video ref="video" width="640" height="480"></video> <canvas ref="canvas" width="640" height="480" style="display:none"></canvas> </div> </template> <script> import jsQR from 'jsqr'; export default { mounted() { const videoElement = this.$refs.video; const canvasElement = this.$refs.canvas; const canvasContext = canvasElement.getContext('2d'); navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } }) .then(function (stream) { videoElement.srcObject = stream; videoElement.play(); requestAnimationFrame(tick); }); function tick() { if (videoElement.readyState === videoElement.HAVE_ENOUGH_DATA) { canvasContext.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height); const imageData = canvasContext.getImageData(0, 0, canvasElement.width, canvasElement.height); const code = jsQR(imageData.data, imageData.width, imageData.height, { inversionAttempts: "dontInvert" }); if (code) { console.log(code.data); // 打印扫描到的二维码信息 } } requestAnimationFrame(tick); } } }; </script> ``` 在以上代码中,我们在组件的mounted生命周期钩子中调用navigator.mediaDevices.getUserMedia函数来获取用户的媒体设备,然后将返回的流设置为video元素的srcObject,并通过调用play方法来开始预览。 在tick函数中,我们检查视频元素是否已准备好数据,并在每一帧中绘制视频帧到canvas元素上。接着,我们使用jsQR库来解析图像数据,获取扫描到的二维码信息。 最后,我们可以在控制台上打印出扫描到的二维码信息。你可以根据需要将其存储到变量中,或者进行其他操作。 这样,我们就可以在Vue调用摄像头进行二维码扫描了。记得在使用前检查浏览器是否允许访问摄像头,并在移动设备上调用前后置摄像头。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值