uniapp 二维码展示和扫码
关于使用 uniapp 进行开发,二维码的实现和扫码功能实现,使用 DCloud 插件进行制作二维码,使用 uniapp API 进行扫码获取内容,作者也是在一次开发之中遇到了此功能,进行了查阅,最终实现,在这里将如何实现分享给大家,希望可以帮助到各位。
前言
在使用 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)
}
});
},
总结
好了,到这里,我们就实现了一个制作二维码和扫码的功能,对于各式各样的制作二维码和扫码的功能都可以实现,可以实现扫码进入某个界面,跳转到某个连接,或者获取指定的内容请求接口。
更多推荐
所有评论(0)