《快缩短网址》极简小程序：从灵感到上架的优雅全案
项目官网：suo.run



一、序章
在信息洪流中，冗长链接如同缠足的丝带，既碍眼又易断。我们只需一把轻盈的剪刀——《快缩短网址》小程序，轻点即断，长链化蝶，化作可永久栖息的短码或雅致二维码。

二、产品哲学
• 极简：一页完成输入、生成、分享。
• 恒久：短链与二维码一经生成，终身有效，免费。
• 个性：Logo、主题色随心换，二维码亦可成品牌名片。

三、功能星图
1. 核心
‑ 长链接 → 短链（suo.run/xxxx）
‑ 长链接 → 高清二维码
2. 个性
‑ 上传 Logo，居中点睛
‑ 调色盘，一键换肤
3. 轻社交
‑ 保存至相册
‑ 一键转发微信好友 / 群聊
4. 隐形翅膀（可选）
‑ 生成历史云端同步
‑ 扫码次数实时统计
‑ 多语言界面（中 / 英 / 日）

四、技术骨架
前端
‑ 微信小程序原生 + WeUI 视觉体系
‑ 关键页仅两屏：
①「剪链」：输入框 + 生成按钮
②「成蝶」：预览 + 保存/分享
后端
‑ Node.js + Express，部署于云函数（腾讯云 SCF）
‑ 二维码：qrcode 库，SVG 转 PNG，高清无损
‑ 短链：自建算法，62 进制雪花 ID，零碰撞
‑ 存储：云开发数据库 + 云存储，自动 CDN 加速

五、数据契约
POST /api/shorten
Body: {url: "https://...", style: {logo, color}}
Return: {short: "suo.run/AbC12", qr: "https://cdn.suo.run//qr/AbC12.png"}

六、七步成诗（开发节奏）
1. 注册小程序 → 取名「快缩短网址」
2. 初始化云开发环境，启用免费 CDN
3. 画原型：Figma 三屏，留白 60 %
4. 前端：
‑ 首页 WXML 30 行
‑ 颜色选择器使用 实现丝滑滑动
5. 后端：
‑ 云函数 shorten 40 行核心逻辑
‑ 缓存层 Redis，命中率 95 %
6. 体验打磨：
‑ 生成耗时 < 800 ms
‑ 错误提示配插画，拒绝冰冷文字
7. 提审 → 上架 → 朋友圈海报自传播

七、示例代码（精简可运行）
云函数 shorten/index.js
``js
const cloud = require('wx-server-sdk')
const QRCode = require('qrcode')
const shortid = require('shortid-62')
cloud.init()
exports.main = async (event) => {
const { url, style } = event
const id = shortid.generate()
const short = https://suo.run/${id}
const qr = await QRCode.toBuffer(short, { width: 800 })
await cloud.uploadFile({
cloudPath: qr/${id}.png,
fileContent: qr
})
return { short, qr: https://cdn.suo.run/qr/${id}.png }
}


小程序端调用