博客快捷键

按住 Shift 键查看可用快捷键

ShiftK

开启/关闭快捷键功能

ShiftA

打开/关闭中控台

ShiftD

深色/浅色显示模式

ShiftS

站内搜索

ShiftR

随机访问

ShiftH

返回首页

ShiftL

友链页面

ShiftP

关于本站

ShiftI

原版/本站右键菜单

松开 Shift 键或点击外部区域关闭

文章详情

互动

鱼高高 - 一个无广告的微信小程序二维码生成器

280515分钟2026-01-212561广东深圳

一个开源、免费、无广告的微信小程序跳转二维码生成工具，支持自定义样式、扫码统计、分组管理。

在线体验

YuGaoGao

专业二维码生成器

项目起源

事情要从张洪 Heo 在 QQ 群里的一条消息说起。

某天，群里讨论到一个很常见的需求：如何让用户扫码直接跳转到微信小程序的指定页面？比如做个海报，扫码就能跳转到猫眼电影的某个场次购票页面，或者跳转到美团的某个商家。

这个需求看似简单，实际上微信的分享机制只提供链接形式，类似这样：

Link

#小程序://猫眼电影演出玩乐I电影票演唱会/gba6BLiIvgdm8cy

链接不利于传播啊！贴到海报上总不能让用户手打这串字符吧？于是 Heo 开始寻找解决方案，并写下了《微信小程序链接怎么转换为二维码？扫码直接跳转到小程序指定页面》这篇博客文章。

一开始，他找到了 C1N 短链接服务，看起来挺不错的——输入小程序链接就能生成二维码，一天 5 个免费额度也够用。

然而事情发生了变化。

用户反馈扫码后会弹出广告！这对于做海报、做活动推广来说简直是灾难级体验。于是 Heo 紧急更新了文章，把 C1N 改为了「不推荐，有广告」：

【1 月 20 日更新：这家有广告，不要用】

既然市面上的工具都不太靠谱，那就自己做一个吧！YuGaoGao 就这样诞生了。

项目是什么？

YuGaoGao 是一个专业的微信小程序二维码生成器，核心功能就是：

输入小程序的 AppID 和页面路径，生成一个干净的、无广告的跳转二维码。

用户扫码后直接跳转到微信小程序，没有中间页面，没有广告弹窗，干净利落。

技术架构

这是一个完整的前后端分离项目，采用现代化的技术栈构建：

技术栈详情

层级	技术选型	版本	说明
前端框架	Next.js + React	16.1.4 / 19	App Router, Server Components
UI 框架	Tailwind CSS	4.0	原子化 CSS，Apple 风格设计
组件库	HeroUI	latest	基于 React Aria 的无障碍组件
动画库	Framer Motion	latest	流畅的页面过渡动画
二维码生成	qrcode.react	latest	SVG 渲染，支持自定义样式
文件打包	JSZip + file-saver	latest	批量下载 ZIP 打包
后端框架	Go-Zero	latest	微服务框架，高性能
ORM	Ent	latest	Facebook 出品，类型安全
数据库	MySQL	8.0	InnoDB 引擎，支持事务
认证	JWT	-	无状态令牌，7 天有效期
容器化	Docker Compose	-	一键部署开发环境

核心功能详解

1. 二维码生成原理

微信小程序支持通过 URL Scheme 从外部唤起，格式如下：

Link

weixin://dl/business/?appid=wx1234567890abcdef&path=pages/index/index&env_version=release

参数说明：

参数	必填	说明
`appid`	是	小程序的 AppID，`wx` 开头的 18 位字符串
`path`	否	页面路径，默认 `pages/index/index`
`env_version`	否	版本：`release`(正式) / `trial` / `develop`

系统自动将用户输入的 AppID 和路径拼接成 URL Scheme，然后生成对应的二维码。

2. 短链跳转服务

为什么不直接用 URL Scheme 生成二维码？因为：

可追踪：通过短链中转，可以记录每次扫码行为
可修改：目标链接变了，不需要重新生成二维码
更安全：隐藏原始 URL Scheme，防止被恶意利用

短链生成算法：

func generateShortCode() string {
    b := make([]byte, 6)
    rand.Read(b)
    // 使用 URL 安全的字符集
    code := base64.URLEncoding.EncodeToString(b)[:8]
    // 替换可能导致混淆的字符
    code = strings.ReplaceAll(code, "_", "x")
    code = strings.ReplaceAll(code, "-", "y")
    return code
}

