first commit
This commit is contained in:
250
docs/分享功能验证指南.md
Normal file
250
docs/分享功能验证指南.md
Normal file
@@ -0,0 +1,250 @@
|
||||
# 微信小程序分享功能验证指南
|
||||
|
||||
## 功能实现状态 ✅
|
||||
|
||||
项目已完整实现微信小程序的分享功能和推广配置:
|
||||
|
||||
### 1. 全局分享混入 (globalShareMixin.js)
|
||||
- ✅ **使用Vue全局混入确保所有页面都能分享**
|
||||
- ✅ 所有页面自动支持"分享给好友"功能
|
||||
- ✅ 所有页面自动支持"分享到朋友圈"功能
|
||||
- ✅ 自动添加推广码到分享链接
|
||||
- ✅ 根据不同页面生成不同的分享内容
|
||||
- ✅ 解决"未设置分享"的问题
|
||||
|
||||
### 2. 推广码处理机制
|
||||
- ✅ 用户分享时自动携带自己的邀请码(`inviteCode`)作为`shareCode`参数
|
||||
- ✅ 新用户通过分享链接进入时自动保存推广码到本地存储
|
||||
- ✅ 推广码可用于邀请奖励等功能
|
||||
|
||||
### 3. 分享菜单配置
|
||||
- ✅ 启用微信小程序右上角胶囊的分享功能
|
||||
- ✅ 支持两种分享方式:分享给好友、分享到朋友圈
|
||||
|
||||
## 验证步骤
|
||||
|
||||
### 第一步:验证分享菜单是否启用
|
||||
|
||||
1. 在微信开发者工具或真机上运行项目
|
||||
2. 点击右上角的"···"胶囊按钮
|
||||
3. **预期结果**:应该看到"转发"和"分享到朋友圈"选项
|
||||
|
||||
### 第二步:测试分享给好友功能
|
||||
|
||||
1. 登录小程序并确保用户有邀请码
|
||||
2. 进入任意页面(如灵感广场、造梦详情页)
|
||||
3. 点击右上角"···" → 选择"转发"
|
||||
4. **预期结果**:
|
||||
- 显示自定义的分享标题和图片
|
||||
- 打开控制台,应该看到类似的日志:
|
||||
```
|
||||
=== 微信分享给好友触发 ===
|
||||
最终分享路径: /pages/inspiration/index?shareCode=用户的邀请码
|
||||
```
|
||||
|
||||
### 第三步:测试分享到朋友圈功能
|
||||
|
||||
1. 进入任意页面
|
||||
2. 点击右上角"···" → 选择"分享到朋友圈"
|
||||
3. **预期结果**:
|
||||
- 显示自定义的分享标题和图片
|
||||
- 打开控制台,应该看到类似的日志:
|
||||
```
|
||||
=== 微信分享到朋友圈触发 ===
|
||||
最终分享query: shareCode=用户的邀请码
|
||||
```
|
||||
|
||||
### 第四步:验证推广码接收
|
||||
|
||||
1. 用A账号分享任意页面给B
|
||||
2. B通过分享卡片进入小程序
|
||||
3. 打开控制台查看日志
|
||||
4. **预期结果**:
|
||||
```
|
||||
=== handleShareCode ===
|
||||
提取的shareCode: A的邀请码
|
||||
shareCode已保存到localStorage
|
||||
```
|
||||
5. 检查本地存储:
|
||||
```javascript
|
||||
uni.getStorageSync('shareCode') // 应该返回A的邀请码
|
||||
```
|
||||
|
||||
## 分享配置说明
|
||||
|
||||
### 不同页面的分享内容
|
||||
|
||||
| 页面 | 分享标题 | 分享路径 | 备注 |
|
||||
|------|---------|---------|------|
|
||||
| 灵感广场 | AI创作神器 - 发现精彩作品 | /pages/inspiration/index | 默认首页 |
|
||||
| 造梦首页 | AI造梦 - 释放无限想象 | /pages/dream/index | - |
|
||||
| 造梦详情 | 看看我用AI生成的作品! | /pages/dream/detail?taskNo=xxx | 包含任务编号 |
|
||||
| 作品详情 | 作品提示词或描述 | /pages/work/detail?id=xxx | 使用作品图片 |
|
||||
| 我的页面 | AI创作作品集 | /pages/inspiration/index | - |
|
||||
| 资产页面 | 我的AI创作资产 | /pages/assets/index | - |
|
||||
| AI模型详情 | 模型名称 - 强大的AI创作工具 | /pages/ai/detail?id=xxx | 使用模型图标 |
|
||||
| 邀请页面 | 邀好友赢500积分 | /pages/inspiration/index | 重点推广 |
|
||||
|
||||
### 推广码生成规则
|
||||
|
||||
**分享给好友:**
|
||||
- 格式: `{原始路径}?shareCode={用户邀请码}`
|
||||
- 示例: `/pages/inspiration/index?shareCode=ABC123`
|
||||
|
||||
**分享到朋友圈:**
|
||||
- 格式: `{原始query}&shareCode={用户邀请码}`
|
||||
- 示例: `id=123&shareCode=ABC123`
|
||||
|
||||
## 常见问题排查
|
||||
|
||||
### 问题1:看不到分享菜单
|
||||
|
||||
**可能原因:**
|
||||
- 未在微信小程序真机或开发者工具中运行
|
||||
- `App.vue` 中的 `uni.showShareMenu` 未正常调用
|
||||
|
||||
**解决方案:**
|
||||
检查 `App.vue` 的 `onLaunch` 和 `onShow` 方法是否正常执行
|
||||
|
||||
### 问题2:分享时没有携带推广码
|
||||
|
||||
**可能原因:**
|
||||
- 用户未登录
|
||||
- 用户没有邀请码(`inviteCode`)
|
||||
|
||||
**解决方案:**
|
||||
1. 确保用户已登录: `userStore.isLogin === true`
|
||||
2. 确保用户信息中有邀请码: `userStore.userInfo.inviteCode`
|
||||
3. 检查控制台日志,查看 `generateSharePath` 的输出
|
||||
|
||||
### 问题3:接收到的推广码未保存
|
||||
|
||||
**可能原因:**
|
||||
- 页面未调用 `handleShareCode(options)`
|
||||
- 本地存储功能异常
|
||||
|
||||
**解决方案:**
|
||||
确保页面的 `onLoad` 生命周期中调用了:
|
||||
```javascript
|
||||
import { handleShareCode } from '@/utils/navigation'
|
||||
|
||||
onLoad((options) => {
|
||||
handleShareCode(options)
|
||||
})
|
||||
```
|
||||
|
||||
### 问题4:视频作品分享时图片显示不正确
|
||||
|
||||
**说明:**
|
||||
这是预期行为。根据代码逻辑:
|
||||
- 图片作品:使用作品图片作为分享图
|
||||
- 视频作品:使用默认图片(因为微信不支持视频封面)
|
||||
|
||||
## 技术架构说明
|
||||
|
||||
### 核心文件
|
||||
|
||||
1. **src/mixins/globalShareMixin.js** - 🌟 全局分享混入(新增)
|
||||
- **通过Vue的app.mixin()注册到所有页面**
|
||||
- `onShareAppMessage()` - 自动为所有页面提供分享给好友功能
|
||||
- `onShareTimeline()` - 自动为所有页面提供分享到朋友圈功能
|
||||
- `getShareConfigByRoute()` - 根据路由智能生成分享配置
|
||||
- **解决了微信小程序"未设置分享"的问题**
|
||||
|
||||
2. **src/main.js** - 应用入口
|
||||
- 注册全局分享混入: `app.mixin(globalShareMixin)`
|
||||
- 确保每个页面都自动具备分享功能
|
||||
|
||||
3. **src/mixins/shareMixin.js** - 页面级分享配置(可选)
|
||||
- `useShareMixin()` - 页面级自定义分享配置
|
||||
- `shareConfigs` - 预定义的分享配置生成器
|
||||
|
||||
4. **src/utils/navigation.js** - 推广码工具
|
||||
- `generateSharePath()` - 生成带推广码的路径
|
||||
- `generateShareQuery()` - 生成带推广码的query
|
||||
- `handleShareCode()` - 处理接收到的推广码
|
||||
|
||||
5. **App.vue** - 应用级配置
|
||||
- 在`onLaunch`和`onShow`中启用分享菜单
|
||||
- 提供额外的兜底逻辑
|
||||
|
||||
### 分享流程图
|
||||
|
||||
```
|
||||
用户A分享
|
||||
↓
|
||||
生成分享链接(携带A的邀请码)
|
||||
↓
|
||||
用户B点击分享卡片
|
||||
↓
|
||||
小程序打开,onLoad接收参数
|
||||
↓
|
||||
handleShareCode保存推广码
|
||||
↓
|
||||
推广码可用于邀请奖励统计
|
||||
```
|
||||
|
||||
## 扩展功能建议
|
||||
|
||||
### 1. 添加分享统计
|
||||
在 `App.vue` 的分享方法中添加统计:
|
||||
|
||||
```javascript
|
||||
onShareAppMessage() {
|
||||
// 记录分享事件
|
||||
uni.request({
|
||||
url: '/api/statistics/share',
|
||||
method: 'POST',
|
||||
data: {
|
||||
userId: userStore.userInfo.userId,
|
||||
page: route,
|
||||
type: 'appMessage'
|
||||
}
|
||||
})
|
||||
|
||||
// 返回分享配置
|
||||
return { ... }
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 分享奖励提示
|
||||
用户分享成功后给予提示:
|
||||
|
||||
```javascript
|
||||
onShareAppMessage((res) => {
|
||||
if (res.errMsg === 'shareAppMessage:ok') {
|
||||
uni.showToast({
|
||||
title: '分享成功,感谢推广!',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 3. 自定义分享按钮
|
||||
在页面中添加自定义分享按钮:
|
||||
|
||||
```vue
|
||||
<button open-type="share" class="custom-share-btn">
|
||||
<image src="/static/icons/share.png" />
|
||||
<text>分享给好友</text>
|
||||
</button>
|
||||
```
|
||||
|
||||
## 测试检查清单
|
||||
|
||||
- [ ] 所有页面都能打开分享菜单
|
||||
- [ ] 分享给好友时显示正确的标题、图片和路径
|
||||
- [ ] 分享到朋友圈时显示正确的内容
|
||||
- [ ] 登录用户分享时携带推广码
|
||||
- [ ] 通过分享链接进入时正确保存推广码
|
||||
- [ ] 造梦详情页分享包含正确的taskNo
|
||||
- [ ] 作品详情页分享包含正确的作品ID
|
||||
- [ ] 图片作品分享时使用作品图片
|
||||
- [ ] 视频作品分享时使用默认图片
|
||||
- [ ] 未登录用户分享时不携带推广码但功能正常
|
||||
|
||||
## 相关文档
|
||||
|
||||
- [微信小程序分享功能官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html)
|
||||
- [uni-app分享API文档](https://uniapp.dcloud.net.cn/api/plugins/share.html)
|
||||
Reference in New Issue
Block a user