配套二维码生成页 CSDN 文章uni-app 二维码生成页开源想要一个不跳转、不拉起第三方应用的「纯二维码解析」页面本文介绍一个自包含、零业务依赖的 uni-app 页面复制到任意项目即可用。 项目简介一个自包含、零业务依赖的二维码解析页面复制到任意 uni-app 项目即可用。扫码 / 相册识图 →纯解析展示结果不自动跳转、不拉起第三方应用支持一键复制。✨ 功能特性功能说明扫一扫调用uni.scanCode由微信原生解码直接返回结果从相册选择本地用 jsQR 解码支持密集二维码复制结果一键复制到剪贴板带成功/失败提示扫一扫直传支持其他页面跳转时带?scan参数自动解码展示页面分享onShareAppMessage内置标题「二维码解析」路径动态取当前路由 界面预览左初始状态扫一扫 / 从相册选择入口右解析结果展示识别文本并支持一键复制。 依赖唯一外部依赖jsqr1.4.0npm i jsqr1.4.0本页面已把解析所需的 JS 逻辑全部内联复制到任意 uni-app 项目即可使用。以下依赖均不需要qrcode-generator、/utils/qrcode.js、clipboard.js、share.js、recent.js。 快速接入1. 安装依赖npm i jsqr1.4.02. 复制文件将parse.vue复制到目标项目的页面目录例如src/pages/qrcode/parse.vue。3. 注册路由在目标项目的pages.json中注册{ pages: [ { path: pages/qrcode/parse, style: { navigationBarTitleText: 二维码解析 } } ] }4. 可选扫一扫直传结果从其他页面跳转并携带已扫描结果uni.navigateTo({ url: /pages/qrcode/parse?scan encodeURIComponent(text) })页面onLoad会自动decodeURIComponent后展示。 完整源码与示例见仓库https://gitee.com/Free4K/qr_parse 解析原理两条解析入口扫一扫onScanCodeuni.scanCode→res.result直接得到解码文本。不经过任何本地像素处理取消时静默返回。从相册选择onPickImageuni.chooseImage选 1 张压缩图 → 拿到临时路径 →parseQRCodeFromImage(path)本地解码。本地解析流程parseQRCodeFromImageuni.getImageInfo 读取宽高 ↓ 等比例缩放宽高上限 600px ↓ 获取隐藏 Canvas 2D 节点带 200ms 重试 ↓ canvas.createImage 加载图片 drawImage ↓ getImageData 读取 RGBA 像素 ↓ 自适应二值化0.299R0.587G0.114B 求亮度min/max 取阈值 ↓ jsQR 解码 → 返回文本隐藏 canvas 的id固定为__qr_parser__通过position: fixed; left/top: -9999px移出可视区仅用于像素读取用户无感知。主要函数函数作用getCanvas2dNode(id)获取 Canvas 2D 节点getCanvas2dNodeWithRetry(id, retries)带重试的节点获取应对节点未就绪parseQRCodeFromImage(path)图片 → 二维码文本核心onScanCode()扫一扫入口onPickImage()相册选图入口copyResult()复制结果到剪贴板buildShare()构建分享配置脱品牌onLoad(options)处理?scan直传参数onShareAppMessage()页面分享⚠️ 注意事项剪贴板隐私声明copyResult使用了uni.setClipboardData需在微信后台「用户隐私保护指引」中声明「剪贴板」否则调用可能报errno 112。Canvas 2D 要求基础库需 ≥ 2.9.0Canvas 2D API。多端兼容解析逻辑基于标准 Canvas API jsQR微信 / 支付宝 / 百度等多端均可使用仅需目标项目安装了jsqr。编码对称性解析端不做二次 UTF-8 解码jsQR≥1.4与uni.scanCode返回的已是 UTF-8 解码后的文本避免中文乱码。「最近使用」记录原项目通过setRecent记录到本地 storage本文件已移除目标项目可自行接入。源码核心解析逻辑已在本文完整给出。 完整源码与示例见仓库https://gitee.com/Free4K/qr_parse
uni-app 二维码解析页面开源：复制即用，仅依赖 jsQR
配套二维码生成页 CSDN 文章uni-app 二维码生成页开源想要一个不跳转、不拉起第三方应用的「纯二维码解析」页面本文介绍一个自包含、零业务依赖的 uni-app 页面复制到任意项目即可用。 项目简介一个自包含、零业务依赖的二维码解析页面复制到任意 uni-app 项目即可用。扫码 / 相册识图 →纯解析展示结果不自动跳转、不拉起第三方应用支持一键复制。✨ 功能特性功能说明扫一扫调用uni.scanCode由微信原生解码直接返回结果从相册选择本地用 jsQR 解码支持密集二维码复制结果一键复制到剪贴板带成功/失败提示扫一扫直传支持其他页面跳转时带?scan参数自动解码展示页面分享onShareAppMessage内置标题「二维码解析」路径动态取当前路由 界面预览左初始状态扫一扫 / 从相册选择入口右解析结果展示识别文本并支持一键复制。 依赖唯一外部依赖jsqr1.4.0npm i jsqr1.4.0本页面已把解析所需的 JS 逻辑全部内联复制到任意 uni-app 项目即可使用。以下依赖均不需要qrcode-generator、/utils/qrcode.js、clipboard.js、share.js、recent.js。 快速接入1. 安装依赖npm i jsqr1.4.02. 复制文件将parse.vue复制到目标项目的页面目录例如src/pages/qrcode/parse.vue。3. 注册路由在目标项目的pages.json中注册{ pages: [ { path: pages/qrcode/parse, style: { navigationBarTitleText: 二维码解析 } } ] }4. 可选扫一扫直传结果从其他页面跳转并携带已扫描结果uni.navigateTo({ url: /pages/qrcode/parse?scan encodeURIComponent(text) })页面onLoad会自动decodeURIComponent后展示。 完整源码与示例见仓库https://gitee.com/Free4K/qr_parse 解析原理两条解析入口扫一扫onScanCodeuni.scanCode→res.result直接得到解码文本。不经过任何本地像素处理取消时静默返回。从相册选择onPickImageuni.chooseImage选 1 张压缩图 → 拿到临时路径 →parseQRCodeFromImage(path)本地解码。本地解析流程parseQRCodeFromImageuni.getImageInfo 读取宽高 ↓ 等比例缩放宽高上限 600px ↓ 获取隐藏 Canvas 2D 节点带 200ms 重试 ↓ canvas.createImage 加载图片 drawImage ↓ getImageData 读取 RGBA 像素 ↓ 自适应二值化0.299R0.587G0.114B 求亮度min/max 取阈值 ↓ jsQR 解码 → 返回文本隐藏 canvas 的id固定为__qr_parser__通过position: fixed; left/top: -9999px移出可视区仅用于像素读取用户无感知。主要函数函数作用getCanvas2dNode(id)获取 Canvas 2D 节点getCanvas2dNodeWithRetry(id, retries)带重试的节点获取应对节点未就绪parseQRCodeFromImage(path)图片 → 二维码文本核心onScanCode()扫一扫入口onPickImage()相册选图入口copyResult()复制结果到剪贴板buildShare()构建分享配置脱品牌onLoad(options)处理?scan直传参数onShareAppMessage()页面分享⚠️ 注意事项剪贴板隐私声明copyResult使用了uni.setClipboardData需在微信后台「用户隐私保护指引」中声明「剪贴板」否则调用可能报errno 112。Canvas 2D 要求基础库需 ≥ 2.9.0Canvas 2D API。多端兼容解析逻辑基于标准 Canvas API jsQR微信 / 支付宝 / 百度等多端均可使用仅需目标项目安装了jsqr。编码对称性解析端不做二次 UTF-8 解码jsQR≥1.4与uni.scanCode返回的已是 UTF-8 解码后的文本避免中文乱码。「最近使用」记录原项目通过setRecent记录到本地 storage本文件已移除目标项目可自行接入。源码核心解析逻辑已在本文完整给出。 完整源码与示例见仓库https://gitee.com/Free4K/qr_parse