uniapp 二维码展示和扫码

news/2024/12/2 17:44:19/

前言

在使用 uniapp 开发 APP 或者其他小程序的时候，我们有时候会遇到这样一种场景，那就是展示二维码和扫码，那么对于初次做这个功能的前端小伙伴们来说，有可能不知道怎么进行实现，本人也是第一次做这个功能，也是完美的进行了实现，将如何实现制作二维码和扫码进行分享出来。

制作二维码

对于 uniapp 开发，我们可以去 DCloud 插件市场找各种各样的插件，在这里分享一款制作二维码的插件：二维码插件地址
在这里插入图片描述
首先我选择使用 HBuildreX 进行导入插件，导入失败的注意看一下 HBuildreX 编译器的版本，升级一下，导入成功之后，项目目录下面将会多出一个 ay-qrcode 组件，然后在对应需要用到的界面使用即可。

<template><view><!-- 二维码 --><ay-qrcode ref="qrcode" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode" /></view>
</template><script>export default {data() {return {//二维码相关参数modal_qr: false, // 要生成的二维码值url: 'https://blog.csdn.net/weixin_53137201?type=blog', };},onLoad(query) {let that = this//一加载生成二维码that.showQrcode() },methods: {// 展示二维码showQrcode() {let _this = this;this.modal_qr = true;setTimeout(function() {_this.$refs.qrcode.crtQrCode()}, 50)},//传入组件的方法hideQrcode() {this.modal_qr = false;},}}
</script>

完成上述的配置，url 就是扫码出来的内容，到这里我们制作一个二维码就完成了，具体的参数配置，参考

在这里插入图片描述

扫描二维码

当我们二维码做出来之后，接下来就是扫码了，例如我当时所做的项目就是通过扫码进入群聊，加入群，这个时候 url 我放的就是当前群 id，通过扫码进行获取群 id，然后请求接口，将扫码出来的内容进行传递到请求之中然后加入群聊，在这里建议使用 uni.scanCode API 进行调用扫码功能，res.result 就是扫码出来的结果

// 扫描二维码方法
scanYard() {// 只允许通过相机扫码uni.scanCode({onlyFromCamera: true,success: (res) => {console.log(res.result)}});
},

总结

好了，到这里，我们就实现了一个制作二维码和扫码的功能，对于各式各样的制作二维码和扫码的功能都可以实现，可以实现扫码进入某个界面，跳转到某个连接，或者获取指定的内容请求接口。