# 小程序分享功能说明

## 📋 功能概述

万花筒AI助手小程序已支持**分享给好友**和**分享到朋友圈**功能,用户可以将精彩内容分享给微信好友或发布到朋友圈。

## ✨ 已实现页面

### 1. **首页** (`pages/home/home`)
- **分享标题**: 万花筒AI助手 - 智能生成种草文案
- **分享路径**: `/pages/home/home`
- **应用场景**: 用户浏览产品列表时可分享小程序首页

### 2. **文章详情页** (`pages/article-detail/article-detail`)
- **分享标题**: 动态显示文章标题
- **分享路径**: 带文章ID和产品ID参数
- **应用场景**: 用户查看文案详情时可分享特定文案

### 3. **文章列表页** (`pages/articles/articles`)
- **分享标题**: 动态显示当前文案标题
- **分享路径**: 带产品ID参数
- **分享封面**: 使用产品图片
- **应用场景**: 用户浏览文案列表时分享

### 4. **我的发布** (`pages/profile/published/published`)
- **分享标题**: 我的发布记录 - 万花筒AI助手
- **分享路径**: `/pages/home/home`
- **应用场景**: 用户查看自己的发布记录时分享

## 🎯 分享方式

### 方式一: 右上角菜单分享
用户点击小程序右上角的 `...` 按钮,可以看到:
- **转发** - 分享给微信好友/群
- **分享到朋友圈** - 发布到微信朋友圈

### 方式二: 页面内分享按钮(可选)
可以在页面中添加自定义分享按钮:

```html
<!-- WXML -->
<button open-type="share" class="share-btn">
  分享给好友
</button>
```

## 💡 技术实现

### 1. 分享给好友 (onShareAppMessage)

```typescript
onShareAppMessage() {
  return {
    title: '分享标题',           // 分享卡片标题
    path: '/pages/home/home',   // 分享路径
    imageUrl: ''                // 分享封面图(可选)
  };
}
```

### 2. 分享到朋友圈 (onShareTimeline)

```typescript
onShareTimeline() {
  return {
    title: '分享标题',           // 朋友圈显示标题
    imageUrl: ''                // 分享封面图(可选)
  };
}
```

## 📝 配置要求

### app.json 配置
确保启用朋友圈分享:

```json
{
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }
}
```

### 页面配置
在需要分享的页面.json中可配置:

```json
{
  "navigationBarTitleText": "页面标题",
  "enableShareAppMessage": true,    // 允许分享给好友(默认true)
  "enableShareTimeline": true       // 允许分享到朋友圈(默认true)
}
```

## 🎨 优化建议

### 1. 自定义分享封面
为提升分享效果,建议添加分享封面图:

```typescript
onShareAppMessage() {
  return {
    title: '精彩种草文案',
    path: '/pages/home/home',
    imageUrl: '/images/share-cover.jpg' // 建议尺寸: 5:4
  };
}
```

**推荐尺寸**:
- 分享给好友: 5:4 (例如: 500x400)
- 分享到朋友圈: 1:1 (例如: 500x500)

### 2. 动态分享内容
根据页面内容动态生成分享信息:

```typescript
onShareAppMessage() {
  const currentArticle = this.data.currentArticle;
  return {
    title: currentArticle.title,
    path: `/pages/article-detail/article-detail?id=${currentArticle.id}`,
    imageUrl: currentArticle.coverImage
  };
}
```

### 3. 分享数据统计
可以在分享时记录统计数据:

```typescript
onShareAppMessage() {
  // 记录分享事件
  wx.reportAnalytics('share_action', {
    page: 'home',
    content_type: 'product_list'
  });
  
  return {
    title: '万花筒AI助手',
    path: '/pages/home/home'
  };
}
```

## 🔍 分享参数传递

### 场景还原
用户通过分享卡片进入小程序时,可以获取分享参数:

```typescript
onLoad(options: any) {
  // 获取分享参数
  const productId = options.productId;
  const articleId = options.articleId;
  
  if (productId) {
    // 直接加载对应产品
    this.loadProduct(productId);
  }
}
```

### 分享路径示例

```typescript
// 带参数的分享路径
path: `/pages/articles/articles?productId=${this.data.productId}&from=share`

// 多个参数
path: `/pages/detail/detail?id=123&type=article&source=timeline`
```

## ⚠️ 注意事项

1. **路径限制**: 分享路径必须是已在 `app.json` 中注册的页面路径
2. **参数长度**: 分享路径总长度不能超过 128 字节
3. **图片要求**: 
   - 分享图片支持本地路径和网络图片
   - 网络图片需要先下载到本地
4. **朋友圈限制**: 分享到朋友圈时,`title` 不能超过 32 个字符
5. **用户取消**: 用户可能取消分享,无法强制分享

## 📊 分享效果监控

### 分享回调
小程序没有直接的分享成功回调,但可以通过以下方式间接监控:

1. **分享参数标记**: 在分享路径中添加 `from=share` 参数
2. **数据统计**: 统计带分享参数的访问量
3. **微信数据助手**: 在微信公众平台查看分享数据

## 🚀 未来优化方向

1. **个性化分享**: 根据用户行为推荐分享内容
2. **分享激励**: 添加分享奖励机制
3. **社交裂变**: 设计分享裂变活动
4. **A/B测试**: 测试不同分享文案的效果

## 📱 测试方法

### 开发环境测试
1. 打开微信开发者工具
2. 点击右上角 `...` 菜单
3. 选择 "转发" 或 "分享到朋友圈"
4. 查看分享卡片预览效果

### 真机测试
1. 使用体验版或开发版小程序
2. 在真实微信环境中测试分享
3. 验证分享卡片样式和跳转

## 📚 相关文档

- [微信官方文档 - 转发](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object)
- [微信官方文档 - 分享到朋友圈](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareTimeline)