DEV Community: gooking

用 uni-app + Vue3 做了一款照片交易小程序，AI 人脸识别帮你找回属于自己的照片

gooking — Tue, 15 Sep 2026 07:50:54 +0000

先说个场景：参加演唱会、马拉松、展会、婚礼、毕业典礼，现场摄影师拍了几千张照片，最后发个网盘或者朋友圈，让你自己去翻。想找到自己那张，全靠肉眼硬翻，翻几十页就放弃了。

我做的这个小程序，就是想把这件事变得简单一点：摄影师上传照片、明码标价；用户上传一张自拍，AI 自动在照片库里匹配出所有带自己的照片；看中哪张买哪张，买完下载原图。

项目叫「光影集市」，做完了也跑起来了，把过程中的一些东西分享出来，供同样在做小程序、或者有类似需求的朋友参考。

项目是什么

一款基于 uni-app（Vue 3） 开发的照片交易小程序，目标平台是微信小程序和 H5。后端由 SaaS 服务驱动，不需要自己买服务器、不需要自己写接口，克隆项目后改两个配置项就能跑起来，属于典型的"开箱即用"型项目。

技术参数一览：

项目	参数
前端框架	uni-app + Vue 3
目标平台	微信小程序 / H5
后端服务	SaaS 云端接口（apifm-uniapp ^26.9.15）
工具库	dayjs（日期处理）
状态管理	Vuex
开源协议	MIT
当前版本	v26.9.15

功能模块

首页：Banner 轮播 + 双列瀑布流照片墙，支持下拉刷新和上拉加载更多，浏览体验接近主流内容类 App。
登录 / 注册：用户名密码登录与注册，支持一键切换，含用户协议确认勾选。
照片详情：大图预览（可点击查看原图）、价格展示，支持一键加购或立即购买。
人脸找照片：核心功能。拍摄或上传自拍 → AI 提取人脸特征向量 → 在照片库中按相似度排序，精准匹配本人的照片。
购物车 / 结算：批量选购、支持移除单张，账户余额一键确认支付。
购买记录：已支付 / 待支付订单列表，待支付订单可直接跳转补款。
订单详情：订单内照片以网格展示，点击预览，长按即可保存到相册。
个人中心：头像昵称、账户余额展示，购买记录、购物车等快捷入口。
内容管理：用户协议、隐私政策、关于我们等文案由 CMS 后台统一维护，改文案不用重新发版。

几个客观参数，供参考

照片列表为双列瀑布流 + 分页加载，数据量大了也不会卡首页；
人脸匹配基于人脸特征向量相似度排序，自拍清晰、正面、光线充足时匹配效果最佳；
支付采用账户余额模式，余额由后端统一管理，接入第三方支付通道即可扩展；
运行前只需要替换两个配置：后端子域名 / 商户 ID，以及微信小程序 AppID；
内置测试账号，方便下载后直接体验完整流程。

适合谁看

学小程序开发的同学：这是一个完整的"商品浏览 + 购物车 + 支付 + 订单"闭环项目，页面结构清晰，适合当多页面实战模板学习；
有照片分发需求的摄影师：活动跟拍、婚礼、毕业照、证件照等场景，可以基于它改造成自己的"交照片"工具，客人自助选片、付费、下载；
需要一套现成电商闭环代码的人：购物车、订单、余额支付这些模块都是可以直接用的。

怎么找到它

项目名称「光影集市」。感兴趣的朋友可以自行搜索（关键词：光影集市、uni-app 照片交易小程序），或者私信我交流——部署、改造、人脸识别测试、功能细节，都可以聊。

用"盲盒"的方式交朋友，这个思路有点意思

gooking — Tue, 28 Jul 2026 08:17:57 +0000

用"盲盒"的方式交朋友，这个思路有点意思

最近在研究一些社交类小程序的实现思路，偶然发现了一个很有趣的交互模式——把"盲盒"的随机惊喜感和陌生人社交结合起来。

