二维码
二维码把一段文本生成可扫码的图案。适合放链接、订单号、会员码、Wi-Fi 信息、活动签到地址等内容。
用法
在编辑器底部点加号,添加 二维码,然后设置:
| 字段 | 常用填写 |
|---|---|
| 内容 | https://example.com / ${url} |
| 二维码色 | #000000 / ${color} |
| 背景色 | #FFFFFF |
| 宽 / 高 | 96 / 128 / ${size} |
「内容」可以是固定文本,也可以绑定 JS 变量。只要最终结果是一段字符串,就会生成对应二维码。
属性
| 字段 | 可填写 | 说明 |
|---|---|---|
| 内容 | https://example.com / ${url} | 二维码内容 |
| 二维码色 | #000000 / ${color} | 二维码前景色 |
| 宽 / 高 | 96 / 120 / ${size} | 二维码尺寸 |
| 水平偏移 / 垂直偏移 / Z 轴偏移 | 0 / 8 / ${x} | 只移动显示位置,不改变原本占位 |
| 内边距 / 外边距 | 8 / 8,8,8,8 | 四周留白 |
| 显示 | true / false / ${show} | 控制是否显示 |
| 背景色 | #FFFFFF / ${color} | 二维码背景色 |
| 圆角 | 0 / 8 / 50% | 背景圆角 |
| 旋转角度 | 0 / 15 / ${angle} | 顺时针旋转角度 |
| 不透明度 | 0 到 1 | 1 为完全不透明 |
例:把接口返回的链接变成二维码
JS:
const obj = await new Request("https://api.example.com/invite").fetchJSON()
let url = obj.url
let title = obj.title || "扫码打开"
| 组件 | 字段 | 填写 |
|---|---|---|
| 二维码 | 内容 | ${url} |
| 二维码 | 宽 / 高 | 120 |
| 文本 | 内容 | ${title} |
例:生成 Wi-Fi 二维码
let ssid = "Office-WiFi"
let password = "12345678"
let wifiQr = `WIFI:T:WPA;S:${ssid};P:${password};;`
二维码的「内容」字段填 ${wifiQr}。
注意事项
保持高对比度
二维码建议用深色前景 + 浅色背景。背景透明、颜色太浅或尺寸太小时,扫码成功率会明显下降。
尽量用正方形尺寸
二维码本身是正方形。「宽」和「高」建议填一样的值,例如 96 / 120 / 160。
内容为空会显示空白
如果「内容」绑定的变量为空字符串或没有取到值,二维码可能显示为空白。动态数据建议准备兜底值。