|
|
# 创建二维码界面跳转到自定义样式界面
|
|
|
|
|
|
## 概述
|
|
|
|
|
|
本文档描述了如何从创建二维码界面跳转到自定义样式界面的实现。用户现在可以在创建二维码时选择自定义样式，而不是直接生成标准二维码。
|
|
|
|
|
|
## 功能流程
|
|
|
|
|
|
### 1. 用户操作流程
|
|
|
```
|
|
|
创建二维码界面 → 填写内容 → 点击"创建"按钮 → 跳转到自定义样式界面 → 选择样式 → 保存二维码
|
|
|
```
|
|
|
|
|
|
### 2. 技术实现
|
|
|
|
|
|
#### **CreateQRCodeView.swift 修改**
|
|
|
|
|
|
**添加状态变量**：
|
|
|
```swift
|
|
|
@State private var navigateToStyleView = false
|
|
|
```
|
|
|
|
|
|
**修改创建按钮行为**：
|
|
|
```swift
|
|
|
Button("创建") {
|
|
|
if canCreateQRCode() {
|
|
|
navigateToStyleView = true
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**添加NavigationLink导航**：
|
|
|
```swift
|
|
|
.background(
|
|
|
NavigationLink(
|
|
|
destination: QRCodeStyleView(qrCodeContent: generateQRCodeContent()),
|
|
|
isActive: $navigateToStyleView
|
|
|
) {
|
|
|
EmptyView()
|
|
|
}
|
|
|
)
|
|
|
```
|
|
|
|
|
|
**新增二维码内容生成方法**：
|
|
|
```swift
|
|
|
private func generateQRCodeContent() -> String {
|
|
|
switch selectedQRCodeType {
|
|
|
case .mail:
|
|
|
// 生成邮件格式内容
|
|
|
case .wifi:
|
|
|
// 生成WiFi格式内容
|
|
|
case .vcard:
|
|
|
// 生成vCard格式内容
|
|
|
case .mecard:
|
|
|
// 生成MeCard格式内容
|
|
|
// ... 其他类型
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
#### **QRCodeStyleView.swift 修改**
|
|
|
|
|
|
**添加CoreData支持**：
|
|
|
```swift
|
|
|
import CoreData
|
|
|
@StateObject private var coreDataManager = CoreDataManager.shared
|
|
|
```
|
|
|
|
|
|
**移除NavigationView包装**：
|
|
|
```swift
|
|
|
// 移除了NavigationView包装，因为现在通过NavigationLink导航
|
|
|
var body: some View {
|
|
|
VStack(spacing: 0) {
|
|
|
// 内容...
|
|
|
}
|
|
|
.navigationTitle("自定义样式")
|
|
|
.navigationBarTitleDisplayMode(.inline)
|
|
|
// ...
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**修改保存方法**：
|
|
|
```swift
|
|
|
private func saveQRCode() {
|
|
|
guard let qrCodeImage = qrCodeImage else { return }
|
|
|
|
|
|
// 保存到相册
|
|
|
UIImageWriteToSavedPhotosAlbum(qrCodeImage, nil, nil, nil)
|
|
|
|
|
|
// 保存到历史记录
|
|
|
saveToHistory()
|
|
|
|
|
|
dismiss()
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**新增历史记录保存方法**：
|
|
|
```swift
|
|
|
private func saveToHistory() {
|
|
|
let context = coreDataManager.container.viewContext
|
|
|
let historyItem = HistoryItem(context: context)
|
|
|
historyItem.id = UUID()
|
|
|
historyItem.dataType = DataType.qrcode.rawValue
|
|
|
historyItem.dataSource = DataSource.created.rawValue
|
|
|
historyItem.createdAt = Date()
|
|
|
historyItem.isFavorite = false
|
|
|
historyItem.qrCodeType = "custom"
|
|
|
historyItem.content = qrCodeContent
|
|
|
|
|
|
do {
|
|
|
try context.save()
|
|
|
} catch {
|
|
|
print("保存到历史记录失败：\(error.localizedDescription)")
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
## 支持的二维码类型
|
|
|
|
|
|
### 1. 邮件 (mailto:)
|
|
|
- 支持收件人、主题、正文、抄送、密送
|
|
|
- 格式：`mailto:email?subject=xxx&body=xxx&cc=xxx&bcc=xxx`
|
|
|
|
|
|
### 2. WiFi
|
|
|
- 支持SSID、密码、加密类型
|
|
|
- 格式：`WIFI:S:SSID;T:ENCRYPTION;P:PASSWORD;;`
|
|
|
|
|
|
### 3. vCard (3.0版本)
|
|
|
- 支持姓名、电话、邮箱、公司、职位、地址、网站
|
|
|
- 格式：标准vCard 3.0格式
|
|
|
|
|
|
### 4. MeCard
|
|
|
- 支持姓名、昵称、电话、邮箱、公司、职位、地址、网站、备注
|
|
|
- 格式：`MECARD:N:LastName,FirstName;NICKNAME:xxx;TEL:xxx;...;`
|
|
|
|
|
|
### 5. 位置
|
|
|
- 支持经纬度
|
|
|
- 格式：`geo:latitude,longitude`
|
|
|
|
|
|
### 6. 日历事件
|
|
|
- 支持事件标题、描述、位置、开始时间、结束时间
|
|
|
- 格式：标准iCalendar格式
|
|
|
|
|
|
### 7. 社交媒体
|
|
|
- **Instagram**: `instagram://user?username=xxx`
|
|
|
- **Facebook**: `fb://profile/xxx`
|
|
|
- **Spotify**: `spotify:search:artist;song`
|
|
|
- **X (Twitter)**: `twitter://user?screen_name=xxx`
|
|
|
- **WhatsApp**: `whatsapp://send?phone=xxx`
|
|
|
- **Viber**: `viber://add?number=xxx`
|
|
|
- **TikTok**: `https://www.tiktok.com/@xxx`
|
|
|
- **Snapchat**: `https://snapchat.com/add/xxx`
|
|
|
|
|
|
### 8. 电话和短信
|
|
|
- **电话**: `tel:xxx`
|
|
|
- **短信**: `SMSTO:xxx`
|
|
|
|
|
|
### 9. URL
|
|
|
- 直接使用输入的URL
|
|
|
|
|
|
## 自定义样式功能
|
|
|
|
|
|
### 1. 颜色选择
|
|
|
- **前景色**: 20种颜色（8种纯色 + 12种渐变色）
|
|
|
- **背景色**: 10种浅色系
|
|
|
|
|
|
### 2. 点类型选择
|
|
|
- 40多种不同的点类型
|
|
|
- 包括基础形状、特殊形状、抽象形状、动态形状
|
|
|
|
|
|
### 3. 眼睛类型选择
|
|
|
- 40多种不同的眼睛类型
|
|
|
- 包括基础形状、特殊形状、动态形状
|
|
|
|
|
|
### 4. Logo选择
|
|
|
- 15种不同的Logo
|
|
|
- 包括社交媒体、通讯工具、其他服务
|
|
|
|
|
|
## 用户体验改进
|
|
|
|
|
|
### 1. 流程优化
|
|
|
- 用户填写内容后，点击"创建"按钮
|
|
|
- 通过NavigationLink导航到自定义样式界面
|
|
|
- 可以预览和调整二维码样式
|
|
|
- 最终保存到相册和历史记录
|
|
|
|
|
|
### 2. 数据持久化
|
|
|
- 自定义样式生成的二维码会保存到历史记录
|
|
|
- 类型标记为"custom"
|
|
|
- 可以在历史记录中查看和管理
|
|
|
|
|
|
### 3. 错误处理
|
|
|
- 输入验证确保内容有效
|
|
|
- 保存失败时的错误提示
|
|
|
- 网络和权限问题的处理
|
|
|
|
|
|
## 技术要点
|
|
|
|
|
|
### 1. 状态管理
|
|
|
- 使用`@State`管理界面状态
|
|
|
- 使用`@StateObject`管理CoreData
|
|
|
- 使用`@Environment`获取dismiss环境
|
|
|
|
|
|
### 2. 数据传递
|
|
|
- 通过参数传递二维码内容
|
|
|
- 使用NavigationLink导航到自定义样式界面
|
|
|
- 异步处理二维码生成
|
|
|
|
|
|
### 3. 内存管理
|
|
|
- 及时释放图片资源
|
|
|
- 避免内存泄漏
|
|
|
- 优化大图片的处理
|
|
|
|
|
|
## 未来扩展
|
|
|
|
|
|
### 1. 样式模板
|
|
|
- 预设样式模板
|
|
|
- 用户自定义模板保存
|
|
|
- 模板分享功能
|
|
|
|
|
|
### 2. 批量生成
|
|
|
- 支持批量生成不同样式的二维码
|
|
|
- 批量导出功能
|
|
|
|
|
|
### 3. 高级样式
|
|
|
- 更多颜色选项
|
|
|
- 自定义Logo上传
|
|
|
- 动画效果
|
|
|
|
|
|
## 总结
|
|
|
|
|
|
通过这次修改，我们实现了从创建二维码界面到自定义样式界面的完整流程。用户现在可以：
|
|
|
|
|
|
1. 在创建界面填写二维码内容
|
|
|
2. 点击创建按钮通过NavigationLink导航到样式界面
|
|
|
3. 选择喜欢的颜色、点类型、眼睛类型和Logo
|
|
|
4. 预览生成的二维码
|
|
|
5. 保存到相册和历史记录
|
|
|
|
|
|
这个实现提供了更好的用户体验，让用户能够创建个性化的二维码，同时保持了原有的功能完整性。
|
