🎁 盲盒交友小程序

盲盒交友小程序将「盲盒」的惊喜感与社交交友结合，用户可以将自己的信息投放到「盲盒」中，其他用户消耗解锁次数后随机解锁，从而产生双向匿名交友的趣味体验。整个项目基于 API工厂 后端服务驱动，无需自建服务器，开箱即用。

启动页	登录页	发现页	投放盲盒	投放盲盒（续）

我的	充值解锁次数	解锁记录	投放记录	用户协议

• 框架：uni-app (Vue 3)
• 目标平台：微信小程序 / H5
• 后端服务：API工厂 — apifm-uniapp ^26.7.26
• 工具库：dayjs 日期处理
• 海报生成：lime-painter 分享海报绘制

git clone https://github.com/your-username/your-repo.git
cd your-repo

npm install

打开根目录下的 config.js，将 subDomain 和 merchantId 替换为你自己在 API工厂 注册后获得的值：

// config.js
const config = {
  subDomain: 'your-subdomain',   // ⚠️ 改成你自己的子域名
  merchantId: 123456,             // ⚠️ 改成你自己的商户ID
}

登录 API工厂后台 → 个人中心 → 即可找到你的子域名和商户ID。

打开 manifest.json，找到 mp-weixin 节点，将 appid 替换为你自己微信小程序的 AppID：

"mp-weixin": {
  "appid": "your-wx-appid",   // ⚠️ 改成你自己的微信小程序 AppID
  "setting": {
    "urlCheck": false
  },
  "usingComponents": true
}

在 微信公众平台 注册小程序后，进入「开发管理 → 开发设置」即可获取 AppID。

微信小程序（开发调试）

npm run dev:mp-weixin

然后打开「微信开发者工具」，导入 dist/dev/mp-weixin 目录即可预览。

H5 模式（浏览器调试）

npm run dev:h5

生产构建

# 微信小程序
npm run build:mp-weixin

# H5
npm run build:h5

盲盒交友/
├── common/              # 公共工具函数（auth、支付、导航栏等）
├── components/          # 全局组件
│   └── nav-bar/         # 自定义导航栏组件
├── pages/               # 页面目录
│   ├── start/           # 启动页
│   ├── index/           # 发现页（首页）
│   ├── login/           # 登录页
│   ├── push/            # 投放盲盒
│   ├── push-logs/       # 投放记录
│   ├── unlock-logs/     # 解锁记录
│   ├── recharge/        # 购买解锁次数
│   ├── agreement/       # 用户协议
│   └── user/            # 个人中心相关页面
├── static/              # 静态资源（图片、图标）
├── store/               # Vuex 状态管理
├── uni_modules/         # uni-app 插件模块
├── config.js            # ⚠️ API工厂配置（必须修改）
├── manifest.json        # ⚠️ 小程序 AppID 配置（必须修改）
├── pages.json           # 页面路由与 TabBar 配置
└── App.vue              # 应用入口

本项目后端采用 API工厂 SaaS 服务，无需自建服务器。

1. 前往 API工厂官网 注册账号
2. 创建应用，获取 子域名（subDomain） 和 商户ID（merchantId）
3. 在后台配置用户体系、商品（解锁套餐）、订单等数据
4. 将以上信息填入 config.js 即可完成对接

详细文档：https://www.yuque.com/apifm/nu0f75/cdqz1n

Q：运行后提示"商户不存在"或接口报错？

检查 config.js 中的 subDomain 和 merchantId 是否已替换为你自己的值。

Q：微信开发者工具提示 AppID 不匹配？

确认 manifest.json 中 mp-weixin.appid 已改为你自己在微信公众平台申请的 AppID。

Q：支付功能无法使用？

需要在 API工厂后台绑定微信支付商户号，并确保小程序已通过微信审核上线。

Q：dist 目录不存在？

先执行 npm run dev:mp-weixin 构建一次，dist 目录会自动生成。

• 天使童装 / 码云镜像 / GitCode镜像
• 天使童装（uni-app版本） / 码云镜像 / GitCode镜像
• 简约精品商城（uni-app版本） / 码云镜像 / GitCode镜像
• 舔果果小铺（升级版）
• 面馆风格小程序
• AI名片 / 码云镜像 / GitCode镜像
• 仿海底捞订座排队 (uni-app) / 码云镜像 / GitCode镜像
• H5版本商城/餐饮 / 码云镜像 / GitCode镜像
• 餐饮点餐 / 码云镜像 / GitCode镜像
• 企业微展 / 码云镜像 / GitCode镜像
• 无人棋牌室 / 码云镜像 / GitCode镜像
• 酒店客房服务小程序 / 码云镜像 / GitCode镜像
• 面包店风格小程序 / 码云镜像 / GitCode镜像
• 朋友圈发圈素材小程序 / 码云镜像 / GitCode镜像
• 小红书企业微展 / 码云镜像 / GitCode镜像
• 旧物回收、废品回收 / 码云镜像 / GitCode镜像
• 会员卡（饭卡）储值消费系统 / 码云镜像 / GitCode镜像
• 盲盒交友 uni-app / 码云镜像 / GitCode镜像

本项目基于 MIT License 开源，欢迎 Fork、Star 和贡献代码。