移动端实现扫一扫 扫码功能
第一种：如果是用uniapp开发 可以直接使用uni的语法 并且兼容多端
第二种：如果是开发浏览器的网页，基于微信的话，也可以用微信的weixin-js-sdk
具体流程参考官网：概述 | 微信开放文档
第三种：用第三方vue-qrcode-reader实现扫一扫功能，
详细流程参考官网：Simple | Vue Qrcode Reader
以下内容为用vue-qrcode-reader实现扫一扫功能步骤
1.下载vue-qrcode-reader依赖
// npm 下载
npm install –save vue-qecode-reader
// cnpm 下载
cnpm install –save vue-qrcode-reader
2.此次流程是在A页面添加扫一扫button，然后点击跳转到B页面，然后扫一扫写在B页面，进入B页面初始化，然后同意使用相机，在扫描到二维码后携带扫到的内容跳转到A页面
代码如下
import {QrcodeStream} from 'vue-qrcode-reader';export default {components: {QrcodeStream},data() {return {result: '', // 扫码结果信息error: '' // 错误信息}},methods: {onDecode(result) {if(result){this.$router.push({path:'/',query: {code:result,}})}},async onInit(promise) {try {await promise} catch (error) {if (error.name === 'NotAllowedError') {window.alert('您需要授予相机访问权限')this.$router.push({path:'/'})} else if (error.name === 'NotFoundError') {this.$router.push({path:'/'})window.alert('这个设备上没有摄像头')} else if (error.name === 'NotSupportedError') {this.$router.push({path:'/'})window.alert('所需的安全上下文(HTTPS、本地主机)')} else if (error.name === 'NotReadableError') {this.$router.push({path:'/'})window.alert('相机被占用')} else if (error.name === 'OverconstrainedError') {this.$router.push({path:'/'})window.alert('安装摄像头不合适')} else if (error.name === 'StreamApiNotSupportedError') {this.$router.push({path:'/'})window.alert('此浏览器不支持流API')}}},}}.saoma {width: 100vw;height: 100vh;}.qr-scanner {background-image:linear-gradient(0deg,transparent 24%,rgba(32, 255, 77, 0.1) 25%,rgba(32, 255, 77, 0.1) 26%,transparent 27%,transparent 74%,rgba(32, 255, 77, 0.1) 75%,rgba(32, 255, 77, 0.1) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(32, 255, 77, 0.1) 25%,rgba(32, 255, 77, 0.1) 26%,transparent 27%,transparent 74%,rgba(32, 255, 77, 0.1) 75%,rgba(32, 255, 77, 0.1) 76%,transparent 77%,transparent);background-size: 3rem 3rem;background-position: -1rem -1rem;width: 100%;/* height: 100%; */height: 100vh;position: relative;background-color: #1110;/* background-color: #111; */}.qr-scanner .box {width: 213px;height: 213px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);overflow: hidden;border: 0.1rem solid rgba(0, 255, 51, 0.2);/* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */}.qr-scanner .line {height: calc(100% - 2px);width: 100%;background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);border-bottom: 3px solid #00ff33;transform: translateY(-100%);animation: radar-beam 2s infinite alternate;animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);animation-delay: 1.4s;}.qr-scanner .box:after,.qr-scanner .box:before,.qr-scanner .angle:after,.qr-scanner .angle:before {content: '';display: block;position: absolute;width: 3vw;height: 3vw;border: 0.2rem solid transparent;}.qr-scanner .box:after,.qr-scanner .box:before {top: 0;border-top-color: #00ff33;}.qr-scanner .angle:after,.qr-scanner .angle:before {bottom: 0;border-bottom-color: #00ff33;}.qr-scanner .box:before,.qr-scanner .angle:before {left: 0;border-left-color: #00ff33;}.qr-scanner .box:after,.qr-scanner .angle:after {right: 0;border-right-color: #00ff33;}@keyframes radar-beam {0% {transform: translateY(-100%);}100% {transform: translateY(0);}}以上内容即为使用vue-qrcode-reader实现扫一扫功能的流程
可以直接复制粘贴使用哦
如果此文章对您有用，请留下您宝贵的一键三连，给作者一点鼓励