Herb-Hub

【项目】字节镜像计划2.0

5/1/2022 project

# 开营班会（5.6）

  • 线上看房平台（经纪人子系统/展示子系统）
  • 前端：React
  • 后端：KOA
  • 服务器：提供账号密码
  • 数据：提供 mock 测试数据，两个子系统各有一个后端（RPC 数据交互）或仅有一个后端

# 第一堂课（5.6）

  • HTML
  • CSS
  • JavaScript
  • React
  • Node.js（express/koa）
  • 构建部署（工程化）：项目协助、代码规范、构建、部署
  • 房产业务背景介绍

# 小组会议（5.8）

# 第二堂课（5.13）

  • 赵越：低代码编辑器部分 (opens new window)
    • 概述：可视化拖拽 + 少量代码（组件区/画布区/属性编辑区）
    • 主要用于：BPM（业务流程管理） / BI（数据分析）
    • 如何编写？
      • 页面数据格式的定义
      • 拖拽的实现 react-dnd（拖拽库） (opens new window)——Drag/Drop
        React Diff 算法：注意 key 的设置
      • 组件与面板的联动
      • 画布区渲染
      • 文件上传
      • 主要思考点： 组件嵌套/抽象出更高层级的编辑组件/上传体积较大的文件（分片上传，服务器再组装）/更好的全局数据管理方案（Redux）

# 第三堂课（5.20）

  • 李彪：RTC，实时通信（Real-Time Communication）
    • 真实场景：音视频通话/会议、美颜、使用道具特效、背景虚化、直播、游戏语音、云游戏
    • 媒体服务器架构：Mesh，MCU，SFU（中心节点只负责转发，不负责解码和编码）
    • WebRTC (opens new window)：允许浏览器间建立点对点的连接

# 小组会议（5.20）

  • 负责：展示子系统
  • 任务分工：登录和注册，活动页，房源卡片和房源详情页

# 任务进度

  • 5.23 完成详情页的初步页面布局（比较乱）
  • 5.24 调整页面布局（少用 float ， 多用 flex ，多用 semi design 自带的布局和组件）
  • 5.25 再次调整
  • 5.26/27 调整目录结构，并编写页面交互
  • 解决的问题：
    • 基本的布局方式：float (opens new window)、position (opens new window)、flex (opens new window)，以及各响应式布局组件
    • 如何设置大小在 12px 以下的字体？
      .font-size-10 { font-size: 22px; transform: scale(0.5); }
    • 如何使用 css 绘制三角形？
      .down-icon { width: 0; height: 0; border-top: 5px solid green; border-left: 5px solid transparent; border-right: 5px solid transparent; }
    • 如何实现用省略号自动代替超出的字？
      • 一行文本，内容超出
        .overflow-ignore-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      • 多行文本，内容超出
        .overflow-ignore-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box; /* 弹性伸缩盒子模型 */
  -webkit-box-orient: vertical; /* 设置盒子的子元素排列方式，从上到下垂直排列 */
  -webkit-line-clamp: 2; /* 显示行数 */
}
        1
        2
        3
        4
        5
        6
        7
    • 如何禁用移动端缩放？
      html 页面内的 meta 标签设置属性：content="user-scalable=no"
    • 如何设置 IOS 设备底端的安全区域？
      padding-bottom: calc(10px + env(safe-area-inset-bottom));
    • 设置背景？
      • background-image: url("")
      • background-size: cover/contain
      • background-position: center center
      • background-repeat: no-repeat
    • 弹性布局 (opens new window)的使用？
      • 使用 Semi Design 的 flex 布局
      • 自定义的 flex 布局
    • 如何消除浏览器差异？
      • reset-css
      • normalize.css

# 第四堂课（5.27）

  • 金峰：屏幕共享技术
    • 提供了后端数据格式（agent_house_20220527.sql）

# 任务进度

  • 5.28 根据后端提供的数据接口实现页面交互

  • 5.29 骨架屏和黑夜模式的实现

  • 5.30 Router 传参的实现（房源卡片 ---> 房屋详情）

  • 5.31-6.3：项目整合

  • 解决的问题：

    • 如何处理请求（ data, loading, error）？

    • 类型声明文件的使用：index.d.ts

      • 文件仅用来声明，类型属性注释（可以使用 markdown 语法）
      • 在使用相应类型的函数声明之前，可以注明参数类型

    • 如何实现骨架屏？

      • 使用 Semi Design 自带的 Skeleton 组件（Button/Image/Paragraph）

    • 如何实现 dark mode ？

      • Chrome DevTools：Settings -> More tools -> Rendering -> prefers-color-scheme -> light or dark
      • css 代码实现：1）@media(prefers-color-scheme: dark) 编写样式重新覆盖；2）使用变量存储样式，便于通过 val()复用。

    • React Router 实现页面传参？

      • routes.js 添加 { path: "/houseDetails/:id", element: <HouseDetails />, }

      • HouseCards 组件添加 { <Link to="/houseDetails/houseId"></Link> }

      • HouseDetails 组件：useRequest(ahooks) / useParams(react-router-dom)

        const params = useParams();

const { data: _data, loading } = useRequest(
  () => getHouseInfo(params.id),
  {
    // defaultParams: [params.id],
    refreshDeps: [params.id],
    loadingDelay: 100,
  }
);
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10

    • 如何解决网络性能对页面刷新加载的影响？

      • 开发者工具控制网速：Network --> Prestes --> No throttling / Fast 3G / Slow 3G
      • 地址栏请求参数改变，刷新页面：useRequest 第二个参数添加refreshDeps
      • 设置loadingDelay，可以延迟 loading 值变为 true 的时间，有效防止闪烁
      • 地址栏请求参数改变，在 loading 状态改变之后，自动回到顶部：
        useEffect(() => {
  document.body.scrollTop = document.documentElement.scrollTop = 0;
}, [loading]);
        1
        2
        3

    • 如何实现 CamelCase 到 SnakeCase 的转变？lodash/snakeCase

      Object.fromEntries(Object.entries(data).map(([k, v]) => [snakeCase(k), v]));
      1

    • 实现房屋详情页的向前/向上跳转？

    • 编写响应式布局应注意：

      • 哪些可以固定宽度，哪些需要自动调节
      • 样式命名最好根据内容而定，尽量减少原子命令

# 结营典礼（6.10）

Last Updated: 10/8/2022, 2:29:52 PM