1818uniapp/docs/分享功能验证指南.md

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

功能实现状态 ✅

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

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. 检查本地存储:

   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 生命周期中调用了:

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 的分享方法中添加统计:

onShareAppMessage() {
  // 记录分享事件
  uni.request({
    url: '/api/statistics/share',
    method: 'POST',
    data: {
      userId: userStore.userInfo.userId,
      page: route,
      type: 'appMessage'
    }
  })
  
  // 返回分享配置
  return { ... }
}

2. 分享奖励提示

用户分享成功后给予提示:

onShareAppMessage((res) => {
  if (res.errMsg === 'shareAppMessage:ok') {
    uni.showToast({
      title: '分享成功,感谢推广!',
      icon: 'success'
    })
  }
})

3. 自定义分享按钮

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

<button open-type="share" class="custom-share-btn">
  <image src="/static/icons/share.png" />
  <text>分享给好友</text>
</button>

测试检查清单

• 所有页面都能打开分享菜单
• 分享给好友时显示正确的标题、图片和路径
• 分享到朋友圈时显示正确的内容
• 登录用户分享时携带推广码
• 通过分享链接进入时正确保存推广码
• 造梦详情页分享包含正确的taskNo
• 作品详情页分享包含正确的作品ID
• 图片作品分享时使用作品图片
• 视频作品分享时使用默认图片
• 未登录用户分享时不携带推广码但功能正常

相关文档

• 微信小程序分享功能官方文档
• uni-app分享API文档