[小程序] 首页 UI V2

[ztl8702]

概述

• 实现 榕典小程序 的首页UI视觉升级

预览图：

首页	首页（键盘升起状态）	侧滑菜单

UI 设计稿（Adobe XD）：https://zingzeu-team.feishu.cn/file/boxcnGvPUU8ViL7qpcfaYF82Znc

任务分解

• 创建 feature flag

  • 因为我们需要单独测试（内测、迭代）新版的首页，新版的首页需要和旧版首页代码共存一段时间。
  • 我们通过一个 feature flag 来控制不同环境下使用不同的首页。（生产环境用旧版，内测版用新版）

• 创建 首页V2 代码的脚手架(scaffolding)

  • 把 js/packages/miniapp/src/pages/index/index.tsx 复制一份到
    js/packages/miniapp/src/pages/index/index-v2.tsx，并将新文件中的 Index React Component 重命名为 IndexV2

• 修改 CSS 和 markup

  • 根据设计稿，调整 IndexV2

• 条件性地使用 首页V2

  • 在 js/packages/miniapp/src/pages/index/index.tsx 中，根据 feature flag 的值，条件性地返回 IndexV2

• 修改侧滑导航条的设计

  • 代码位置：https://github.com/MindongLab/yngdieng/blob/b11b5c844d7da5d8eb816d606c2785c2253ebf39/js/packages/miniapp/src/pages/header/header.tsx#L115-L132
  • 因为比较简单，可以不用 feature flag

一些注意事项

• 开发过程中，请尽量写 小 PR。基本上，上面的任务分解，每个小点差不多对应一个PR。
• 使用 github 的Pull Request 功能提出代码审核请求。（审核者添加 @ztl8702 @rovinglight ）
• 我们的主要沟通渠道是飞书，请在“软件开发部”群里提问。