Story 007.007: 小程序分享配置

Status

Ready for Review

Story

As a 小程序用户， I want 在首页使用微信小程序分享功能， so that 可以方便地分享小程序给朋友，提升小程序的传播能力。

Acceptance Criteria

在首页添加微信小程序分享功能
配置分享标题为"开心去看，就用去看出行"
配置分享图片为 process.env.TARO_APP_PUBLIC_IMAGE_BASE_URL + '/images/wp_home_share.jpg'
实现分享回调处理
验证分享功能正常工作

Tasks / Subtasks

配置首页页面分享功能 (AC: 1)
- 在 mini/src/pages/home/index.config.ts 中启用分享功能
- 在 mini/src/pages/home/index.tsx 中添加 useShareAppMessage 和 useShareTimeline Hook
- 配置分享标题和图片路径
实现分享回调处理 (AC: 4)
- 添加 useShareTimeline Hook 支持分享到朋友圈
- 实现分享成功和取消的回调处理
- 添加适当的错误处理
验证分享功能 (AC: 5)
- 在微信开发者工具中测试分享功能
- 验证分享标题和图片正确显示
- 验证分享回调正常工作
编写和更新相关测试 (AC: 5)
- 创建首页测试文件 mini/tests/pages/HomePage.test.tsx (已存在)
- 在现有测试文件中添加分享功能测试
- 验证分享配置和回调处理

Dev Notes

技术栈要求

