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
|