我用 AI 做了一个「明星脸比对」小程序，三件开发工具轮着上

最新推荐文章于 2026-06-16 17:44:11 发布

原创最新推荐文章于 2026-06-16 17:44:11 发布 · 181 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#经验分享

小游戏开发同时被 2 个专栏收录

4 篇文章

订阅专栏

经验分享

3 篇文章

订阅专栏

AtomGit「码动四季·开源同行」夏季征稿活动 10w+人浏览 541人参与

我用 AI 做了一个「明星脸比对」小程序，三件开发工具轮着上

你有没有想过，自己到底长得像哪个明星？

上个月我花了不少时间做了一个微信小程序——明星脸比对，上传一张照片就能知道你和哪位明星最像。后来又加了「夫妻相」和「跨性别撞脸」两个玩法，越做越上头。

今天聊聊这个项目用到的开发工具和技术栈，给想做小程序的朋友一个参考。

三大核心功能

先说产品。小程序目前有三个核心玩法：

🌟 明星脸比对：上传一张正脸照，AI 在 3000+ 明星人脸库中搜索，告诉你最像哪个明星，还会给出相似度评分和趣味等级。支持按地区筛选——内地、港台、日韩、欧美，想找哪个圈的明星都行。

💑 夫妻相/闺蜜相：上传两个人的照片，AI 计算人脸相似度，给出缘分指数。从"萍水相逢"到"灵魂双生"五个等级，情侣和闺蜜玩起来特别有意思。

🌈 跨性别撞脸：这个是最有话题性的。男生选"我是男生"会搜索女明星，女生选"我是女生"会搜索男明星。看看异性明星中谁最像你，结果经常出人意料，特别适合发朋友圈。

三个功能都接入了积分系统：每次比对消耗 5 积分，分享给好友双方各得 5 积分，看广告也能得积分。结果页还贴心地加了一句"比对结果仅供娱乐"，毕竟 AI 打分这事儿，认真你就输了。

开发工具三件套

做微信小程序开发，我用了三个工具，各有分工：

HBuilderX（HBX）—— 主力编码

HBuilderX 是 DCloud 出品的 IDE，UniApp 项目的标配。为什么选它？

UniApp 原生支持：创建项目、编译、运行一条龙，不需要额外配置
云函数开发：uniCloud 的云函数直接在 HBX 里创建和上传，右键一键部署
真机调试：连接手机后可以实时预览，改了代码刷新就能看到效果
代码提示：对 Vue 和 uni API 的提示比较完善

日常编码 80% 的时间都在 HBX 里完成。前端页面、云函数、样式调整，基本不用切换。

微信开发者工具 —— 预览与调试

微信开发者工具是微信官方的，主要用来：

模拟器预览：查看小程序在不同机型上的显示效果
调试面板：Console 日志、Network 请求、Storage 存储，排查问题必备
真机扫码：生成预览二维码，手机扫码直接体验
提交审核：上传代码、提交审核、发布上线都在这里完成

有个坑要注意：插屏广告在开发者工具里基本显示不出来，必须真机测试。我第一次加广告的时候还以为代码写错了，折腾半天才发现是工具的限制。

Trae —— AI 辅助编程

Trae 是字节跳动出的 AI 编程工具，可以理解为"懂项目的 AI 助手"。这个项目里我主要用它做这些事：

需求拆解：把一个模糊的想法拆成具体的开发任务，比如"加一个夫妻相功能"会被拆成：创建页面、配置路由、写云函数 action、对接前端、处理积分逻辑等
代码生成：描述需求后直接生成 Vue 组件代码，包括模板、脚本、样式
Bug 修复：遇到报错直接贴给 Trae，它会分析原因并给出修改方案。比如 this.$app 在独立 JS 模块中无法访问的问题，就是 Trae 帮我定位的
重构建议：把散落在各页面的重复代码封装成公共模块，比如 shareUtil.js 和 AdUtil.js

最实用的一个功能是技能系统。我把项目的架构、接口规范、业务逻辑都写进了一个 SKILL.md 文件，下次对话时 Trae 会自动加载这些上下文，不需要反复解释项目背景。相当于给 AI 配了一份项目文档，效率提升很明显。