说实话，第一次看到这个概念的时候，我觉得挺新鲜的。普通的交友软件无非就是刷照片、互相关注，而盲盒交友的逻辑完全不同：你先把自己的信息"投放"到一个盲盒池子里，别人消耗解锁次数随机打开，才能看到你的信息。双方都不知道对方是谁，直到那一刻才揭晓——这种不确定性本身就带来了一种特别的期待感。

这个玩法为什么有意思

传统交友的问题在于信息太透明，颜值、学历、职业全摆出来，人很容易陷入"筛选模式"，把找对象变成了一种类购物的体验。

盲盒交友反过来，把"不知道"这件事变成了产品核心。你投放的是真实的自己，解锁的那一刻才是惊喜的开始。对于不擅长主动出击、不喜欢被第一印象定义的人来说，这种方式反而更自然。

当然这只是一种玩法探索，适不适合大规模落地是另一回事。但从产品设计角度来说，这个思路挺值得研究的。

拆一下技术实现

为了更好地理解这个模式，我找到了一个开源实现：一款用 uni-app（Vue 3）写的盲盒交友小程序，整体架构比较清晰，拿来学习参考很合适。

整个项目分三个主要 Tab：

发现：浏览盲盒列表，消耗解锁次数随机开盒
投放：填写个人信息，把自己投进盲盒池
我的：账户管理、充值、签到、查看记录

功能不算复杂，但五脏俱全。尤其是"解锁次数"这套机制设计得比较合理——用次数而不是直接收费，降低了用户的心理门槛，同时也形成了一个自然的付费转化路径。

后端用的是 API工厂的 SaaS 服务，不用自建服务器，改几行配置就能跑起来。对于想快速验证产品想法的独立开发者来说，这个选型很务实。

代码结构一眼能看懂

pages/
├── start/        启动页（品牌动画）
├── index/        发现页（盲盒列表）
├── push/         投放盲盒
├── push-logs/    投放记录
├── unlock-logs/  解锁记录
├── recharge/     购买解锁次数
└── user/         个人中心（资料、钱包、签到、安全设置）

页面划分很清晰，逻辑耦合度低。uni-app 跨平台的特性也意味着稍作调整可以同时跑在微信小程序和 H5 上，复用成本很低。

值得一提的是它用了 lime-painter 做分享海报生成，这块功能在社交类产品里挺常见的需求，看看它怎么实现的也有参考价值。

适合哪些场景借鉴

如果你正在做以下方向的东西，这个项目可以作为参考：

社交类小程序的冷启动设计 —— 盲盒机制天然制造话题感，适合冷启动阶段的裂变传播
次数/积分消耗类的付费模型 —— 不直接卖"联系方式"，而是卖"开盒次数"，规避了直接撮合带来的合规风险
uni-app + SaaS 后端的轻量开发模式 —— 适合独立开发者快速出产品
随机匹配类功能的 UI 交互设计 —— 怎么用界面传递"惊喜感"是个设计课题

能跑起来吗

我自己试了一下，本地环境按步骤走：

git clone <仓库地址>
npm install
# 修改 config.js 里的 subDomain 和 merchantId
# 修改 manifest.json 里的微信小程序 AppID
npm run dev:mp-weixin

然后用微信开发者工具导入 dist/dev/mp-weixin 目录，大概十分钟能跑起来。主要时间花在注册 API工厂账号和微信小程序 AppID 上。

需要注意的是，支付功能需要绑定微信支付商户号，这个在开发测试阶段可以先跳过，只验证基本流程。

一些想法

盲盒社交这个方向，国内外都有一些产品在做，形态各异。有做线下活动的、有做语音盲盒的、有做兴趣标签盲盒的。

本质上都在解决一个问题：怎么让陌生人之间的第一次接触有趣一点、自然一点。

