Vue基于Cordova调用扫一扫

最新推荐文章于 2024-07-24 16:21:45 发布

啟华

最新推荐文章于 2024-07-24 16:21:45 发布

阅读量1.2w

点赞数 10

分类专栏： vue cordova 文章标签： vue cordova

本文链接：https://blog.csdn.net/weixin_43098481/article/details/83141997

版权

cordova 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

Vue基于Cordova调用扫一扫

Vue使用Cordova打包的app如何调用扫一扫功能？在这里简单描述一下过程

Vue层面代码

1.在某个.vue里面添加下面代码

<template>
  <div id="app">
    <p>测试扫一扫</p>
    <!-- 扫一扫按钮 -->
    <button @click="handleClick" >扫一扫</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  el: '#app',
  methods: {
    handleClick: function () {
      // 扫一扫方法
      cordova.plugins.barcodeScanner.scan(
        function (result) {
          alert("We got a barcode\n" +
            "Result: " + result.text + "\n" +
            "Format: " + result.format + "\n" +
            "Cancelled: " + result.cancelled)
        },
        function (error) {
          alert(error)
        }
      )
    }
  }
}
</script>

2.在index.html 的引入cordova.js和cordova_plugins.js

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!--感谢作者：待花谢花开提供如何引入Cordova的方法-->
  <!--作者：待花谢花开-->
  <!--链接：https://www.jianshu.com/p/25d797b983cd-->
  <meta http-equiv="Content-Security-Policy"
        content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport"
        content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
  <!--來源：简书-->
  <!--简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。-->
  <title>vuetest</title>
  <!-- 引入cordova.js -->
  <script type="text/javascript" src="cordova.js"></script>
  <!-- 扫一扫包的引用 -->
  <script type="text/javascript" src="cordova_plugins.js"></script>

</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

在这里插入图片描述

3.src>main.js添加以下代码

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
document.addEventListener('deviceready', function () {
  new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
  })
  window.navigator.splashscreen.hide()
}, false)

在这里插入图片描述

4.控制台打 npm run build 生成 dist 把dist的文件全部复制到Cordova项目的www文件夹下并把www文件夹的全部替换。
在这里插入图片描述
替换后的截图

Cordova层面代码

1.新创建一个Cordova项目
2.控制台分别执行下面指令

//添加扫一扫插件
cordova plugin add phonegap-plugin-barcodescanner --save
//添加android平台的编译
cordova platform add android
//生成debug的apk
cordova build android

PS：插件添加成功后在config.xml会有下面标志
在这里插入图片描述

PS：成功build出apk的标志

啟华

关注

10
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
25
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录