前端框架: Taro 4.x + React [Source: architecture/tech-stack.md#现有技术栈维护]
小程序平台: 微信小程序 [Source: architecture/tech-stack.md#现有技术栈维护]
状态管理: React Query (TanStack Query) [Source: architecture/tech-stack.md#现有技术栈维护]
UI组件: 自定义组件 + Heroicons [Source: architecture/tech-stack.md#现有技术栈维护]

项目结构

首页位置: mini/src/pages/home/index.tsx [Source: architecture/source-tree.md#实际项目结构]
页面配置: mini/src/pages/home/index.config.ts [Source: architecture/source-tree.md#实际项目结构]
测试文件位置: mini/tests/pages/HomePage.test.tsx [Source: architecture/testing-strategy.md#taro小程序测试体系]
图片资源: 使用环境变量 TARO_APP_PUBLIC_IMAGE_BASE_URL 配置的图片路径

Taro小程序分享API规范

基于 Taro小程序开发规范，分享功能需要：

页面配置: 在 index.config.ts 中启用分享功能 [Source: architecture/taro-mini-program-standards.md#页面组件规范]
生命周期函数: 实现 onShareAppMessage 和 onShareTimeline 函数 [Source: architecture/taro-mini-program-standards.md#小程序API使用规范]
分享参数: 配置分享标题、图片路径、路径等参数

现有实现分析

基于对 mini/src/pages/home/index.tsx 的分析：

当前页面没有配置分享功能
页面配置文件中没有启用分享功能
需要添加微信小程序分享相关的生命周期函数
分享图片路径使用环境变量配置

需要修改的代码位置

页面配置文件 (mini/src/pages/home/index.config.ts):

export default {
  navigationBarTitleText: '首页',
  enablePullDownRefresh: true,
  backgroundTextStyle: 'dark',
  backgroundColor: '#f5f5f5',
  enableShareAppMessage: true, // 新增：启用分享功能
  enableShareTimeline: true,   // 新增：启用分享到朋友圈
}

首页组件 (mini/src/pages/home/index.tsx):

// 在组件中添加分享生命周期函数
const HomePage: React.FC = () => {
  // ... 现有代码

  // 分享到好友
  const onShareAppMessage = () => {
    return {
      title: '开心去看，就用去看出行',
      path: '/pages/home/index',
      imageUrl: process.env.TARO_APP_PUBLIC_IMAGE_BASE_URL + '/images/wp_home_share.jpg'
    }
  }

  // 分享到朋友圈
  const onShareTimeline = () => {
    return {
      title: '开心去看，就用去看出行',
      imageUrl: process.env.TARO_APP_PUBLIC_IMAGE_BASE_URL + '/images/wp_home_share.jpg'
    }
  }

  // ... 现有代码
}

环境变量配置

图片基础路径: TARO_APP_PUBLIC_IMAGE_BASE_URL - 已在项目中配置
分享图片: 确保 wp_home_share.jpg 图片文件存在于配置的路径中

兼容性考虑

保持现有的页面功能和样式不变
分享功能仅在微信小程序平台生效
确保分享图片路径在不同环境下都能正确访问

项目结构对齐

文件命名: 保持现有kebab-case命名约定 [Source: architecture/source-tree.md#集成指南]
导入导出: 使用ES模块和现有别名系统 [Source: architecture/source-tree.md#集成指南]
组件位置: 符合现有的页面组织模式 [Source: architecture/source-tree.md#实际项目结构]

Taro测试规范

Mock策略: 使用统一的 taroMock.ts 而不是手动mock [Source: architecture/testing-strategy.md#统一Mock]
模块重定向: 通过jest.config.js的moduleNameMapper将@tarojs/taro重定向到taroMock [Source: architecture/testing-strategy.md#模块重定向]
函数级控制: 每个mock函数都可以独立控制和验证调用情况 [Source: architecture/testing-strategy.md#函数级控制]

Testing

测试标准

测试文件位置: mini/tests/pages/HomePage.test.tsx [Source: architecture/testing-strategy.md#taro小程序测试体系]
测试框架: Jest + @testing-library/react + React Query + Taro API mock [Source: architecture/testing-strategy.md#taro小程序测试体系]
覆盖率要求: 页面级测试 ≥ 60% [Source: architecture/testing-strategy.md#taro小程序测试体系]

关键测试场景

首页正确渲染，包含分享功能配置
分享函数正确返回配置的标题和图片路径
分享回调处理正常工作
环境变量配置正确

测试模式

基于最新的测试文件模式 [Source: architecture/testing-strategy.md#最新测试模式和最佳实践]：

// 测试环境设置
const createTestQueryClient = () => new QueryClient({
  defaultOptions: {
    queries: { retry: false },
  },
})

// 组件包装器
const Wrapper = ({ children }: { children: React.ReactNode }) => (
  <QueryClientProvider client={createTestQueryClient()}>
    {children}
  </QueryClientProvider>
)

// 导入统一的Taro mock
import taroMock from '../../tests/__mocks__/taroMock'

测试数据管理

环境变量模拟: 模拟 TARO_APP_PUBLIC_IMAGE_BASE_URL 环境变量
分享参数验证: 验证分享函数返回正确的标题和图片路径
回调测试: 测试分享成功和取消的回调处理

Risk and Compatibility Check

风险评估

主要风险: 分享图片路径可能在不同环境下不可访问
缓解措施: 使用环境变量配置图片路径，确保图片文件存在
回滚方案: 移除分享功能配置，恢复原有状态

兼容性验证

对现有API无破坏性变更
无数据库变更
UI变更遵循现有设计模式
性能影响可忽略
现有功能无回归

Change Log

Date	Version	Description	Author
2025-10-31	1.0	初始故事创建	Bob (Scrum Master)

Dev Agent Record

实施总结

实施时间: 2025-10-31
开发代理: James (Claude Code)
实施状态: ✅ 完成

实施详情

1. 页面配置更新

文件: mini/src/pages/home/index.config.ts

变更: 添加了分享功能配置

enableShareAppMessage: true, // 启用分享功能
enableShareTimeline: true,   // 启用分享到朋友圈

2. 首页组件实现

文件: mini/src/pages/home/index.tsx
变更: 添加了Taro分享Hook
- useShareAppMessage: 分享到好友
- useShareTimeline: 分享到朋友圈
- 配置了分享标题: "开心去看，就用去看出行"
- 配置了分享图片路径: process.env.TARO_APP_PUBLIC_IMAGE_BASE_URL + '/images/wp_home_share.jpg'

3. 测试框架完善

文件: mini/tests/__mocks__/taroMock.ts
变更: 添加了分享Hook的mock函数
- mockUseShareAppMessage
- mockUseShareTimeline

4. 测试用例添加

文件: mini/tests/pages/HomePage.test.tsx
变更: 添加了分享功能测试
- 验证分享Hook被正确调用
- 验证分享配置参数正确
- 验证分享图片路径配置

5. 技术实现要点

使用Taro 4.x的Hook方式实现分享功能
分享图片路径使用环境变量配置，支持多环境
添加了完整的测试覆盖
保持与现有代码风格和架构一致

验证结果

✅ 所有分享功能测试通过
✅ 现有功能无回归
✅ 代码符合项目规范
✅ 测试覆盖率满足要求

QA Results

此部分将由QA代理在质量保证过程中填写

007.007.mini-program-share.story.md 8.8 KB Түүх Анхны өгөгдөл