生成的短链格式：https://link.anheyu.com/r/xYz12345

3. 扫码数据采集

每次用户扫码访问短链时，系统会记录：

// Scan 数据模型
type Scan struct {
    ID        int       // 记录 ID
    QRCodeID  int       // 关联的二维码 ID
    UserAgent string    // 浏览器/客户端信息
    IP        string    // 访问者 IP（脱敏处理）
    ScannedAt time.Time // 扫码时间
}

通过 User-Agent 解析设备类型：

func parseDevice(userAgent string) string {
    ua := strings.ToLower(userAgent)
    switch {
    case strings.Contains(ua, "iphone"):
        return "iPhone"
    case strings.Contains(ua, "ipad"):
        return "iPad"
    case strings.Contains(ua, "android"):
        return "Android"
    case strings.Contains(ua, "windows"):
        return "Windows"
    case strings.Contains(ua, "mac"):
        return "Mac"
    default:
        return "Other"
    }
}

4. 统计分析

提供多维度的数据统计：

echarts

{
  "title": {
    "text": "最近 7 天扫码趋势",
    "left": "center",
    "textStyle": { "fontSize": 14 }
  },
  "tooltip": {
    "trigger": "axis",
    "axisPointer": { "type": "shadow" }
  },
  "grid": {
    "left": "3%",
    "right": "4%",
    "bottom": "3%",
    "containLabel": true
  },
  "xAxis": {
    "type": "category",
    "data": ["01-15", "01-16", "01-17", "01-18", "01-19", "01-20", "01-21"]
  },
  "yAxis": {
    "type": "value",
    "name": "扫码次数"
  },
  "series": [{
    "name": "扫码次数",
    "type": "bar",
    "barWidth": "60%",
    "itemStyle": {
      "color": {
        "type": "linear",
        "x": 0, "y": 0, "x2": 0, "y2": 1,
        "colorStops": [
          {"offset": 0, "color": "#10b981"},
          {"offset": 1, "color": "#059669"}
        ]
      },
      "borderRadius": [4, 4, 0, 0]
    },
    "data": [120, 200, 150, 180, 220, 350, 280]
  }]
}

设备分布统计：

echarts

{
  "title": {
    "text": "扫码设备分布",
    "left": "center",
    "textStyle": { "fontSize": 14 }
  },
  "tooltip": {
    "trigger": "item",
    "formatter": "{b}: {c} ({d}%)"
  },
  "legend": {
    "orient": "vertical",
    "left": "left"
  },
  "series": [{
    "name": "设备类型",
    "type": "pie",
    "radius": ["40%", "70%"],
    "avoidLabelOverlap": false,
    "itemStyle": {
      "borderRadius": 10,
      "borderColor": "#fff",
      "borderWidth": 2
    },
    "label": { "show": false },
    "emphasis": {
      "label": { "show": true, "fontSize": 14, "fontWeight": "bold" }
    },
    "data": [
      {"value": 580, "name": "iPhone", "itemStyle": {"color": "#10b981"}},
      {"value": 420, "name": "Android", "itemStyle": {"color": "#059669"}},
      {"value": 80, "name": "iPad", "itemStyle": {"color": "#34d399"}},
      {"value": 60, "name": "其他", "itemStyle": {"color": "#6ee7b7"}}
    ]
  }]
}

5. 样式自定义

支持丰富的自定义选项：

选项	说明	默认值
前景色	二维码码点颜色	`#000000`
背景色	二维码背景颜色	`#FFFFFF`
尺寸	输出图片尺寸（128-512px）	256px
容错级别	L(7%) / M(15%) / Q(25%) / H(30%)	M
Logo	中心 Logo 图片（自动挖空）	无

预设配色方案：

typescript

const colorPresets = [
  { fg: "#000000", bg: "#FFFFFF", name: "经典黑白" },
  { fg: "#10b981", bg: "#FFFFFF", name: "品牌绿" },
  { fg: "#1d1d1f", bg: "#f5f5f7", name: "深灰浅底" },
  { fg: "#059669", bg: "#FFFFFF", name: "深邃绿" },
  { fg: "#14b8a6", bg: "#FFFFFF", name: "青绿色" },
  { fg: "#047857", bg: "#FFFFFF", name: "森林绿" },
];

6. 批量下载

选中多个二维码后，可以一键打包下载为 ZIP 文件：

typescript

const handleBatchDownload = async () => {
  const zip = new JSZip();

  for (const qrcode of selectedQRCodes) {
    const blob = await downloadQRCode(qrcode);
    if (blob) {
      const filename = `${qrcode.title || qrcode.shortCode}.png`;
      zip.file(filename, blob);
    }
  }

  const content = await zip.generateAsync({ type: "blob" });
  saveAs(content, `qrcodes-${Date.now()}.zip`);
};

7. 分组管理

当二维码数量多了，分组管理就很重要了。支持创建多个分组，按业务场景分类管理：

电影活动：管理各类电影宣传、活动推广的二维码
餐饮推广：新店开业、会员招募、节日促销等场景
企业内部：员工福利、内部培训、会议签到等企业场景
个人使用：名片二维码、个人主页等个人场景

项目亮点

特性	说明
无广告	扫码直达目标，没有中间页和广告弹窗
开源免费	MIT 协议，商用无忧
数据自主	自己部署，数据完全掌控
功能完整	从生成到统计，一站式解决
现代技术栈	Next.js 16 + Go-Zero，性能优异
Apple 设计	参考 Apple 设计语言，简洁优雅
响应式	完美适配桌面端和移动端
暗色模式	支持亮色/暗色主题自动切换

写在最后

有时候，一个好的工具就是从「市面上的都不好用」这个念头开始的。

感谢张洪 Heo 在群里提出这个需求，也感谢他写的那篇博客文章让更多人意识到这个痛点。YuGaoGao 可能不是最完美的解决方案，但至少它是干净的、透明的、可控的。

如果你也有类似的需求，欢迎试试看。

许可证

MIT License - 随便用，注明出处即可。

安知鱼

生活明朗，万物可爱

本文是原创文章，采用 CC BY-NC-SA 4.0 协议，完整转载请注明来自安知鱼

Next2 小程序1

喜欢这篇文章的人也看了

随便逛逛

小鱼起始页：致敬五年前的那份初心

React 安全漏洞：一场连环翻车事故

隐私政策

评论内容

0/500

昵称

邮箱

网址

滚动到此处加载评论...

安知鱼

来自安知鱼最新设计与科技的文章

查看全部

文章详情

互动

鱼高高 - 一个无广告的微信小程序二维码生成器

280515分钟2026-01-212561广东深圳

一个开源、免费、无广告的微信小程序跳转二维码生成工具，支持自定义样式、扫码统计、分组管理。

在线体验

YuGaoGao

专业二维码生成器

项目起源

事情要从张洪 Heo 在 QQ 群里的一条消息说起。

这个需求看似简单，实际上微信的分享机制只提供链接形式，类似这样：

Link

#小程序://猫眼电影演出玩乐I电影票演唱会/gba6BLiIvgdm8cy

一开始，他找到了 C1N 短链接服务，看起来挺不错的——输入小程序链接就能生成二维码，一天 5 个免费额度也够用。

然而事情发生了变化。

用户反馈扫码后会弹出广告！这对于做海报、做活动推广来说简直是灾难级体验。于是 Heo 紧急更新了文章，把 C1N 改为了「不推荐，有广告」：

【1 月 20 日更新：这家有广告，不要用】

既然市面上的工具都不太靠谱，那就自己做一个吧！YuGaoGao 就这样诞生了。

项目是什么？

YuGaoGao 是一个专业的微信小程序二维码生成器，核心功能就是：

输入小程序的 AppID 和页面路径，生成一个干净的、无广告的跳转二维码。

用户扫码后直接跳转到微信小程序，没有中间页面，没有广告弹窗，干净利落。

技术架构

这是一个完整的前后端分离项目，采用现代化的技术栈构建：

技术栈详情

层级	技术选型	版本	说明
前端框架	Next.js + React	16.1.4 / 19	App Router, Server Components
UI 框架	Tailwind CSS	4.0	原子化 CSS，Apple 风格设计
组件库	HeroUI	latest	基于 React Aria 的无障碍组件
动画库	Framer Motion	latest	流畅的页面过渡动画
二维码生成	qrcode.react	latest	SVG 渲染，支持自定义样式
文件打包	JSZip + file-saver	latest	批量下载 ZIP 打包
后端框架	Go-Zero	latest	微服务框架，高性能
ORM	Ent	latest	Facebook 出品，类型安全
数据库	MySQL	8.0	InnoDB 引擎，支持事务
认证	JWT	-	无状态令牌，7 天有效期
容器化	Docker Compose	-	一键部署开发环境

核心功能详解

1. 二维码生成原理

微信小程序支持通过 URL Scheme 从外部唤起，格式如下：

Link

weixin://dl/business/?appid=wx1234567890abcdef&path=pages/index/index&env_version=release

参数说明：

参数	必填	说明
`appid`	是	小程序的 AppID，`wx` 开头的 18 位字符串
`path`	否	页面路径，默认 `pages/index/index`
`env_version`	否	版本：`release`(正式) / `trial` / `develop`

系统自动将用户输入的 AppID 和路径拼接成 URL Scheme，然后生成对应的二维码。

2. 短链跳转服务

为什么不直接用 URL Scheme 生成二维码？因为：

可追踪：通过短链中转，可以记录每次扫码行为
可修改：目标链接变了，不需要重新生成二维码
更安全：隐藏原始 URL Scheme，防止被恶意利用

短链生成算法：

func generateShortCode() string {
    b := make([]byte, 6)
    rand.Read(b)
    // 使用 URL 安全的字符集
    code := base64.URLEncoding.EncodeToString(b)[:8]
    // 替换可能导致混淆的字符
    code = strings.ReplaceAll(code, "_", "x")
    code = strings.ReplaceAll(code, "-", "y")
    return code
}

生成的短链格式：https://link.anheyu.com/r/xYz12345

3. 扫码数据采集

每次用户扫码访问短链时，系统会记录：

// Scan 数据模型
type Scan struct {
    ID        int       // 记录 ID
    QRCodeID  int       // 关联的二维码 ID
    UserAgent string    // 浏览器/客户端信息
    IP        string    // 访问者 IP（脱敏处理）
    ScannedAt time.Time // 扫码时间
}

通过 User-Agent 解析设备类型：

func parseDevice(userAgent string) string {
    ua := strings.ToLower(userAgent)
    switch {
    case strings.Contains(ua, "iphone"):
        return "iPhone"
    case strings.Contains(ua, "ipad"):
        return "iPad"
    case strings.Contains(ua, "android"):
        return "Android"
    case strings.Contains(ua, "windows"):
        return "Windows"
    case strings.Contains(ua, "mac"):
        return "Mac"
    default:
        return "Other"
    }
}

4. 统计分析

提供多维度的数据统计：

echarts

{
  "title": {
    "text": "最近 7 天扫码趋势",
    "left": "center",
    "textStyle": { "fontSize": 14 }
  },
  "tooltip": {
    "trigger": "axis",
    "axisPointer": { "type": "shadow" }
  },
  "grid": {
    "left": "3%",
    "right": "4%",
    "bottom": "3%",
    "containLabel": true
  },
  "xAxis": {
    "type": "category",
    "data": ["01-15", "01-16", "01-17", "01-18", "01-19", "01-20", "01-21"]
  },
  "yAxis": {
    "type": "value",
    "name": "扫码次数"
  },
  "series": [{
    "name": "扫码次数",
    "type": "bar",
    "barWidth": "60%",
    "itemStyle": {
      "color": {
        "type": "linear",
        "x": 0, "y": 0, "x2": 0, "y2": 1,
        "colorStops": [
          {"offset": 0, "color": "#10b981"},
          {"offset": 1, "color": "#059669"}
        ]
      },
      "borderRadius": [4, 4, 0, 0]
    },
    "data": [120, 200, 150, 180, 220, 350, 280]
  }]
}

设备分布统计：

echarts

{
  "title": {
    "text": "扫码设备分布",
    "left": "center",
    "textStyle": { "fontSize": 14 }
  },
  "tooltip": {
    "trigger": "item",
    "formatter": "{b}: {c} ({d}%)"
  },
  "legend": {
    "orient": "vertical",
    "left": "left"
  },
  "series": [{
    "name": "设备类型",
    "type": "pie",
    "radius": ["40%", "70%"],
    "avoidLabelOverlap": false,
    "itemStyle": {
      "borderRadius": 10,
      "borderColor": "#fff",
      "borderWidth": 2
    },
    "label": { "show": false },
    "emphasis": {
      "label": { "show": true, "fontSize": 14, "fontWeight": "bold" }
    },
    "data": [
      {"value": 580, "name": "iPhone", "itemStyle": {"color": "#10b981"}},
      {"value": 420, "name": "Android", "itemStyle": {"color": "#059669"}},
      {"value": 80, "name": "iPad", "itemStyle": {"color": "#34d399"}},
      {"value": 60, "name": "其他", "itemStyle": {"color": "#6ee7b7"}}
    ]
  }]
}