这个开源项目提供了一种最简单的实现路径，逻辑清晰，改造空间也大。如果你想在这个方向上做点东西，或者单纯想看看一个完整的社交类小程序是怎么组织代码的，可以翻一翻。

项目地址在这里，三个镜像都能访问：

GitHub：https://github.com/gooking/blindBoxDating
码云（Gitee）：https://gitee.com/javazj/blindBoxDating
GitCode：https://gitcode.com/gooking2/blindBoxDating

个人学习笔记，欢迎交流。

小白教程：使用 Coze 构建漂流瓶匿名社交智能体

gooking — Tue, 10 Mar 2026 02:37:46 +0000

本文带你零基础、零代码，快速借助 Coze 平台搭建一个漂流瓶匿名社交智能体，全程操作简单易懂，跟着步骤走就能完成。

核心功能

扔瓶子：用户可通过智能体扔出漂流瓶，可用于日常吐槽、分享每日动态、交流经验、倾诉心情等，实现匿名表达。
捡瓶子：用户可通过智能体随机捡起一个漂流瓶，查看他人分享的内容，感受陌生人的情绪与故事，完成匿名社交互动。

一、准备工作：免费注册 Coze 账号

访问官网免费注册使用：https://www.coze.cn/home

二、创建智能体

进入 Coze 平台后，点击创建智能体，自定义智能体名称（示例：「YY漂流瓶」），创建完成后进入详情页进行后续设置，操作界面如下：

2.1 人设与回复逻辑（直接复制使用）

在智能体「人设与回复」模块，复制以下内容粘贴，无需修改，可直接适配漂流瓶核心功能：

# 角色：

你是YY漂流瓶，主要功能就2个，用户可以丢一个漂流瓶；用户可以捞起一个漂流瓶。

以实现漂流瓶的匿名社交功能。


## 技能：

使用以下技能之前，都需要保证 token 变量有值，没有token或无效，需要先调用插件“apifm / authorize”获取token，获取成功后，输出登录成功的消息，告知当前登录的用户编号

插件参数说明：
- sysUuid 传 sys_uuid 变量的值

###  扔瓶子

如果无法提取到用户经纬度数据，经纬度参数传0，调用插件 bottleMsg_publish 完成扔瓶子，成功后提示用户成功

###  捞瓶子
调用插件 bottleMsg_salvage 

## 限制：
- 只能回复和和上面技能有关的问题

2.2 设置变量

变量设置用于存储用户信息和交互所需参数，步骤如下：

进入「记忆 → 变量」页面，勾选启用 sys_uuid、sys_longitude、sys_latitude 三个系统级变量，分别用于存储用户唯一标识、用户所在经度、用户所在纬度。
添加用户变量：新增 token 变量，用于存储用户登录凭证，保障登录状态与功能正常使用。

变量设置完成后效果如下：

2.3 添加插件

插件是实现漂流瓶核心功能的关键，进入「技能 → 插件」页面，点击「+」按钮，搜索「apifm」，添加以下3个插件，缺一不可：

apifm / authorize
apifm base / bottleMsg_publish
apifm base / bottleMsg_salvage

插件功能说明

apifm / authorize：实现用户自动注册登录功能，生成用户唯一凭证，保障用户记忆和个性化服务正常运行。
apifm base / bottleMsg_publish：实现「扔瓶子」功能，接收用户输入内容并完成漂流瓶发布。
apifm base / bottleMsg_salvage：实现「捡瓶子」功能，随机获取其他用户发布的漂流瓶内容。

插件参数设置

每个插件右侧均有「齿轮」图标，点击即可进入设置界面，按以下要求配置（关键步骤，请勿出错）：

apifm / authorize 插件设置设置界面如下：

sysUuid 参数：直接选中引用系统参数的值（无需手动输入）；
domain：填写自己的api工厂后台专属域名，填写完成后关闭右侧开关（关闭后，AI将直接使用填写的域名）；
merchantKey：填写自己的api工厂后台商户密钥，填写完成后关闭右侧开关（关闭后，AI将直接使用填写的密钥）。

bottleMsg_publish 和 bottleMsg_salvage 插件设置设置界面如下：

token 参数：直接选中引用系统参数的值（无需手动输入）；
domain：填写自己的api工厂后台专属域名，填写完成后关闭右侧开关（关闭后，AI将直接使用填写的域名）。

💡测试账号说明：如果没有自己的api工厂专属域名和商户密钥，可使用以下测试账号进行调试，直接复制填写即可：
domain： wxapi
merchantKey： 1ecf17ea389ebb5ccd5e258e390d3696

2.4 其他设置

平台默认设置已可满足漂流瓶基本使用需求，无需额外修改；若需优化体验，可按需调整「开场白」「语音音色」「交互风格」等，让智能体更贴合个人需求或业务场景。

三、在线测试与效果预览

设置完成后，可通过平台右侧实时测试窗口，模拟用户「扔瓶子」「捡瓶子」操作，边测试边调整参数，直至智能体回复符合预期，测试界面如下：

四、正式发布

测试无误后，点击页面右上角「发布」按钮，无需审核，发布后即时生效，任何人可直接访问该智能体，进行漂流瓶匿名社交互动。

五、效果展示

5.1 扔瓶子效果

用户发送扔瓶子指令后，智能体接收内容并完成发布，反馈成功提示，效果如下：

5.2 捡瓶子效果

用户发送捡瓶子指令后，智能体随机获取一个漂流瓶内容并展示，效果如下：

总结

本教程全程零代码、零基础，通过 Coze 平台快速搭建漂流瓶匿名社交智能体，核心步骤可总结为「注册账号 → 创建智能体 → 配置人设与变量 → 添加插件并设置 → 测试 → 发布」。整个过程操作简单，无需专业技术，借助 Coze 平台的可视化操作和插件功能，即可快速实现匿名漂流瓶的核心社交功能。
测试账号可满足调试需求，若需长期使用，建议注册自己的api工厂账号，获取专属域名和商户密钥，保障功能稳定运行。后续可根据个人需求，优化智能体的交互风格、开场白等细节，提升用户体验。无论是用于个人兴趣交流，还是小型社交场景搭建，这个智能体都能快速落地使用。

10 分钟极速上手：使用 Coze 快速搭建可商用级智能客服智能体

gooking — Sun, 08 Mar 2026 23:49:00 +0000

本文带你零基础、零代码，用 Coze 平台快速搭建一个可直接上线使用的智能客服智能体。你只需在本文基础上优化人设、完善知识库，即可快速落地产品级客服能力。

核心功能

自动理解用户问题，基于知识库精准回复
未知问题自动转为用户反馈并后台保存，支持微信 / 钉钉 / 邮件实时通知，持续迭代知识库

一、准备工作：免费注册 Coze 账号

访问官网免费注册使用：https://www.coze.cn/home

二、创建专属知识库

根据业务需求自定义知识库名称，例如「智能客服知识库」。

Coze 支持绝大多数文档格式，也可直接填入在线文档 URL 自动导入。

测试知识库示例（可直接复制）

1）质量检查和软件测试有什么区别？
QA（质量保证）关注软件开发过程的质量；软件测试确保最终产品功能符合用户需求。

2）什么是 Testware？
Testware 是测试用例、测试数据、测试计划等测试相关工件。

3）构建和发布之间有什么区别？
构建：开发团队提供给测试团队的安装包。
发布：测试/开发团队交付给客户的正式安装包。

4）SQA 团队在自动化中面临哪些挑战？
自动化工具掌握、脚本复用、用例适配性、复杂用例自动化。

5）什么是漏洞泄漏和漏洞释放？
错误发布：已知缺陷但优先级低，先行交付测试。
错误泄漏：客户发现测试团队未检出的缺陷。

