# 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
2024年12月25日 18:00
北京市朝阳区某某酒店
138-0000-0000
event@example.com
```
### 修改分享信息
在 `index.html` 的 `` 部分修改：
```html
```
### 自定义样式
编辑 `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