| images | ||
| index.html | ||
| manifest.json | ||
| README.md | ||
H5 邀请函项目
这是一个优雅的H5邀请函项目，专为微信分享优化，支持小卡片形式的分享。
功能特点
- 📱 响应式设计，完美适配移动端
- 🎨 优雅的渐变背景和动画效果
- 💫 飘落动画和交互反馈
- 📤 微信分享优化（小卡片显示）
- ✨ 确认参加功能
- 🎉 庆祝动画效果
- 📋 一键复制分享链接
文件结构
expo-invite/
├── index.html # 主页面文件
├── style.css # 样式文件
├── script.js # 交互脚本
├── manifest.json # PWA配置文件
├── images/ # 图片资源文件夹
└── README.md # 说明文档
使用方法
- 直接使用：将所有文件上传到Web服务器即可使用
- 本地预览：使用本地服务器（如Live Server）预览效果
- 微信分享：在微信中打开链接，点击右上角分享
自定义配置
修改邀请函内容
编辑 index.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> 部分修改：
<meta property="og:title" content="您的邀请函标题">
<meta property="og:description" content="您的邀请函描述">
<meta property="og:image" content="./images/share-image.jpg">
自定义样式
编辑 style.css 文件来修改：
- 颜色主题（搜索
#667eea和#764ba2） - 字体大小和间距
- 动画效果
微信分享优化
项目已经配置了微信分享的meta标签，确保：
- 将
share-image.jpg放置在images文件夹中 - 图片尺寸建议为 300x300 像素
- 确保图片链接可公网访问
浏览器兼容性
- ✅ iOS Safari 10+
- ✅ Android Chrome 60+
- ✅ 微信内置浏览器
- ✅ QQ浏览器
- ✅ UC浏览器
注意事项
- 确保在HTTPS环境下使用以获得最佳体验
- 微信分享图片需要可公网访问
- 某些功能在本地文件系统中可能受限
技术栈
- HTML5
- CSS3 (Flexbox, Grid, Animations)
- Vanilla JavaScript
- PWA支持
许可证
MIT License