vue在移动端调用扫一扫功能_vue移动端扫描二维码

一、 uni.app 但是H5不支持

uni.scanCode(OBJECT) ： 调起客户端扫码界面，扫码成功后返回对应的结果。
平台差异：

示例代码

// 允许从相机和相册扫码
uni.scanCode({
	success: function (res) {
		console.log('条码类型：' + res.scanType);
		console.log('条码内容：' + res.result);
	}
});

// 只允许通过相机扫码
uni.scanCode({
	onlyFromCamera: true,
	success: function (res) {
		console.log('条码类型：' + res.scanType);
		console.log('条码内容：' + res.result);
	}
});

// 调起条码扫描
uni.scanCode({
	scanType: ['barCode'],
	success: function (res) {
		console.log('条码类型：' + res.scanType);
		console.log('条码内容：' + res.result);
	}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

二、使用HTML5+ API

barcode
创建扫码识别控件对象

Barcode plus.barcode.create(id, filters, styles, autoDecodeCharset);
1
2

id: ( String ) 必选 扫码识别控件的标识
可用于通过plus.barcode.getBarcodeById()方法查找已经创建的扫码识别控件对象。

filters: ( Array[Number] ) 可选 条码类型过滤器
条码类型常量数组，默认情况支持QR、EAN13、EAN8类型。 通过此参数可设置扫码识别支持的条码类型（注意：设置支持的条码类型越多，扫描识别速度可能将会降低）。

styles: ( BarcodeStyles ) 可选 扫码识别控件样式
用于设置扫码控件在页面中显示的样式，如扫码框、扫码条的颜色等。

autoDecodeCharset: ( Boolean ) 必选 自动解码字符集
可取值：

false - 将二维码解码数据当做utf-8字符集处理，对于非utf-8字符集数据可能会出现乱码
true - 自动检测二维码解码数据，兼容处理utf-8、GBK、Big5编码格式的字符
默认值为false。

<template>
  <div class="codeScan" :style="{height:screenHeight + 'px'}" v-if="scaning">
    <div id="qr"></div>
    <div class="act">
      <div class="button" v-if="!flashOpen" @click="openFlash">
        <svg class="icon " aria-hidden="true">
          <use xlink:href="#icon-shoudiantong_guan"></use>
        </svg>
      </div>
      <div class="button" v-else @click="closeFlash">
        <svg class="icon " aria-hidden="true">
          <use xlink:href="#icon-shoudiantong_kai"></use>
        </svg>
      </div>
      <div class="button">
        <van-icon name="cross" @click="cross"/>
      </div>
    </div>
  </div>
</template>
<script>
import {plusReday} from "@/utils/plus";
import {Toast} from "vant";

let scanner
export default {
    data() {
        return {
            scaning: false,
            screenHeight: document.documentElement.clientHeight,
            flashOpen: false,
        };
    },
    watch: {
        scaning(v) {
            if (v) {
                this.scan();
            } else {
                this.endScan();
            }
        }
    },
    mounted() {
        this.screenHeight = document.documentElement.clientHeight;
    },
    methods: {
        scan() {
            plusReday().then(async ({barcode}) => {
                this.scaning = true
                await this.$nextTick();
                scanner = new plus.barcode.Barcode("qr", [plus.barcode.QR, plus.barcode.EAN8, plus.barcode.EAN13], {position: "absolute"});
                scanner.start();   // 开始识别
                scanner.onmarked = (type, result, file) => {       // 条码识别成功事件
                    console.log("扫描结果", result)
                    this.cross()  // 成功后关闭控件
                };
                scanner.onerror = err => {               // 条码识别失败事件
                    console.log('失败', err)
                    Toast('设备二维码扫描失败,请从新扫描二维码!')
                    this.cross()
                };
            });
        },
        // 开启闪光灯
        openFlash() {
            this.flashOpen = true;
            scanner.setFlash(true);
        },
        // 关闭闪光灯
        closeFlash() {
            this.flashOpen = false;
            scanner.setFlash(false);
        },
        // 关闭扫码控件
        endScan() {
            if (this.scaning) {
                scanner.close();   // 关闭条码识别控件
            }
            setTimeout(() => {
                this.scaning = false;
            }, 100);
        },
        cross() {
            this.endScan()
        }
    }
};
</script>
<style lang="scss" scoped>
.codeScan {
  background-color: #000;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;

  #qr {
    width: 100%;
    height: calc(100% - 150px);
  }

  .act {
    display: flex;
    color: #393939;
    margin: 30px auto;
    justify-content: center;

    .button {
      background-color: rgba(255, 255, 255, 0.6);
      border-radius: 50%;
      height: 60px;
      width: 60px;
      margin: 0 30px;
      display: flex;
      justify-content: center;
      align-items: center;

      .icon {
        width: 30px;
        height: 30px;
        text-align: center;
      }
    }
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127