今すぐログイン 分享一个网址，最直接的办法当然是复制粘贴。可到了海报、PPT或者线下物料这种没法点链接的场合，一长串URL就显得既累赘又难看。二维码正好能化解这个尴尬：手机扫一下，页面直接打开，省事又干净。而且这件事根本用不着装什么专门的软件——在网页里写点HTML，再配一小段JavaScript，任何链接的二维码都能自己做出来。
思路本身并不绕：二维码图案不用我们动手画，交给现成的QR Code Generator API就行。网页要做的，是把目标链接发给这个API，等响应回来之后，从里面取出生成的图片地址，再展示到页面上。打个比方，浏览器替我们完成了一次"下单"加"取货"，我们需要做的，只是把中间衔接的那部分代码写好。
落到代码上，拢共也就三步。先在JavaScript里定义一个变量，把目标网址存进去；接着把这个变量拼进API的请求地址，发出HTTP请求；等响应返回后，从中解析出二维码图片的URL，交给页面渲染。如果你用的API直接返回图片，那就更省事了——连解析这一步都可以跳过，把请求地址本身当图片地址用，代码量少得惊人。
二维码有了，黑白小方块却难免显得单调，这时候就该CSS出场了。图片大小、圆角、阴影都可以调；想让它和页面整体配色协调起来，加一圈边框或者垫个底色也不难。有些API还支持在请求参数里直接指定前景色和背景色，配色在生成阶段就能一并定制。想再进一步的话，不妨给图片包一层链接标签，再配合点击或悬停时的视觉反馈——比如浮现一句"扫码访问"的提示——交互体验会友好不少。
最后一步，是把二维码嵌进页面。这和平常插入任何一张图片没有区别：一个img元素，src设为刚才拿到的二维码地址，再用HTML和CSS调整它在版面中的位置——居中、靠边、与文字并排，完全按设计需要来安排。到这里，一个能实时生成二维码的小功能就算完成了。
回头看整个流程，真正的难点其实不在技术本身，而在"请求—响应"这个最基本的网络交互模式。一旦想通二维码图片不过是API返回的一种资源，剩下的无非是拼参数、取结果、调样式这些前端基本功。对想练手的新手来说，这是个成本很低又颇有成就感的小项目；放到实际业务里，活动页、分享卡片、产品包装上需要动态二维码的场景也并不少见，学会了随时都用得上。