5. 样式自定义

支持丰富的自定义选项：

选项	说明	默认值
前景色	二维码码点颜色	`#000000`
背景色	二维码背景颜色	`#FFFFFF`
尺寸	输出图片尺寸（128-512px）	256px
容错级别	L(7%) / M(15%) / Q(25%) / H(30%)	M
Logo	中心 Logo 图片（自动挖空）	无

预设配色方案：

typescript

const colorPresets = [
  { fg: "#000000", bg: "#FFFFFF", name: "经典黑白" },
  { fg: "#10b981", bg: "#FFFFFF", name: "品牌绿" },
  { fg: "#1d1d1f", bg: "#f5f5f7", name: "深灰浅底" },
  { fg: "#059669", bg: "#FFFFFF", name: "深邃绿" },
  { fg: "#14b8a6", bg: "#FFFFFF", name: "青绿色" },
  { fg: "#047857", bg: "#FFFFFF", name: "森林绿" },
];

6. 批量下载

选中多个二维码后，可以一键打包下载为 ZIP 文件：

typescript

const handleBatchDownload = async () => {
  const zip = new JSZip();

  for (const qrcode of selectedQRCodes) {
    const blob = await downloadQRCode(qrcode);
    if (blob) {
      const filename = `${qrcode.title || qrcode.shortCode}.png`;
      zip.file(filename, blob);
    }
  }

  const content = await zip.generateAsync({ type: "blob" });
  saveAs(content, `qrcodes-${Date.now()}.zip`);
};

7. 分组管理

当二维码数量多了，分组管理就很重要了。支持创建多个分组，按业务场景分类管理：

电影活动：管理各类电影宣传、活动推广的二维码
餐饮推广：新店开业、会员招募、节日促销等场景
企业内部：员工福利、内部培训、会议签到等企业场景
个人使用：名片二维码、个人主页等个人场景

项目亮点

特性	说明
无广告	扫码直达目标，没有中间页和广告弹窗
开源免费	MIT 协议，商用无忧
数据自主	自己部署，数据完全掌控
功能完整	从生成到统计，一站式解决
现代技术栈	Next.js 16 + Go-Zero，性能优异
Apple 设计	参考 Apple 设计语言，简洁优雅
响应式	完美适配桌面端和移动端
暗色模式	支持亮色/暗色主题自动切换

写在最后

有时候，一个好的工具就是从「市面上的都不好用」这个念头开始的。

如果你也有类似的需求，欢迎试试看。

许可证

MIT License - 随便用，注明出处即可。

安知鱼

生活明朗，万物可爱

本文是原创文章，采用 CC BY-NC-SA 4.0 协议，完整转载请注明来自安知鱼

Next2 小程序1

喜欢这篇文章的人也看了

随便逛逛

小鱼起始页：致敬五年前的那份初心

React 安全漏洞：一场连环翻车事故

隐私政策

评论内容

0/500

昵称

邮箱

网址

滚动到此处加载评论...

安知鱼

来自安知鱼最新设计与科技的文章

查看全部

鱼高高 - 一个无广告的微信小程序二维码生成器

项目起源

项目是什么？

技术架构

技术栈详情

核心功能详解

1. 二维码生成原理

2. 短链跳转服务

3. 扫码数据采集

4. 统计分析

5. 样式自定义

6. 批量下载

7. 分组管理

项目亮点

写在最后

相关链接

许可证

喜欢这篇文章的人也看了

小鱼起始页：致敬五年前的那份初心

React 安全漏洞：一场连环翻车事故

鱼高高 - 一个无广告的微信小程序二维码生成器

项目起源

项目是什么？

技术架构

技术栈详情

核心功能详解

1. 二维码生成原理

2. 短链跳转服务

3. 扫码数据采集

4. 统计分析

5. 样式自定义

6. 批量下载

7. 分组管理

项目亮点

写在最后

相关链接

许可证

喜欢这篇文章的人也看了

小鱼起始页：致敬五年前的那份初心

React 安全漏洞：一场连环翻车事故