Card Studio

智寻名片是把微信名片、企业展示和客户沉淀做成一体化小程序

Card Studio 是 IdeaSeek 打造的开源微信电子名片小程序前端，基于 uni-app 开发，围绕个人名片、名片分享、企业展示、企业宣传图片展示、客户访问记录与数据统计等能力，帮助企业把“展示自己”和“沉淀客户”放在同一个微信场景里完成。

当前仓库仅保留 微信小程序前端部分，服务端代码已移除，适合用作：

• 电子名片小程序前端模板
• 企业品牌展示与员工名片场景的二次开发底座
• 微信私域获客 / 线索沉淀类产品的前端参考项目

项目特性

• 微信登录后创建、编辑和管理个人电子名片
• 支持头像、Logo、背景图与宣传图片上传
• 支持手机号、地址、邮箱、网址、微信号等联系方式展示
• 支持名片详情页分享、访客访问记录与基础统计展示
• 内置微信隐私授权处理流程
• 基于 uni-app + Vue 3，可继续扩展为企业展示、CRM、作品集等场景

当前开源范围

本仓库只包含前端小程序代码，不包含以下内容：

• 服务端接口实现
• 数据库结构
• 管理后台
• 文件上传服务
• 线上部署配置

如果你要让项目完整跑通，需要自行提供后端接口，并与当前前端接口层完成对接。

页面能力

当前前端已包含以下页面：

• pages/entry/index：首页 / 微信登录入口
• pages/cards/index：我的名片列表
• pages/cards/edit：新建 / 编辑名片
• pages/card/detail：名片详情与分享页
• pages/stats/index：访问统计与最近访客
• pages/settings/index：设置页说明
• pages/privacy/index：服务协议与隐私政策页

演示地址

微信搜索 智寻名片 小程序

技术栈

• uni-app
• Vue 3
• Vite
• 微信小程序

本地开发

1. 安装依赖

npm install

2. 启动微信小程序开发

npm run dev:mp-weixin

启动后，将编译产物导入微信开发者工具即可继续调试。构建输出目录以本地结果为准，通常可在 dist/dev/mp-weixin 中找到。

3. 可选：H5 调试

npm run dev:h5

说明：本项目主要面向 微信小程序场景，部分登录、分享、隐私授权与上传能力需要在微信环境下验证。

使用前需要修改的配置

1. 替换小程序 AppID

当前项目中的 AppID 位于：

• src/manifest.json

开源使用时请替换成你自己的微信小程序 AppID。

2. 配置接口地址

当前前端默认接口地址为：

https://card.ideaseek.cn/api

相关位置：

• src/utils/auth.js
• src/pages/entry/index.vue

你可以改成自己的服务端地址，或在运行时通过本地缓存中的 showCardBaseUrl 动态覆盖。

3. 配置微信后台合法域名

小程序请求、上传、分享等能力依赖微信后台配置。请在微信小程序后台补充：

• 服务器合法请求域名
• 上传文件合法域名
• 下载文件合法域名

否则会出现网络请求失败或上传失败。

4. 配置用户隐私保护指引

项目已接入微信官方隐私授权流程。若你使用了以下能力：

• 微信登录
• 图片选择
• 相册 / 相机上传

请在微信小程序后台完善：

• 设置 -> 服务内容声明 -> 用户隐私保护指引

否则在真机或开发环境中可能会被微信拦截。

接口对接说明

当前接口封装位于：

• src/api/http.js
• src/api/modules.js

前端已经预置了以下接口模块：

• authApi：登录
• configApi：系统配置 / 权限
• cardApi：名片列表、详情、创建、更新、删除、默认名片、统计、访客、媒体保存
• publicCardApi：公开名片详情、访客记录
• uploadApi：文件上传

默认响应结构约定为：

{
  "code": 0,
  "message": "ok",
  "data": {}
}

如果你的后端返回结构不同，可以优先调整 src/api/http.js 中的响应解析逻辑。

目录结构

card-studio/
├── src/
│   ├── api/                # 接口请求封装
│   ├── components/         # 通用组件
│   ├── pages/              # 小程序页面
│   ├── static/             # 静态资源
│   ├── utils/              # 登录、隐私、缓存等工具
│   ├── App.vue
│   ├── main.js
│   ├── manifest.json
│   └── pages.json
├── package.json
└── vite.config.js

适合扩展的方向

• 企业主页 / 品牌馆
• 企业作品集 / 案例展示
• 员工名片统一管理
• 客户线索收集与标签化
• 分销 / 邀请 / 海报分享
• 更完整的 CRM 与数据分析后台

开源说明

这个仓库的定位是 可二次开发的微信电子名片前端模板。

如果你正在寻找一套可直接商用上线的完整系统，请注意你仍需要补齐：

• 服务端业务接口
• 上传存储服务
• 数据库设计
• 小程序后台配置
• 合规文案与隐私内容

致谢

Card Studio 由 IdeaSeek 珠海市智寻科技有限公司（官网：https://www.ideaseek.cn）发起并整理开源，希望能帮助正在做微信名片、企业展示、私域获客与客户沉淀产品的团队更快起步。