关键词：
项目中遇到的问题：1.前台为商品扫码数据埋点（二维码中的链接是外链，不是自己的后台），如果直接放外链的话，是统计不到数据的，所以需要先请求到自己后台，然后重定向外链。2. 二维码中链接如果太长，二维码的点会很多，手机扫码识别时间加长，需要设计短链接替换策略
1. vue前端
引用qrcode-lite包生成二维码
import toDataURL from 'qrcode-lite'
...
const longUrl = 'http://h5.m.taobao.com/app/smg/index.html?a=1&b=2&c=3...'
this.shortUrl = this.getShortUrl(longUrl) // 由长链接获取短链接
const qrOption =
width: 200,
margin: 1,
quality: 0.3
this.getQrcodeImgURL(this.shortUrl, qrOption).then(url =>
this.qrcodeImg = url
).catch((err) =>
console.log(`Create qrcode img failed, $err`)
)2. laravel后台
后台主要实现3个功能，生成短链接、长链接的缓存和取用、重定向
public function shortUrl(Request $request)
$url = $request->input('long_url');
if (!$url)
return response()->json([
'code' => '-1',
'message' => 'The long_url is required!'
]);
$key = Carbon::now()->timestamp; // 以当前时间戳作为缓存的key
$expiresAt = Carbon::now()->addDays(10); // 短链接的有效时间为10天
Cache::put($key, $url, $expiresAt);
return response()->json([
'code' => '0',
'message' => 'Success short the url',
'data' => $key
]);
public function redirect($shortCode)
$key = $shortCode;
if (!$key)
return view("common.error", [
"errorTitle" => "扫码错误",
"errorMessage" => "二维码错误,请跟管理员确认!"]);
$redirectUrl = Cache::get($key, 'expiration');
if ($redirectUrl == 'expiration')
return view("common.error", [
"errorTitle" => "扫码错误",
"errorMessage" => "二维码过期,请重新生成二维码后再扫码!"]);
// 记录埋点数据
...
return redirect()->away($redirectUrl);
原文地址：https://segmentfault.com/a/1190000015952026
扫码登录原理及实现(代码片段)
...迎。本文主要介绍了扫码登录的原理及整体流程，包含了二维码的生成/获取、过期失效的处理、登录状态的监听。扫码登录的原理整体流程为方便理解，我简单画了一个UML时序图，用以描述扫码登录的大致流程！总结下核心流... 查看详情
二维码扫码调用相机失败。(代码片段)
varuploader=newplupload.Uploader( runtimes:‘html5,flash‘, browse_button:‘upload_id‘,//触发文件选择对话框的按钮，为那个元素id url:url, multi_selection:false,//一次上传一个文件 filters: max_file_size:‘50mb‘,//文件上传最大限制 , "ini 查看详情
前端如何设置埋点？(代码片段)
...户在这个监控点做了什么事等等；2.埋点的目的是什么？数据埋点是数据分析的准备工作，只有埋点了才可以获得数据进行分析，所以在做足数据埋点之后，我们可以拿到想要的目标数据；1）行为数据：时间，地点，人物，交互... 查看详情
数据埋点主流埋点方式了解(代码片段)
1.数据埋点1.0开始为什么要做埋点业务？需求、价值、痛点埋点它是指在APP或网页应用中针对特定的流程收集一定的信息，用来跟踪APP或网页服务被使用的情况，以便后续用来进一步优化产品或进行运营支持... 查看详情
微信扫码支付功能---通过谷歌二维码工具生成付款码(代码片段)
生成付款二维码 一、微信网站扫码支付介绍 1、扫码支付文档 微信开发官方文档:https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_5 有关微信支付的流程图微信官方已经说的很清楚了，这里也无需其它解释。... 查看详情
扫一扫，原来这么简单(代码片段)
二维码识别技术已广泛应用在移动支付、实用工具、电商购物、社交通讯等场景。然而，在实际生活中，二维码容易遇到距离远、暗光、强光、污损、模糊和大角度倾斜等复杂场景，导致识别困难，扫码体验差。华为HMSCore统一... 查看详情
关于扫码登录(代码片段)
...网站的登录页面的时候，向浏览器的服务器发送获取登录二维码的请求。服务器收到请求后，随机生成一个uuid，将这个id作为key值存入redis服务器，同时设置一个过期时间，再过期后，用户登录二维码需要进行刷新重新获取。同... 查看详情
复杂场景扫码可以轻松实现(代码片段)
二维码和条形码从发明到发展已经过去了几十年，因其能快捷方便读取信息的特点，在数字经济时代被广泛应用。扫描二维码可以识别健康状况，识别身份信息、访问网站链接、完成金融支付等等，已经成为生活... 查看详情
聊一聊二维码扫描登录原理(代码片段)
扫二维码登录现在比较常见，比如微信、支付宝等PC端登录，并且好像每款APP都支持扫码登录，不搞个扫码登录都不好意思。作为技术人员，不知道您对这背后的实现逻辑是否敢兴趣，反正我是一直都对这背后实现好奇。最近刚... 查看详情
vue数据埋点(代码片段)
时间比较紧迫，匆忙写下...比如现在记录点击按钮的次数main.js中自定义埋点方法Vue.directive(\'point\',bind(el,binding)el.addEventListener(\'click\',()=>console.log(el,binding)//这里写操作埋点的时候需要做的事情，比如调接口))使用：<el-buttonv-... 查看详情
扫码器：壹码通（emt6621）二维码带多个回车换行处理(代码片段)
摘要：二维码运用越来越广泛了，目前在医院中一个二维码可以串联多个系统，二维码的内容也可以设置一些特殊字符去达成系统便捷性。本次遇到为二维码中开头内置了回车和空格，在程序判断为回车(KEY_ENTER)... 查看详情
苹果手机微信扫码下载pdf文件，出现空白页。(代码片段)
问题描述要实现微信扫二维码下载pdf文件的功能，苹果手机微信扫码后，第一次扫码，提示下载；后续扫码有时pdf文件被空白页遮挡，有时正常；，用安卓手机微信扫码、或者用苹果手机支付宝扫码都... 查看详情
flutter扫码功能完美实现(代码片段)
...义扫码区域大小(可全屏)✅连续扫码✅从相册选择✅支持二维码✅支持条形码✅扫描动画特效✅Android平台兼容✅iOS平台兼容✅环境Flutter版本1.22.0.stable 查看详情
扫码器：壹码通（emt6621）二维码带多个回车换行处理(代码片段)
摘要：二维码运用越来越广泛了，目前在医院中一个二维码可以串联多个系统，二维码的内容也可以设置一些特殊字符去达成系统便捷性。本次遇到为二维码中开头内置了回车和空格，在程序判断为回车(KEY_ENTER)... 查看详情
支付宝当面付扫码支付接口开发(代码片段)
...支付的相关项目，需要对接支付宝的支付接口，实现扫描二维码支付功能，为此研究了一下支付宝相关业务。主要依据就是支付宝的相关接口文档：https://docs.open.alipay.com/catalog，重点关注如下红色方框部分 先看一下支付宝扫... 查看详情
二维码扫码登录是什么原理(代码片段)
转载地址：二维码扫码登录是什么原理前几天看了极客时间一个二维码的视频，写的不错，这里总结下：在日常生活中，二维码出现在很多场景，比如超市支付、系统登录、应用下载等等。了解二维码的原... 查看详情
苹果手机微信扫码下载pdf文件，出现空白页。(代码片段)
问题描述要实现微信扫二维码下载pdf文件的功能，苹果手机微信扫码后，第一次扫码，提示下载；后续扫码有时pdf文件被空白页遮挡，有时正常；，用安卓手机微信扫码、或者用苹果手机支付宝扫码都... 查看详情
苹果手机微信扫码下载pdf文件，出现空白页。(代码片段)
问题描述要实现微信扫二维码下载pdf文件的功能，苹果手机微信扫码后，第一次扫码，提示下载；后续扫码有时pdf文件被空白页遮挡，有时正常；，用安卓手机微信扫码、或者用苹果手机支付宝扫码都... 查看详情