vue在移动端调用扫一扫功能
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/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);
}
});
二、使用HTML5+ API
barcode
创建扫码识别控件对象
Barcode plus.barcode.create(id, filters, styles, autoDecodeCharset);
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>
GitHub 加速计划 / vu / vue
80
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 6 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)