赞
踩
参考地址:
https://www.cnblogs.com/huanhuan55/p/11541683.html
https://www.cnblogs.com/e0yu/p/7843505.html
https://blog.csdn.net/qq_39816586/article/details/90700002
http://blog.sina.com.cn/s/blog_60b5e13e0102xnse.html
https://blog.csdn.net/qq_35844177/article/details/78951825
http://www.html5plus.org/doc/zh_cn/barcode.html
参考Demo:https://blog.csdn.net/qq_37896578/article/details/96480198
项目代码:
<template> <div class="scan"> <div @click="sao">扫一扫</div> <!-- <button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="startCanOne" @click="ben">识别本地</button> --> <div id="bcid"> </div> </div> </template> <script> let scan = null let filters=null let styles = {frameColor: "#0f0",scanbarColor: "#0f0"};//边框属性,中间线属性,背景色 export default { data () { return { codeUrl: '', } }, methods: { sao(){ $('#bcid').css({'display':'block'}); let that=this that.startRecognize () that.startScan () }, // 创建扫描控件 startRecognize () { let that = this if (!window.plus) return scan = new plus.barcode.Barcode('bcid',filters,styles) scan.onmarked = onmarked function onmarked (type, result, file) { switch (type) { case plus.barcode.QR: type = 'QR' break case plus.barcode.EAN13: type = 'EAN13' break case plus.barcode.EAN8: type = 'EAN8' break default: type = '其它' + type break } result = result.replace(/\n/g, '') that.codeUrl = result alert(result) if(result=='我是冯昭'){ // window.location.href="http://www.baidu.com" that.closeScan(); $('#bcid').css({'display':'none'}); }else{ // window.location.href="https://www.51zxw.net/" that.closeScan(); $('#bcid').css({'display':'none'}); } } }, // 开始扫描 startScan () { if (!window.plus) return scan.start() }, // 关闭扫描 cancelScan () { if (!window.plus) return scan.cancel() }, // 关闭条码识别控件 closeScan () { if (!window.plus) return scan.close() }, } } </script>
关注我的微信公众号【前端基础教程从0开始】,加我微信,可以免费为您解答问题。回复“1”,拉你进程序员技术讨论群。回复“小程序”,领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”,领取300G前端,Java,微信小程序,Python等资源,让我们一起学前端。
<style lang="less"> .scan { height: 100%; #bcid { width: 100%; position: fixed; left: 0; right: 0; top: 0; bottom: 0; height: 100%; text-align: center; color: #fff; background-color: black; display: none; } } </style>
hBuilder如何使用,上面的参考地址有
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。