179 lines
5.3 KiB
Markdown
179 lines
5.3 KiB
Markdown
# 分享组件说明
|
||
|
||
## SpecialSharePage 组件
|
||
|
||
特殊场景分享页面组件，通过接口获取base64格式的背景图片。
|
||
|
||
### 主要特性
|
||
|
||
- 📱 **响应式**：适配各种屏幕尺寸
|
||
- 🎨 **可定制**：支持样式自定义
|
||
- 🔄 **重试机制**：支持接口调用失败时的重试
|
||
- 🌐 **接口获取**：自动通过接口获取背景图片
|
||
- 🖼️ **Base64支持**：接口返回base64格式的背景图片
|
||
|
||
### 使用方法
|
||
|
||
```vue
|
||
<template>
|
||
<SpecialSharePage
|
||
:qrCodeImage="base64QrCodeImage"
|
||
:userInfo="userInfo"
|
||
:isLoaded="true"
|
||
@share-generated="handleShareGenerated"
|
||
@background-image-error="handleError"
|
||
@background-image-retry="handleRetry"
|
||
/>
|
||
</template>
|
||
|
||
<script>
|
||
import SpecialSharePage from '@/components/share/SpecialSharePage.vue'
|
||
|
||
export default {
|
||
components: {
|
||
SpecialSharePage,
|
||
},
|
||
data() {
|
||
return {
|
||
base64QrCodeImage:
|
||
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQAAAADK...',
|
||
userInfo: {
|
||
memberCode: '12345678',
|
||
},
|
||
}
|
||
},
|
||
methods: {
|
||
handleShareGenerated(dataUrl) {
|
||
console.log('生成的分享图片:', dataUrl)
|
||
// 处理生成的图片
|
||
},
|
||
handleError(error) {
|
||
console.error('背景图片错误:', error)
|
||
},
|
||
handleRetry(retryCount) {
|
||
console.log('背景图片重试:', retryCount)
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
```
|
||
|
||
### Props
|
||
|
||
| 参数 | 类型 | 默认值 | 说明 |
|
||
| ----------------------- | ------- | ------ | ------------------------ |
|
||
| `qrCodeImage` | String | '' | 二维码图片（base64格式） |
|
||
| `userInfo` | Object | {} | 用户信息对象 |
|
||
| `isWechat` | Boolean | false | 是否为微信环境 |
|
||
| `isLoaded` | Boolean | false | 是否加载完成 |
|
||
| `skipImageVerification` | Boolean | false | 跳过图片验证（调试用） |
|
||
|
||
### Events
|
||
|
||
| 事件名 | 参数 | 说明 |
|
||
| ------------------------ | ---------- | ---------------- |
|
||
| `share-generated` | dataUrl | 分享图片生成成功 |
|
||
| `background-image-error` | error | 背景图片加载错误 |
|
||
| `background-image-retry` | retryCount | 背景图片重试 |
|
||
|
||
### 方法
|
||
|
||
| 方法名 | 说明 |
|
||
| ------------------------------- | ------------------------------------ |
|
||
| `generateShareImage()` | 生成分享图片 |
|
||
| `retryGetBackgroundImage()` | 手动重试获取背景图 |
|
||
| `getStatusInfo()` | 获取当前状态信息（调试用） |
|
||
| `handleShareGenerated(dataUrl)` | 处理图片生成成功后的逻辑（内部方法） |
|
||
|
||
### 接口配置
|
||
|
||
组件使用 `getSharedImg` 接口获取背景图片：
|
||
|
||
```javascript
|
||
// 在 config/login.js 中配置接口
|
||
export const getSharedImg = () => {
|
||
return http.get('/api/share/background')
|
||
}
|
||
```
|
||
|
||
接口应返回以下格式：
|
||
|
||
```javascript
|
||
{
|
||
code: 200,
|
||
data: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...',
|
||
message: 'success'
|
||
}
|
||
```
|
||
|
||
### 调试
|
||
|
||
```javascript
|
||
// 生成分享图片
|
||
this.$refs.specialSharePage.generateShareImage()
|
||
|
||
// 手动重试获取背景图
|
||
this.$refs.specialSharePage.retryGetBackgroundImage()
|
||
|
||
// 获取当前状态信息
|
||
const status = this.$refs.specialSharePage.getStatusInfo()
|
||
console.log('组件状态:', status)
|
||
/*
|
||
输出示例：
|
||
{
|
||
specialBackgroundImage: '123456 bytes',
|
||
qrCodeImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEU...',
|
||
backgroundImageLoaded: true,
|
||
isLoadingBackground: false,
|
||
imageLoadRetryCount: 0,
|
||
isReady: true
|
||
}
|
||
*/
|
||
```
|
||
|
||
### 工作流程
|
||
|
||
1. **组件挂载**：自动调用 `getSharedImg` 接口获取背景图
|
||
2. **显示加载**：显示"正在获取背景图片..."状态
|
||
3. **接口响应**：处理接口返回的base64背景图数据
|
||
4. **准备就绪**：背景图和二维码都准备好后可以生成分享图片
|
||
5. **生成图片**：使用html2canvas截取页面生成分享图片
|
||
6. **处理结果**：
|
||
- 关闭loading状态
|
||
- 显示成功提示（"图片生成成功，请长按保存"）
|
||
- 调用内部 `handleShareGenerated` 方法处理
|
||
- 通过 `share-generated` 事件通知父组件
|
||
|
||
### 图片生成流程
|
||
|
||
```
|
||
用户点击生成按钮
|
||
↓
|
||
检查前置条件（二维码、背景图）
|
||
↓
|
||
显示 "生成图片中..." loading
|
||
↓
|
||
使用 html2canvas 截取页面
|
||
↓
|
||
生成成功 → 关闭loading → 显示成功提示 → 发送事件
|
||
↓
|
||
生成失败 → 关闭loading → 显示错误提示
|
||
```
|
||
|
||
### 错误处理
|
||
|
||
- **接口调用失败**：自动重试最多3次
|
||
- **重试机制**：通过 `background-image-retry` 事件通知重试状态
|
||
- **最终失败**：通过 `background-image-error` 事件通知错误
|
||
|
||
### 注意事项
|
||
|
||
1. 确保 `getSharedImg` 接口返回完整的base64格式图片
|
||
2. 组件会在mounted生命周期自动调用接口
|
||
3. 支持手动重试机制，适用于网络不稳定的情况
|
||
4. 生成的图片为JPEG格式，质量为100%
|
||
5. 组件支持长按保存分享图片
|
||
6. 接口失败时会显示相应的错误状态
|
||
7. **图片生成成功后会自动显示提示信息**，无需在父组件中重复处理
|
||
8. **组件内部和外部都会收到图片生成事件**，可根据需要在父组件中添加额外逻辑
|