6）什么是数据驱动测试？
从 csv、excel 等文件读取测试数据，在被测系统上自动化执行。

三、创建智能客服智能体

自定义智能体名称，例如「智能客服智能体」。

3.1 人设与回复逻辑（直接复制使用）

# 角色
你叫小美，是一位资深QA专家，有任何QA方面的问题都可以咨询我。

## 回答主题简介
我是杭州飞的高科技公司的客服人员，帮你提供在线咨询服务。

## 工作流程
### 步骤一：问题理解与回复分析
1. 认真理解从知识库中召回的内容和用户输入的问题，判断是否为有效答案。
2. 若问题模糊、信息不足，主动追问用户，确保准确理解需求。

### 步骤二：回答用户问题
1. 与QA主题无关的问题，礼貌拒绝回答。
2. 知识库无相关内容时，统一回复：
“对不起，我已学习的知识中不包含问题相关内容，暂时无法提供答案。如果你有相关问题，请给我们留言，我们将记录并及时处理。”
并引导用户留下联系方式，通过 comment_add 插件提交反馈，返回记录编号作为回执。
3. 有匹配知识时，仅提取相关内容，整理为**精准、简洁**的答案回复。
4. 按判断返回对应文档链接，无需说明来源。

## 限制
1. 禁止回答与QA无关的问题。
2. 统一使用Markdown格式回复。

3.2 引入知识库

在中间栏「知识」点击 +，绑定已创建的知识库。

用户提问时，智能体会自动检索知识并整理回复。

3.3 添加留言反馈插件

在「技能 → 插件」点击 +，搜索 apifm，添加 apifm common / comment_add。

作用：

智能体无法回答时，自动保存用户问题到后台

返回反馈编号给用户

支持微信 / 钉钉 / 邮件实时通知管理员，用于迭代知识库

3.4 其他设置

默认即可满足使用；可按需调整开场白、语音音色、交互风格等，让智能体更贴合业务。

四、在线测试与效果预览

右侧为实时测试窗口，边测边调，直到回复符合预期。

五、正式发布

点击右上角「发布」，无需审核、即时生效，任何人可直接访问使用。

六、效果展示

场景 1：知识库匹配 → 精准回复

场景 2：无知识 → 自动保存反馈并通知

总结

借助 Coze 平台，我们仅用不到 10 分钟就完成了从注册、建库、配置到发布的全流程，快速拥有了一个具备自动问答、未知问题反馈、实时通知、可直接商用的智能客服智能体。整套方案零代码、低成本、易维护，既能大幅降低人工客服压力，又能通过用户反馈持续迭代知识库，让智能体越用越聪明。无论是个人测试、团队效率提升还是企业业务落地，这套流程都具备极强的实用性与可复制性，是快速实现 AI 客服落地的最佳实践之一。

会员卡（饭卡）储值消费系统 mealcard

gooking — Thu, 26 Feb 2026 05:24:03 +0000

软件简介
一款基于 Uniapp 开发的轻量化会员卡（饭卡）储值消费系统，聚焦线下消费场景的数字化管理与私域流量运营，为商户打造集自助储值、会员折扣、消费溯源、消息通知于一体的一站式解决方案，同时为用户提供便捷的消费充值体验，高效助力商户实现客户留存与精细化运营。

系统核心功能：

自助充值消费：用户自主完成储值、消费操作，无需人工干预，提升消费与管理效率；

会员折扣体系：支持会员等级与消费折扣配置，吸引用户开通会员，增强用户粘性；

消费记录查询：用户可随时查看历史消费、储值明细，消费透明化，提升信任度；

动态消息通知：实时展示平台动态、最新公告，支持公告置顶，重要信息不遗漏。

扫码体验

项目展示

开源地址

[GitHub] https://github.com/gooking/mealcard
[码云镜像] https://gitee.com/javazj/mealcard
[GitCode镜像] https://gitcode.com/gooking2/mealcard