shujiankang/ai_wht_wechat

Fork 0

Files

sjk 6802624e59 first commit

2025-12-19 22:36:48 +08:00

5.6 KiB

Raw Blame History

小程序分享功能说明

📋 功能概述

万花筒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
应用场景: 用户查看自己的发布记录时分享

🎯 分享方式

方式一: 右上角菜单分享

用户点击小程序右上角的 ... 按钮,可以看到:

转发 - 分享给微信好友/群
分享到朋友圈 - 发布到微信朋友圈

方式二: 页面内分享按钮(可选)

可以在页面中添加自定义分享按钮:

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

💡 技术实现

1. 分享给好友 (onShareAppMessage)

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

2. 分享到朋友圈 (onShareTimeline)

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

📝 配置要求

app.json 配置

确保启用朋友圈分享:

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

页面配置

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

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

🎨 优化建议

1. 自定义分享封面

为提升分享效果,建议添加分享封面图:

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

推荐尺寸:

分享给好友: 5:4 (例如: 500x400)
分享到朋友圈: 1:1 (例如: 500x500)

2. 动态分享内容

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

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

3. 分享数据统计

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

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

🔍 分享参数传递

场景还原

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

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

分享路径示例

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

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

⚠️ 注意事项

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

📊 分享效果监控

分享回调

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

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

🚀 未来优化方向

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

📱 测试方法

开发环境测试

打开微信开发者工具
点击右上角 ... 菜单
选择 "转发" 或 "分享到朋友圈"
查看分享卡片预览效果

真机测试

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

5.6 KiB Raw Blame History