66 lines
3.0 KiB
JSON
66 lines
3.0 KiB
JSON
{
|
||
"slug": "qrcode",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生二维码：脚本按输入值铺 SVG 方块矩阵，含三个定位角，仅演示用。",
|
||
"usage": [
|
||
"对外只有两处：容器 <div class=\"kole-qrcode\" role=\"img\"> 与一个原生输入框，输入时重跑 render()。",
|
||
"矩阵由 buildMatrix(value, n) 生成：先用字符编码算出种子（seed = seed * 31 + charCodeAt），再用线性同余发生器 rnd() 填格子。",
|
||
"三个定位角由 place(r0, c0) 画在 (0,0)、(0,n-7)、(n-7,0)，每角 7×7 加一圈空白分隔。",
|
||
"渲染方式是拼 SVG 字符串：每个黑格一个 <rect>，整串塞进容器的 innerHTML，再附一行 .kole-qrcode-text 显示原文。",
|
||
"尺寸固定为 n = 25、cell = 8，即 200×200 像素。"
|
||
],
|
||
"bestPractices": [
|
||
"这不是真二维码：矩阵由随机数生成，扫不出内容，只适合占位演示。",
|
||
"value 直接进 innerHTML（.kole-qrcode-text 那行），接用户输入要转义。",
|
||
"真二维码请换成熟库（如生成 data URL 再放进 <img>），不要在这套 seed 逻辑上改。"
|
||
],
|
||
"a11y": [
|
||
"容器有 role=\"img\"，但没有 aria-label 或标题，读屏不会告知这是一张二维码。",
|
||
"SVG 图形本身无文本替代，二维码的语义完全依赖 role=\"img\" 加 aria-label，当前缺后者。",
|
||
"输入框没有 aria-label 或关联 label，读屏不说明用途。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端用类名加 SVG：.kole-qrcode 容器（role=\"img\"）由页内脚本按输入值生成 <rect> 矩阵，.kole-qrcode-text 是其下方的原文文本，输入框是原生 <input id=\"val\">。",
|
||
"table": [
|
||
{
|
||
"name": "kole-panel",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/QRCode.html:9）。"
|
||
},
|
||
{
|
||
"name": "kole-qrcode",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/QRCode.html:13）。"
|
||
},
|
||
{
|
||
"name": "kole-qrcode-text",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/QRCode.html:45）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/QRCode.html",
|
||
"kind": "H5 原生",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/QRCode.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"qrcode-ex-1"
|
||
],
|
||
"notes": [
|
||
"容器与输入框见（frameworks/QRCode.html:13-14）。",
|
||
"矩阵生成与定位角见（frameworks/QRCode.html:18-33），SVG 拼装见（frameworks/QRCode.html:39-45）。",
|
||
"尺寸常量 n = 25、cell = 8 见（frameworks/QRCode.html:37），输入监听见（frameworks/QRCode.html:47）。",
|
||
"说明：本实现矩阵为伪随机，不能作为真实二维码使用（frameworks/QRCode.html:19-22）。"
|
||
]
|
||
}
|