Browse Source

📝 docs(story): add mini-program share configuration story

- create story for mini-program share feature requirements
- define acceptance criteria for home page share functionality
- outline development tasks and subtasks for implementation
- document technical specifications and code modification points
- add testing requirements and risk assessment for share feature
yourname 3 months ago
parent
commit
8a112b23c0
1 changed files with 184 additions and 0 deletions
  1. 184 0
      docs/stories/007.007.mini-program-share.story.md

+ 184 - 0
docs/stories/007.007.mini-program-share.story.md

@@ -0,0 +1,184 @@
+# Story 007.007: 小程序分享配置
+
+## Status
+Draft
+
+## Story
+**As a** 小程序用户,
+**I want** 在首页使用微信小程序分享功能,
+**so that** 可以方便地分享小程序给朋友,提升小程序的传播能力。
+
+## Acceptance Criteria
+1. 在首页添加微信小程序分享功能
+2. 配置分享标题为"开心去看,就用去看出行"
+3. 配置分享图片为 `process.env.TARO_APP_PUBLIC_IMAGE_BASE_URL + '/images/wp_home_share.jpg'`
+4. 实现分享回调处理
+5. 验证分享功能正常工作
+
+## Tasks / Subtasks
+- [ ] 配置首页页面分享功能 (AC: 1)
+  - [ ] 在 `mini/src/pages/home/index.config.ts` 中启用分享功能
+  - [ ] 在 `mini/src/pages/home/index.tsx` 中添加 `onShareAppMessage` 生命周期函数
+  - [ ] 配置分享标题和图片路径
+- [ ] 实现分享回调处理 (AC: 4)
+  - [ ] 添加 `onShareTimeline` 函数支持分享到朋友圈
+  - [ ] 实现分享成功和取消的回调处理
+  - [ ] 添加适当的错误处理
+- [ ] 验证分享功能 (AC: 5)
+  - [ ] 在微信开发者工具中测试分享功能
+  - [ ] 验证分享标题和图片正确显示
+  - [ ] 验证分享回调正常工作
+- [ ] 编写和更新相关测试 (AC: 5)
+  - [x] 创建首页测试文件 `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小程序开发规范](./taro-mini-program-standards.md#小程序API使用规范),分享功能需要:
+- **页面配置**: 在 `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`):
+```typescript
+export default {
+  navigationBarTitleText: '首页',
+  enablePullDownRefresh: true,
+  backgroundTextStyle: 'dark',
+  backgroundColor: '#f5f5f5',
+  enableShareAppMessage: true, // 新增:启用分享功能
+  enableShareTimeline: true,   // 新增:启用分享到朋友圈
+}
+```
+
+**首页组件** (`mini/src/pages/home/index.tsx`):
+```typescript
+// 在组件中添加分享生命周期函数
+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#最新测试模式和最佳实践]:
+```typescript
+// 测试环境设置
+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
+
+### 风险评估
+- **主要风险**: 分享图片路径可能在不同环境下不可访问
+- **缓解措施**: 使用环境变量配置图片路径,确保图片文件存在
+- **回滚方案**: 移除分享功能配置,恢复原有状态
+
+### 兼容性验证
+- [x] 对现有API无破坏性变更
+- [x] 无数据库变更
+- [x] UI变更遵循现有设计模式
+- [x] 性能影响可忽略
+- [x] 现有功能无回归
+
+## Change Log
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2025-10-31 | 1.0 | 初始故事创建 | Bob (Scrum Master) |
+
+## Dev Agent Record
+*此部分将由开发代理在实施过程中填写*
+
+## QA Results
+*此部分将由QA代理在质量保证过程中填写*