源码系统概览
文章正文
在内容分发与私域运营场景中，把外部流量沉淀到微信公众号或小程序是常见做法。
本源码提供的是一个开箱即用的关注引导页，访客打开链接即可看到二维码并扫码关注，适合作为网盘资源、教程文章的领取入口。
由于其纯前端特性，部署成本几乎为零，普通用户也能在几分钟内完成素材替换与上线。
源码简介
项目根目录下的 index.html 是唯一的展示页面，使用语义化标签构建了关注引导结构。
yuqiee/js/config.js 负责注入公众号名称、简介与网站备案号三个变量，修改这里即可换成你自己的账号信息。
yuqiee/js/main.js 处理视口高度适配、URL 参数解析以及复制关键词交互，逻辑简洁且易于二次开发。
样式文件 main.css 内置微信绿主题色、圆角卡片与暗色模式自适应，整体视觉干净统一。
适用场景
适合个人博主、资源分享站将网盘链接或教程内容设置为关注公众号回复关键词获取。
适合小程序推广，通过网页二维码把站外流量引导至微信小程序。
也适合作为活动落地页、资料领取页，嵌入到文章或广告跳转中提升关注转化。
功能亮点
支持通过 URL 参数 ?replyText=关键词 动态生成关注并回复关键词获取资源的引导文案。
内置一键复制按钮，访客点击即可把关键词复制到剪贴板，降低操作门槛。
移动端优先设计，卡片居中自适应，在微信内置浏览器中显示效果良好。
支持系统级暗色模式，自动跟随设备外观切换浅色或深色背景。
技术架构与部署指南
| 维度 | 本套源码 | 同类通用方案 |
|---|---|---|
| 技术栈 | 前端语言：原生 HTML5、CSS3 与 ES6 JavaScript，不依赖任何框架与构建工具 运行环境：支持任意静 |
依具体方案选型，需自行搭建与维护 |
| 部署方式 | 将下载的文件夹整体上传到网站根目录或子目录，访问 index.html 即可打开页面。 | 多托管于第三方平台或订阅云服务 |
| 功能侧重 | 支持通过 URL 参数 ?replyText=关键词 动态生成关注并回复关键词获取资源的引导文案。 | 功能通用，定制深度有限 |
| 数据归属 | 数据自持，部署在自有服务器，不出站 | 数据通常留存于服务商侧 |
| 成本模式 | 获取后自主部署，无持续授权费用 | 通常按订阅或调用量计费 |
技术栈与运行环境
前端语言：原生 HTML5、CSS3 与 ES6 JavaScript，不依赖任何框架与构建工具
运行环境：支持任意静态文件服务器，也可直接双击在浏览器中打开本地文件
浏览器要求：需支持 navigator.clipboard 复制接口与 URLSearchParams 参数解析
外部资源：默认引用了示例站的 logo 图标，建议替换为自有图片并自托管
部署方式：上传整个文件夹至虚拟主机、对象存储或静态托管服务即可访问
安装与部署提示
将下载的文件夹整体上传到网站根目录或子目录，访问 index.html 即可打开页面。
打开 yuqiee/js/config.js，把 oa_name、oa_description、web_beian 改成自己的信息。
用你自己的公众号二维码替换 yuqiee/images/qrcode.png，并把 logo 资源改为自有图标。
如需自定义回复关键词，在访问链接后追加 ?replyText=你的关键词 即可生效。
截图与演示说明
下图展示了该源码的实际运行效果：
截图所示即为本源码唯一的 index.html 落地页，整体为一个居中的微信绿主题卡片。
页面顶部是关注公众号并回复引导区，带绿色复制按钮，对应源码中的 wechat-need-reply 模块。
中部为二维码展示卡片 wechat-card，下方是公众号名片 wechatOA-card，显示头像、名称与简介。
底部 footer 提供如何扫码与同款主题入口，整体模块清晰，截图即可直观理解用途。
常见问题
问：必须部署到服务器才能用吗？答：不是，本地双击 index.html 也能预览，只是复制功能在 HTTPS 环境下更可靠。
问：二维码可以换成我自己的吗？答：可以，直接替换 yuqiee/images/qrcode.png 即可，无需改动代码。
问：手机上复制关键词失败怎么办？答：请确认页面运行在 HTTPS 或微信内置浏览器中，旧浏览器可能不支持剪贴板接口。
安全风险提示
本源码为纯静态前端页面，经代码扫描未发现 eval、exec、base64 解码等危险函数，无后端执行风险。
使用时应注意把示例备案号桂ICP备2024024974号替换为你自己的备案信息，避免合规问题。
请勿在页面中嵌入诱导分享或违规内容，确保引流行为符合微信平台运营规范。
下载说明
本页面源码已打包为完整文件夹，包含 HTML、CSS、JS 与图片资源，下载后解压即可使用。
建议先本地预览，再替换公众号信息与二维码，最后上传到你的静态空间对外提供服务。
源码免费下载，可用于个人学习与私域引流展示，商业使用前请确认相关素材版权。