活动报名、门店详情，链接太长不好念。收成一块二维码，手机一扫就进页。输入框里填地址，点「生成」，码画在下面。光标离开或回车也会再画一次。
入口是 index.html。样式在 css/qrcode.css，生成逻辑在 js/qr.js。脚本先引 jQuery，再引 qrcode.min.js，最后才是 qr.js。jQuery 掉到后面，$ 会挂；库掉到后面，QRCode 是空的。
生成二维码用到哪些文件
html 里按这个顺序引：
页面就这三样：输入框 #text，按钮 #makeQr，容器 #qrcode。本例默认地址写成 https://example.com，方便立刻看到一块码。维护的时候把入口指到 index.html 就行。
页面骨架
#makeQr 用 padding: 8px 16px 撑开，加上 cursor: pointer。
输入框和二维码如何布局
输入框单独一行，宽 320 像素，padding: 8px 12px。生成钮跟在下面。#qrcode 宽高都是 160 像素，和画码时的尺寸对齐，码才不会被裁或挤变形。
库会在 #qrcode 里塞 img 或 canvas。给这两种子元素也写上 160，旧 IE 走表格图、新浏览器走 canvas，看起来一样大。
码要更大，容器和下面 qrSize 一起改，只改一边会对不上。
如何根据地址生成二维码
页面一加载就 new QRCode("qrcode", { width: qrSize, height: qrSize })。第一个参数是容器的 id，也可以传 DOM 节点。宽高本例写成 160，跟 css 一致。
makeCode 从 #text 取出文字，$.trim 掉首尾空格。空的就 return，不要画一块空码。有内容再 qrcode.makeCode(text)。说白了：库认字符串，网址、纯文字都能画，扫出来就是这段字。
QRCode 这个构造函数来自 qrcode.min.js，业务文件不要自己再声明一遍。实例要留着，后面改地址还用同一个对象 makeCode，不要每次 new 一次，否则容器里会叠好几块码。这坑我见过不止一次。
二维码怎么显示到页面上
makeCode 一跑，库把码画进 #qrcode。第一次生成会在里面加节点；再改地址是覆盖，不用自己清空。
页面打开先调一次 makeCode()，默认值立刻出码。之后三处都走同一函数：点 #makeQr、输入框 blur、回车（keyCode === 13）。事件挂在 body 上委托。
我第一次看也卡了一下：回车会触发表单提交的话，页面会刷新，码刚画上又没了。这页没有 form，没事。套进带 form 的页时，回车那一处要 e.preventDefault()。
如何对接到真实项目中
地址不要写死。详情接口返回链接，填进 #text 再 makeCode。jQuery 这套建议用 Layui 做提示，具体按实际项目来定。没有地址、接口失败走 layer.msg，不要 alert。
/api/page/detail 的路径和字段换成项目约定。下面这份覆盖 qr.js，页面结构仍用前面的 html。
输入框带上 data-id 就走接口；没有 id 就用框里现成的地址。码的大小改 qrSize，css 里 #qrcode 的宽高一起改。qrcode.min.js 整文件带着走，不要只拷 qr.js。