100 lines
2.4 KiB
Markdown
100 lines
2.4 KiB
Markdown
# 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
|