# 微信小程序分享功能验证指南

## 功能实现状态 ✅

项目已完整实现微信小程序的分享功能和推广配置:

### 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)