# byte_mobile_like

**Repository Path**: Mannqo/byte_mobile_like

## Basic Information

- **Project Name**: byte_mobile_like
- **Description**: No description available
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-19
- **Last Updated**: 2022-01-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

这是一个仿小红书部分功能的移动端项目~~
### 涉及技术点
框架搭建：React+TypeScript
UI组件库：Ant Design Mobile
css样式：styled-component库
路由管理：react-router-config(renderRoutes)
<!-- 后面有时间用一下react-transition-group来写路由跳转的过渡动画 -->

### 统一代码风格
1. 命名
  + 每个**组件**有一个父文件夹+子文件，文件夹命名首字母大写字母，子文件命名为index 
  + 其他文件用小驼峰命名

### 目录结构
非page的组件写在component里面，同一类组件放在同一个文件夹中
├──src
|   ├──component
|   ├──page 页面
|   |   ├──Tabbar 
|   |   |   ├──HomePage 主页
|   |   |   ├──Message 消息页面
|   |   |   ├──PersonalCenter 个人主页
|   ├──routes存放路由
|   |   ├──index.tsx 如果你新增了页面，可以把在这里配置
比如说配置主页的路由，要注意，路径前缀为/tabbar/home,在子组件中进行配置，在该组件从props中取出，再用renderRoutes进行渲染；具体百度~~~

### 页面page
+ 主页 
  + 包括多个分类页面
+ 我的消息
+ 个人主页
  + 关注页面
  + 收藏页面(...可拓展)
+ 搜索页 -> 搜索到的页面
  + 包括多个分类页面
+ 文章详情

### github提交规范(忽略这个)
+ feat 新功能
+ update 更新
+ change 修改
+ fix 修补bug


### redux使用：
这里redux使用redux-persist做了持久化，可参照ComTest使用
以保存用户名为例
1. 声明action
      声明getUserName(username : any),具体写法参照action/index.ts
2. 传入reducer进行数据操作,(尽量不做数据操作)
      声明reducer,具体写法参照reducer/index.ts
3. 在获得用户名数据时，调用 useDispatch(getUserName('用户名数据')) 即可将数据存入store
4. 调用时使用,const username=useSelector((state:any) => state.username)获得数据