本文主要是介绍uniapp 微信小程序扫描 uni.scanCode,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
一、使用环境
- 编译环境:HBuilder X
- 运行环境 :微信开发者工具
二、二维码生成
使用的是草料二维码👉👉:草料网址二维码生成器
选择网址---输入网址和参数---生成二维码
三、业务实现
业务需求:点击扫码按钮调起扫码功能,扫码成功后返回对应的结果并跳转页面
说明:在微信开发者工具中,无法扫码。需要真机验证(或者在电脑上存放生成的二维码照片,点击扫描查看打印结果)
调用方法:uni.scanCode
官方文档👉:uni.scanCode(OBJECT) | uni-app官网
完整代码地址👉:front-mini-programe/components/tabbar/tabbar.vue · cheinlu/土拨鼠充电系统 - Gitee.com
代码示例:
//点击tabbar按钮
const handleTabbarItemClick = (item, index) => {if (active.value !== index) {//如果点击的是扫描按钮if (index === 1) {uni.scanCode({success(res) {console.log('res',res);const scanUrl = res.result //保存扫描结果const regExp = /pileId=(\d+)&code=(\d+)/ //用于匹配URL中的pileId和code参数const matchResult = scanUrl.match(regExp) let pileId = ''let code = ''//判断是否成功匹配到pileId和code。if (matchResult) {pileId = matchResult[1]code = matchResult[2]}//匹配成功就跳转到charging页面uni.reLaunch({url: '/subpkg/charging/charging?pileId=' + pileId + '&code=' + code})}})} else {active.value = index // 更新选中项的索引const path = item.pagePathuni.switchTab({url: path})}}
}
res打印的结果👇
其中,result就是扫码的内容,也就是前面生成的二维码地址
这篇关于uniapp 微信小程序扫描 uni.scanCode的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!