简介微信个人名片H5生成器源码面向商务人士、自媒体运营者及小微企业用于在微信生态内快速生成并展示个性化名片页面。无需第三方接口在本地浏览器打开即可生成头像、姓名、联系方式、个人介绍等模块也可上传服务器长期使用兼顾私密性与长期可用性。资源包共8个文件、约273KB含1个HTML主页面、3个JS交互脚本、1个CSS样式表、1个txt说明文档及少量图片素材结构清晰、体积轻量便于阅读、部署与二次开发。目前已有333人学习下载。使用这份源码可省去从零开发页面的时间直接替换文本与图片生成专属名片同时其移动端卡片式布局、表单交互和轻量实现方式也可作为前端新手学习H5页面开发与微信内场景适配的实用参考整体上手门槛低无需后端服务即可使用。1. 不套模板、改两行就能用的微信个人名片 H5做销售的、做自媒体的、搞技术接私活的几乎都遇到过同一个尴尬微信好友加了对方问“你是做什么的”你甩过去一张模糊的二维码图片或者一段干巴巴的文字介绍。前两天我给一个做外贸的朋友整理获客工具翻到一个“微信个人名片H5生成器源码”拿来试了试发现它比想象中能打——不是那种让你填一堆表单、最后导出一个死板页面的套壳工具而是真给你一套可以直接改、直接部署的前端源码。手机浏览器打开就是一张带个人头像、称呼、联系方式、二维码的社交名片能转发到微信对话、朋友圈也能嵌入公众号菜单比静态图片多了“点击拨号”“复制微信号”“长按识别加好友”这类交互。这套资源适合谁一是想自己做一张独立名片、不想用第三方平台的人二是前端刚入门、想找个真实项目练手的开发者三是运营人员需要快速搭一个带表单收集功能的承接页。它不依赖后端服务纯前端就能跑部署也无非是扔到任意静态服务器或对象存储里。下面我会从源码结构和实际改动的角度把它拆开讲清楚。2. 拆开源码先弄清楚这张名片到底由哪些文件组成动手改之前先搞清楚这套源码的目录结构。我收到的版本是纯静态实现没有框架依赖核心文件按职责分成了几块展开后大概是下面这个样子wechat-card/ ├── index.html # 名片主页面结构层 ├── assets/ │ ├── css/ │ │ └── style.css # 全部样式包括动画和响应式 │ ├── js/ │ │ ├── main.js # 数据渲染、交互绑定 │ │ └── share.js # 微信JSSDK分享配置逻辑 │ ├── images/ │ │ ├── avatar.jpg # 默认头像 │ │ └── qrcode.png # 默认微信二维码 │ └── fonts/ # 图标字体 └── config.js # 所有个人信息都集中在这里它的设计思路很直白页面结构放在 index.html所有个人信息抽到 config.jsmain.js 负责把这些数据渲染成页面内容。这意味着你不需要去 HTML 里翻找文字替换只要打开 config.js 把内容改掉名片就能展示成你自己的信息。这里有一点值得说源码特意把二维码图片独立放在 images 目录下而不是用某个插件动态生成这种处理方式的优势在于二维码可以批量定制——比如你做不同渠道投放每个渠道准备一个带参数的二维码然后复制多份卡片目录改 config.js 里的二维码路径就行。它对应的“渠道来源统计”虽然不是这个源码自带的功能但二维码图片替换的成本很低日常渠道追踪完全够用。下一步实际上手改配置感受一下这张名片跟着你走有多顺畅。2.1 改 config.js把名片变成你自己的打开 config.js你会看到结构非常清晰的配置对象这是全套源码的“数据中枢”。常见的字段是这样组织的window.CARD_CONFIG { // 基本信息区 base: { name: 张明, // 显示在头像下方的称呼 title: 华东区销售总监, // 职位/头衔 company: 上海启碁信息技术有限公司, // 公司或团队名 avatar: ./assets/images/avatar.jpg, // 头像路径 desc: 专注制造业数字化转型提供ERP实施与定制开发服务, // 一句话简介 }, // 联系方式区 contact: { phone: 13800138000, // 手机号用于“点击拨号” wechatId: zhangming_erp, // 微信号点击后复制 wechatQrcode: ./assets/images/qrcode.png, // 微信二维码 email: zhangmingqidi.tech, // 邮箱点击可跳转邮件 }, // 社交链接区 social: { show: true, // 控制社交图标区是否渲染 items: [ { type: website, label: 公司官网, url: https://www.qidi.tech }, { type: douyin, label: 抖音, url: https://www.douyin.com/user/xxx } ] }, // 主题风格 theme: { primaryColor: #1AAD19, // 主色调默认用了微信绿 cardRadius: 16px, // 卡片圆角大小 darkMode: false // 是否开启深色模式 } };参数说明base.name 和 base.title 是名片上最显眼的两处文字替换后首页就能看到变化contact.wechatId 会被 main.js 拦截点击事件通过剪贴板 API 写入系统粘贴板所以这里必须填真实的微信号primaryColor 支持任何合法的 CSS 颜色值改成 #000000 就是酷黑风改成 #C8161D 就是偏电商的红。改完 config.js 后直接用浏览器打开 index.html 就能看到更新后的效果不需要跑任何构建命令。这里要强调一个新手最容易犯的错直接用本地文件协议file://打开页面时点击“复制微信号”可能没反应原因是主流浏览器对非安全上下文下的剪贴板访问有限制一般建议用本地静态服务打开后面部署章节会详细讲。2.2 页面逻辑梳理数据是怎么流动的索引页 index.html 的 body 部分很简洁主体区域只有几个挂载点真正的渲染工作都在 main.js 里完成。核心逻辑可以概括成这样读取 config.js 里的 CARD_CONFIG → 拼接模板字符串 → 写入对应的 DOM 容器 → 绑定事件。// main.js 核心渲染逻辑 function renderCard() { const config window.CARD_CONFIG; const app document.getElementById(app); // 头像与简介区 const profileHtml div classcard-profile img src${config.base.avatar} alt头像 classavatar / h2 classname${config.base.name}/h2 p classtitle${config.base.title} · ${config.base.company}/p p classdesc${config.base.desc}/p /div ; // 联系方式区手机、微信、邮箱 const contactHtml div classcard-contact a classcontact-item hreftel:${config.contact.phone}>server { listen 80; listen [::]:80; server_name card.example.com; # 换成你自己的域名 root /var/www/wechat-card; # 存放源码的目录 index index.html; location / { try_files $uri $uri/ /index.html; # 处理前端路由 } # 静态文件缓存二维码和头像这类不常变的资源可以开 location ~* \.(png|jpg|jpeg|gif|ico)$ { expires 30d; add_header Cache-Control public, max-age2592000; } }配置说明try_files 的作用是当用户访问 /some/path 时如果该路径不存在真实文件就回退到 index.html避免刷新页面出现 404。图片资源缓存 30 天能明显提升名片在微信内二次打开的速度。如果源文件里有字体文件建议也加一条 .woff2 / .ttf 的缓存规则。部署动作本身就不贴冗长代码了核心步骤三步把源码放到服务器目录安装并启动 Nginx把域名解析到服务器 IP 并提交备案。如果你用的是宝塔面板这类图形化工具转化成“新建站点 → 上传源码 → 开启 SSL”三次点击就行。部署中最烦的是微信内部的兼容问题这一点放到后面的避坑章节详细展开。值得提醒的是在微信里打开名片页最影响体验的往往不是页面样式而是加载速度。首次加载如果包含大量图片资源没有 CDN 加速的话用户在弱网环境可能要等三四秒那时候大部分人都划走了。所以我会建议把 avatar.jpg 和 qrcode.png 压到 100KB 以内并用 tinypng 或 imagemin 这类工具统一过一遍。3.1 域名、备案与 HTTPS 的优先级很多第一次部署的人会问我用 IP 地址不行吗答案是可以但强烈不建议。原因有两个微信内置浏览器对非 HTTPS 页面的展示会有限制包括部分 API 不可用另外 IP 地址访问方式在一些场景下会被微信提示“非安全网页”。正确顺序是注册域名 → 备案 → 解析 → 部署 → 配置 HTTPS 证书。如果是国内服务器备案这步绕不过去一般需要一周左右。HTTPS 证书的申请不需要花钱用 acme.sh 工具可以免费申请 Let‘s Encrypt 证书配置到 Nginx 后自动续期。从微信访问的体验上看HTTPS 是硬门槛不只是安全问更关键的是微信 JSSDK 的签名校验要求页面必须是 HTTPS 环境。所以建议部署时直接跳到最后一步省得后面返工。3.2 部署后验证打开页面和检查接口状态部署完成不要急着发给客户先按下面这个列表走一遍验证流程确认四个点首页内容正确、图片能正常加载、电话和微信按钮可点击、二维码图片长按能弹出识别菜单。更稳妥的做法是直接用 curl 检查服务器返回的 HTTP 状态码再在浏览器里用设备模拟器测一遍。常见验证命令# 检查主页是否能正常访问 curl -I https://card.example.com # 检查二维码图片是否可访问 curl -I https://card.example.com/assets/images/qrcode.png # 检查是否存在失效的静态资源引用重点看有没有404 curl -s https://card.example.com | grep -E src|href | grep -oE (src|href)[^]三条命令的作用第一条看响应头是否返回 200 和正确的 content-type第二条确认图片路径没有写错第三条会抓取 index.html 里所有的静态资源路径排查遗漏缺失文件。这套检查里面第三条最容易被忽略实际踩坑概率也最高尤其是目录层级调整后图片路径容易错位。4. 微信内浏览器的兼容适配基础接口和分享样式都要处理这张名片的核心应用场景是微信内分享和浏览所以把微信环境适配好是重头戏。微信内置浏览器和标准浏览器最大的差异在于它支持部分 JSSDK 能力但对 H5 页面的展示和分享有一套自己的规则。比如分享给朋友时如果页面没有配置缩略图和标题默认会抓取页面标题和第一张图片经常出现标题乱码、图片缺失的低级问题。使用微信 JSSDK 需要用公众号的 appId 向后端换取签名然后把签名注入到 JS-SDK 中。前端需要做的是把 share.js 里的参数换成自己的配置并确保后端接口返回正确的签名。典型的配置如下// share.js 中初始化微信分享配置 wx.ready(function() { // 分享给朋友 wx.updateAppMessageShareData({ title: 张明的电子名片, // 分享标题 desc: 制造业数字化转型顾问欢迎交流, // 分享摘要 link: https://card.example.com, // 分享链接 imgUrl: https://card.example.com/assets/images/share-logo.jpg, // 分享缩略图 success: function() { // 分享成功的回调可以埋点统计 console.log(share success); } }); // 分享到朋友圈 wx.updateTimelineShareData({ title: 张明的电子名片, // 朋友圈只显示标题 link: https://card.example.com, imgUrl: https://card.example.com/assets/images/share-logo.jpg }); });分享配置这段代码有几个值得注意的点title 控制在 20 个汉字以内超出部分在部分安卓机型上会被截断imgUrl 必须是一张绝对地址的 HTTPS 图片默认 300x300 以上比较合适否则某些版本微信会拉取失败link 链接和签名页面域名必须完全匹配带不带 www 都要保持统一否则会报 “invalid signature” 错误。这类签名计算的后端逻辑可以放到一个极简的服务端接口里由后端保存公众号 appSecret 并计算签名返回给前端。这个资源本身没有提供后端需要自己按微信官方文档实现或者使用云函数方案。签名计算涉及的三个核心参数是 nonceStr、timestamp 和 signature其中 signature 是通过 appId、jsapi_ticket、nonceStr、timestamp 和当前 URL 拼接后做 SHA1 得到的。4.1 识别微信内置浏览器的两个实用方法不只是适配分享有时候你需要知道用户到底在什么环境里打开名片以便做差异化处理。判断微信内置浏览器主要看 UserAgent 特征串// 判断是否在微信内置浏览器中 function isWeChatBrowser() { const ua navigator.userAgent.toLowerCase(); return ua.indexOf(micromessenger) ! -1; } // 判断是 iOS 还是 Android用于处理下载/复制等差异逻辑 function isIOS() { const ua navigator.userAgent; return !!ua.match(/\(i[^;];( U;)? CPU.Mac OS X/); }场景举例isWeChatBrowser 为 true 时可以在页面加载完成后提示用户“点击右上角分享给朋友”isIOS 返回 true 时复制微信号后可以再加一个提示弹层因为 iOS 微信内的剪贴板提示没有 Android 那么明显。这套判断逻辑不涉及后端纯前端处理实用性很高。深色模式是另一个需要关注的细节。config.js 里的 darkMode 字段如果打开对应的 CSS 主题变量会切换。但微信内置浏览器在 iOS 13 和部分 Android 机型上会跟随系统深色模式如果你的名片没有做暗色适配可能出现深色模式下文字对比度不足的问题。我常用的处理手段是给 CSS 变量加一层媒体查询兜底.card-container { background: #ffffff; color: #333333; } /* 开启系统深色模式时的降级方案 */ media (prefers-color-scheme: dark) { .card-container { background: #1a1a1a; color: #e6e6e6; } }这层适配是替源码补强的。原始资源并没有做 system-level 的暗色适配它的 darkMode 只是手动切换所以在实际使用中建议手工加上这段兜底深色模式下才不会翻车。5. 避坑手册微信名片 H5 最常见的 5 个翻车现场任何 H5 页面在微信里运行总会有一些预料之外的状况。这一章把我在测试和使用这套源码时遇到的高频问题整理了出来按“现象 → 原因 → 解决”的顺序记录。5.1 本地打开正常发给别人图片全裂现象自己在浏览器打开 index.html 一切正常换成手机在微信里打开头像和二维码加载不出来。 原因最常见的是使用了相对路径没带域名本地文件下相对路径有效但部署后如果 index.html 里还有类似src./images/avatar.jpg的路径且图片没上传到对应的原位置就会报 404。 解决部署前检查 index.html 和 main.js 里所有静态资源引用是否指向了正确路径。我在实际使用时会先按第 3 章给的 curl 命令把所有资源抓一遍确认全部返回 200 再发出去。另外一种隐蔽情况是图片传到了服务器但文件名带了中文或空格Nginx 默认配置下访问会被拒绝建议所有静态资源统一用英文字母或数字命名。5.2 复制微信号在安卓上正常在 iPhone 上没反应现象点击“复制微信号”按钮安卓手机弹出了复制成功的提示iPhone 上没有反应。 原因iOS 对剪贴板 API 的支持范围比安卓更严必须在用户手势的直接回调里触发 document.execCommand(‘copy’)如果中间有异步操作或 setTimeout 延迟iOS 就会判定为非法调用。 解决把复制逻辑从 bindEvents 里单独拎出来做成同步触发的形式。参考实现function copyWechatId() { const wechatId window.CARD_CONFIG.contact.wechatId; const textarea document.createElement(textarea); textarea.value wechatId; textarea.style.position fixed; textarea.style.opacity 0; document.body.appendChild(textarea); textarea.select(); textarea.setSelectionRange(0, 99999); let success false; try { success document.execCommand(copy); } catch (err) { console.error(复制失败:, err); } document.body.removeChild(textarea); return success; } // 绑定事件时直接同步调用 document.querySelector([data-actionwechat]).addEventListener(click, function(e) { e.preventDefault(); copyWechatId(); // 必须同步调用 });这段代码的逻辑说明动态创建隐形 textarea 是为了兼容 iOS 的复制要求execCommand(‘copy’) 必须在点击事件的调用栈里执行一旦跳出不生效。形式上绕开了异步 API 的兼容性限制实测在 iOS 14 及以上的微信版本中反馈良好。5.3 分享出去的卡片没有任何缩略图只有一条网址现象把名片链接转发到群里聊天窗口只显示光秃秃的链接没有标题和图片。 原因微信没有抓到页面上的分享信息可能是缺少 og 标签或分享图不符合要求。 解决在 index.html 的 head 区补上 Open Graph 标签微信会优先读取 og:title、og:description 和 og:image 作为分享卡片内容。示例meta propertyog:title content张明的电子名片 - 制造业数字化转型顾问 / meta propertyog:description content专注ERP实施与定制开发服务欢迎交流 / meta propertyog:image contenthttps://card.example.com/assets/images/share-logo.jpg / meta propertyog:url contenthttps://card.example.com /补充说明og:image 的尺寸尽量保持 300×300 以上比例接近 1:1 的效果最好。需要特别提醒的是改完这些标签后微信有缓存机制同样的链接短时间内不会重新抓取如果验证效果需要改变量参数比如在 URL 后面加 ?v2就能绕过缓存重新抓取。5.4 部署后页面在微信里打开提示“非网页”现象好友点进去看到的是“已停止访问该网页”的拦截提示或者页面能打开但功能受限。 原因域名没有备案或者服务器配置了不符合微信安全规范的跳转逻辑。 解决国内部署且使用国内服务器的情况下必须完成 ICP 备案后再绑定域名这是硬条件没有捷径。另外一个常见隐藏因素是页面内如果有跨域跳转到未知域名的代码也可能触发拦截。所以 config.js 里社交链接的 url 字段都要指向可访问的、有备案的域名不要放短链或者未备案站否则整个页面可能被判定为风险内容。5.5 改完 config.js 刷新页面没有生效现象修改了 config.js 里的名称和颜色刷新页面后仍显示旧数据。 原因浏览器缓存住了旧的 config.js 文件直接刷新没有真正拉取新文件。 解决在 index.html 里引入 config.js 时加上版本参数每次强制刷新缓存script src./config.js?v20250115/script script src./assets/js/main.js?v20250115/script也可以改成让 main.js 动态加载配置但对这个简单项目来说手工加版本号已经足够。这个细节也能看出来纯静态资源项目只要你记得改版本号线上更新文件平均能在几分钟内同步给大部分用户。6. 把名片推进到下一个段位URL 参数驱动、表单收集和进度条加载名片能正常展示和分享了只是起点。我实际用下来真正提升使用价值的是给名片加上一层“动态行为”。拿源码的开放性来说做以下几件事的成本并不高。6.1 通过 URL 参数切换名片内容一套源码支持多角色同一张名片可能既用于公司对外宣传也用于个人社交。不用维护多套文件只需要在 main.js 里增加一段参数读取逻辑// 从 URL 读取参数覆盖默认配置 function loadConfigFromUrl() { const params new URLSearchParams(window.location.search); const name params.get(name); const title params.get(title); if (name) { window.CARD_CONFIG.base.name name; } if (title) { window.CARD_CONFIG.base.title title; } // 如果传了 themeColor可以动态改变主题色 const themeColor params.get(theme); if (themeColor) { document.documentElement.style.setProperty(--primary-color, # themeColor); } } loadConfigFromUrl();参数说明URL 参数访问示例?name李莉title产品经理。这个能力最实用的场景是不同渠道分享不同的 title比如投放百度时 title 写“产品交流”投放抖音时 title 写“合作对接”再按 URL 参数做渠道统计。主题色参数支持十六进制色值传themeFF6600就会切到橙色主题。这就引出一个问题为什么配置不直接用 URL 参数承载所有信息因为 URL 太长会被微信截断而且微信分享出来不好看。所以推荐的做法是把不变的信息放 config.js把每次变化的信息放 URL 参数搭配使用。6.2 加一个前端表单收集访客需求打工人做名片不只是被动展示更多时候要主动获取销售线索。我给它加过一个简单的需求表单不依赖服务端用的是表单提交到第三方表单平台的方式。!-- 名片底部嵌入需求表单 -- div classcard-form h3留下您的需求/h3 form idleadForm input typetext namename placeholder您的称呼 required / input typetext namephone placeholder联系电话 required / textarea namemessage placeholder简单描述您的需求 rows2/textarea button typesubmit提交需求/button /form /div配合一个极简的提交拦截逻辑document.getElementById(leadForm).addEventListener(submit, function(e) { e.preventDefault(); const formData new FormData(this); const payload { name: formData.get(name), phone: formData.get(phone), message: formData.get(message), page: location.href, time: new Date().toISOString() }; // 使用 fetch 把数据提交到表单收集服务或 webhook fetch(https://your-form-endpoint.com/api/lead, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify(payload) }).then(res { if (res.ok) { alert(提交成功我会尽快与您联系); this.reset(); } else { alert(提交失败请稍后再试); } }).catch(() { alert(网络异常请检查网络后重试); }); });这段实现如果不想自己维护后端可以直接把接口地址换成金数据、麦客表单之类的第三方收集端或者用云函数做中转。注意字段名需要跟第三方平台的字段映射保持一致。6.3 给名片加一个不让人反感的加载进度条微信内打开 H5 页面的过程最大的体验瓶颈是白屏等待时间。在弱网环境下图片多的名片页面可能要白屏两三秒。这时候加一个轻量级的顶部进度条能从心理上降低等待感。只依赖原生代码的实现也加在这个文件里// 页面加载进度条不依赖第三方库 let progress 0; const bar document.createElement(div); bar.style.cssText position:fixed;top:0;left:0;height:3px;background:#1AAD19;z-index:9999;transition:width .3s ease;width:0%; document.body.appendChild(bar); // 模拟从0爬到90%等真实加载完成后跳到100% const fakeTimer setInterval(() { progress Math.min(progress Math.floor(Math.random() * 15), 90); bar.style.width progress %; }, 200); window.addEventListener(load, function() { progress 100; bar.style.width 100%; setTimeout(() bar.remove(), 500); clearInterval(fakeTimer); });这段三角形逻辑解释一下进度条先快速走到 90% 让用户觉得“有点进度”然后等待真实的 window.load 事件触发后直接拉满并移除避免进度条长时间卡在 99% 的尴尬。实际接入成本只有 20 行以内的代码效果却是明显可感知的属于性价比极高的小改动。每次我部署一张新名片到线上去都会强制自己走一遍完整验证流程先压图、再改配置、部署完用 curl 抓资源、模拟微信环境做功能测试最后才敢把链接发给别人。这套源码本身足够轻量但真正让它变得好用的往往是这些不在原始代码里的边缘处理。希望这份拆解能让你少走几步弯路拿到源码后直接改起来更顺手。本文还有配套的精品资源点击获取