使用Nimiq qr-scanner扫码后无法处理识别结果、实现自动跳转问题求助

你所有的后续操作都可以在库提供的扫码成功回调函数中实现，具体配置步骤如下：

1. 初始化扫码器时绑定结果回调 #

扫码器识别到二维码内容后会触发回调函数，你可以在这个回调中拿到原始识别文本：

// 引入库，如果你是直接用CDN引入可以跳过这行，直接用全局的QrScanner对象
import QrScanner from 'qr-scanner';

// 替换为你页面上用来承载扫码画面的video元素DOM
const scanVideo = document.querySelector('#qr-scan-video');

// 初始化扫码器
const qrScanner = new QrScanner(
  scanVideo,
  (result) => {
    // result.data 就是识别到的原始文本内容
    processScanResult(result.data);
  },
  // 可选基础配置
  {
    highlightScanRegion: true, // 显示扫码框
    preferredCamera: 'environment', // 默认用后置摄像头
  }
);

// 启动扫码
qrScanner.start();

2. 实现结果处理逻辑，完成URL自动跳转 #

你可以根据业务需要加校验、跳转、存储、渲染可点击链接等逻辑：

// 防抖变量，避免同个结果重复触发
let lastScanText = '';
let lastScanTime = 0;

function processScanResult(scanText) {
  // 空值过滤+防抖处理，3秒内同个内容只处理一次
  if (!scanText || (scanText === lastScanText && Date.now() - lastScanTime < 3000)) {
    return;
  }
  lastScanText = scanText;
  lastScanTime = Date.now();

  // 校验是否为URL格式
  const isUrl = /^(https?:\/\/)?(([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}|(\d{1,3}\.){3}\d{1,3})(:\d+)?(\/[^\s]*)?$/.test(scanText);
  if (isUrl) {
    // 补全没有协议头的URL，避免跳转失败
    const targetUrl = scanText.startsWith('http') ? scanText : `https://${scanText}`;
    // 自动跳转，新窗口打开可以换成 window.open(targetUrl, '_blank')
    window.location.href = targetUrl;
    // 跳转后停止扫码节省资源
    qrScanner.stop();
    return;
  }

  // 非URL场景的可选操作
  // 1. 存储结果到本地
  localStorage.setItem('latest_qr_result', scanText);
  // 2. 渲染可点击的结果到页面，替换为你自己的结果容器DOM
  const resultBox = document.querySelector('#scan-result-box');
  resultBox.innerHTML = `识别结果：<a href="${isUrl ? (scanText.startsWith('http') ? scanText : 'https://'+scanText) : 'javascript: void 0'}" target="_blank">${scanText}</a>`;
}

常见问题说明 #

• 如果用window.open打开新窗口被浏览器拦截，建议优先使用当前页跳转，或者增加用户确认按钮，由用户主动点击触发新窗口跳转
• 所有对识别结果的操作（上传后端、复制到剪贴板等）都可以在processScanResult函数中扩展实现

内容的提问来源于stack exchange，提问作者Mike S.