技术架构

前端：UniApp + Vue 2

选 UniApp 而不是原生小程序，主要考虑两点：

开发效率：Vue 的组件化开发比原生 WXML 舒服太多
多端潜力：虽然目前只做微信小程序，但以后想上其他平台也方便

页面结构很清晰：

pages/
├── index/          # 明星脸比对
├── couple/         # 夫妻相
├── cross-gender/   # 跨性别撞脸
├── result/         # 各功能的结果页
└── about/          # 关于页面（积分规则）

底部 TabBar 放了两个入口：明星脸和夫妻相，跨性别撞脸放在首页的"更多玩法"悬浮球里。结果页底部会推荐其他两个玩法，形成功能间的互相引流。

后端：uniCloud 云函数 + 腾讯云 IAI

后端完全跑在 uniCloud 云函数上，没有用传统服务器。核心云函数 faceSearch 处理四个 action：

Action	功能	腾讯云接口
detectAndSearch	检测人脸 + 搜索明星	DetectFace + SearchFaces
search	搜索明星	SearchFaces
searchGender	跨性别搜索	SearchFaces（搜索异性 Group）
compare	夫妻相比对	DetectFaceSimilarity

明星数据存在腾讯云 IAI 的人脸库中，按地区和性别分组，共 3000+ 张人脸照片。管理后台用 Flask 写了一个简单的 CRUD，只用来维护明星数据，不参与业务逻辑。

分数映射：精准与娱乐的平衡

这是整个项目中最有意思的技术决策。

腾讯云 IAI 返回的相似度分数非常"严谨"——两张普通人的照片比对，分数经常是 0。如果直接展示原始分数，用户体验会很差：情侣测出 0 分，谁都不开心。

所以我做了一层非线性映射：

原始 0 分 → 映射到 35-40 分（保底，不会 0 分打击人）
原始 0-5 分 → 映射到 40-55 分（大多数普通人）
原始 5-15 分 → 映射到 55-70 分（有点像）
原始 15-30 分 → 映射到 70-85 分（确实像）
原始 30 分以上 → 映射到 85-100 分（非常像）

映射后的分数保持了相对准确性——原始分高的映射后依然高，但整体分布更合理。大多数普通情侣会落在 40-70 分区间，既不会 0 分尴尬，也不会人人"天生一对"。

跨性别搜索也用了类似的映射策略，保底 30 分，避免"找不到相似明星"的挫败感。

公共模块封装

项目中有两个重要的公共模块：

shareUtil.js：分享加分封装。所有 6 个页面（3 个操作页 + 3 个结果页）都需要处理分享加分逻辑，封装后一行调用搞定。有个坑是 this.$app（Vue 原型上挂载的 request 模块）在独立 JS 文件中无法通过 getApp() 获取，必须由调用方传入。

AdUtil.js：广告封装。插屏广告和激励视频的初始化、加载、展示都封装在这里，任何页面需要广告时两行代码搞定。

一些踩过的坑

1. DetectFaceSimilarity 的质量控制

默认 QualityControl=4（最高级别），稍有模糊或侧脸就报"人脸质量不符合要求"。改成 0 之后和 SearchFaces 行为一致，毕竟娱乐应用，能出结果比严格质控重要。

2. 分享截图包含弹窗

点击"分享给好友"时如果积分弹窗还开着，微信截取分享快照时会把弹窗也截进去。解决方案是在分享按钮上加 @click="showScoreModal = false"，先关弹窗再弹出分享界面。

3. 跨性别比对失败率较高

跨性别搜索的匹配率本身就低，用户连续失败体验很差。加了"每日 3 次失败限制"，超过后友好提示"下次再来"，次日自动重置。同时在比对成功后弹出插屏广告，平衡一下体验和收益。

4. ES Module 和 CommonJS 混用

request.js 用的是 export default，而 shareUtil.js 用的是 module.exports，require 导入 ES module 会拿到 undefined。最终方案是不在工具模块中直接引用 request，而是由调用方传入 this.$app。