本套源码基于HTML5+微信JS-SDK开发，实现微信环境下的图片分享与群二维码引导功能，适用于私域流量裂变增长场景。核心功能模块与技术架构如下：

一、核心交互流程

1. 微信环境适配机制

环境检测：  
```javascript  
function isWechatBrowser() {  
    return /micromessenger/i.test(navigator.userAgent);  
}  
if(!isWechatBrowser()) alert("请使用微信打开");

分享控制：

• 自定义分享标题/描述（微信JS-SDK配置）

• 分享图标动态替换（根据访问参数加载）

2. 裂变流程设计

mermaid复制graph TD  
A[访问页面] --> B{微信环境检测}  B -->|是| C[加载预设图片]  B -->|否| D[提示微信打开]  C --> E[用户分享给好友]  E --> F[分享成功回调]  F --> G[显示群二维码]

二、技术实现方案

1. 动态资源管理

图片替换方案：  
```html  
<img src="./images/default.jpg" id="share-pic" alt="活动海报">  

<script>  
// 根据URL参数加载不同图片  
const picId = new URLSearchParams(location.search).get('pic');  
document.getElementById('share-pic').src = `./images/${picId||'default'}.jpg`;  
</script>

二维码生成：

• 静态路径配置（/qrcode/group1.png）

• 动态参数支持（群满自动切换备用群）

三、部署实施指南

1. 环境要求

服务器配置：  
- 无需后端支持（纯静态资源）  
- 备案域名（微信分享白名单）  
微信配置：  
- JS接口安全域名备案  
- 公众号开发者ID(AppID)配置

2. 快速部署步骤

1. 解压源码至Web目录  
2. 替换资源文件：  
   /images/default.jpg  # 默认分享图  
   /qrcode/group1.png   # 群二维码  
3. 配置微信JS-SDK：  
   修改/wx-config.js中的appId与timestamp  
4. 生成分享链接：  
   https://domain.com?pic=activity1

四、安全防护机制

1. 防刷策略

访问控制：  
- 单微信ID每日分享≤3次（localStorage计数）  
- IP访问频率限制（Nginx层限制）  
二维码保护：  
- 定期更换机制（每日凌晨自动更新）  
- 模糊化处理（Canvas动态叠加噪点）