# H5 邀请函项目

这是一个优雅的H5邀请函项目，专为微信分享优化，支持小卡片形式的分享。

## 功能特点

- 📱 响应式设计，完美适配移动端
- 🎨 优雅的渐变背景和动画效果
- 💫 飘落动画和交互反馈
- 📤 微信分享优化（小卡片显示）
- ✨ 确认参加功能
- 🎉 庆祝动画效果
- 📋 一键复制分享链接

## 文件结构

```
expo-invite/
├── index.html          # 主页面文件
├── style.css           # 样式文件
├── script.js           # 交互脚本
├── manifest.json       # PWA配置文件
├── images/             # 图片资源文件夹
└── README.md           # 说明文档
```

## 使用方法

1. **直接使用**：将所有文件上传到Web服务器即可使用
2. **本地预览**：使用本地服务器（如Live Server）预览效果
3. **微信分享**：在微信中打开链接，点击右上角分享

## 自定义配置

### 修改邀请函内容

编辑 `index.html` 文件中的以下部分：

```html
<!-- 活动时间 -->
<div class="info-value">2024年12月25日 18:00</div>

<!-- 活动地点 -->
<div class="info-value">北京市朝阳区某某酒店</div>

<!-- 联系方式 -->
<span class="contact-value">138-0000-0000</span>
<span class="contact-value">event@example.com</span>
```

### 修改分享信息

在 `index.html` 的 `<head>` 部分修改：

```html
<meta property="og:title" content="您的邀请函标题">
<meta property="og:description" content="您的邀请函描述">
<meta property="og:image" content="./images/share-image.jpg">
```

### 自定义样式

编辑 `style.css` 文件来修改：
- 颜色主题（搜索 `#667eea` 和 `#764ba2`）
- 字体大小和间距
- 动画效果

## 微信分享优化

项目已经配置了微信分享的meta标签，确保：

1. 将 `share-image.jpg` 放置在 `images` 文件夹中
2. 图片尺寸建议为 300x300 像素
3. 确保图片链接可公网访问

## 浏览器兼容性

- ✅ iOS Safari 10+
- ✅ Android Chrome 60+
- ✅ 微信内置浏览器
- ✅ QQ浏览器
- ✅ UC浏览器

## 注意事项

1. 确保在HTTPS环境下使用以获得最佳体验
2. 微信分享图片需要可公网访问
3. 某些功能在本地文件系统中可能受限

## 技术栈

- HTML5
- CSS3 (Flexbox, Grid, Animations)
- Vanilla JavaScript
- PWA支持

## 许可证

MIT License
