React – 移动端企业级数据交互项目实战

课程介绍
本项目从拿到设计图开始，从页面适配、到交互效果、再到数据渲染，一步步带着大家搭建自己的移动端 React 移动端应用。 项目中，不只包含 React 单页应用+移动端布局及常用交互实现+真实的前后端数据交互等知识讲解，还包含很多常见问题解决方案，如：better-scroll 网速差的情况下异步请求图片导致不能拖到底部问题、ios 下微信内置浏览器跨域请求不能携带cookie的问题处理、使用了 better-scroll 之后链接失效的问题处理、移动端输入框被键盘遮挡的问题…

学习目标
学完本视频后，可以掌握 基于react-router 的 React 单页应用的项目构建，viewport+vw+rem 的移动端页面适配，iconfont 图标处理，React 功能组件编写，better-scroll 基本使用，上滑加载功能的实现，用户登录及未登陆状态下不同的业务逻辑处理…通过本次课程的学习，可以带着大家可以快速上手 React 的 移动端数据应用开发，帮助大家打造自己的 React 移动端项目

适用人群（学前要求）：
1、掌握移动端布局及css3相关知识,熟悉移动端原生事件
2、掌握 React 基础知识及npm使用
3、熟悉 ES6 最新语法
4、熟悉 Ajax 异步通信

第0集内容讲解：课程介绍

1、介绍项目相关功能及交互

2、学前基础介绍

3、课程说明

第1集内容讲解：react的环境配置及项目视图划分

1、react 环境搭建

安装：create – react – app（脚手架）

2、使用 React – router

安装 react – router – dom（路由）

3、页面视图划分

index  / work / message / login / course / lecturer

4、引入视图文件

第2集内容讲解：页面适配方案及默认样式初始

1、页面的适配方案

默认样式清除

2、viewport 视口

参数：

1）width

2）initial – scale

3）maximum – scale

4）user – scalable

3、相对单位适配

vw：100vw = 屏幕宽度

vh： 100vh = 屏幕高度

根节点字体大小：1rem = 1html的字体大小

4、默认样式重置

第3集内容讲解：header组件样式

1、公共组件实现 – 头部

2、公共组件实现 – 左侧菜单按钮

3、公共组件实现 – 右侧 login 按钮

4、公共组件实现 – logo 图片

5、公共组件实现 – 返回按钮

第4集内容讲解：添加iconfont

1、图标（fonticon）

图标网站介绍：http://www.iconfont.cn/

2、图标下载

菜单 / 登录 / 推荐 / 返回 / 首页 / 课程 / 讲师 /

用户名  / 密码 / 验证码 / 砖石 / 飞机 / 人物 / 推荐 / 留言

团队 /消息 / 行政管理 / 电话

3、引入图标字体文件

第5集内容讲解：使用iconfont完善header组件

1、函数组件 – header组件

1、登录图标 – 引入类：iconfont

2、菜单图标 – 引入类：iconfont

第6集内容讲解：利用弹性盒模型的页面架构和 footer 组件

1、类组件 – footer 组件

2、footer 布局实现

3、实现 footer 保持在屏幕最底部

1）弹性盒模型（怪异盒模型）：display：flex

2）flex – direction：column

第7集内容讲解：主菜单布局

1、Menu 布局

link to 跳转

首页

课程安排

讲师团队

2、实现左侧主菜单列表布局样式

小图标（首页 / 课程 / 讲师）

横线（border）

第8集内容讲解：幻灯片布局

1、幻灯片切换布局

Tab

Nav

2、require 引入

3、Tab 样式设置

4、Nav 样式设置

第9集内容讲解：首页布局

1、首页结构

引入组件

2、背景图引入

3、按钮样式设置

渐变 backgroud：linear-gradient( )

圆角 border-radius

阴影 box-shadow

4、立即报名 结构

引入 函数式组件 – vip

5、设置不同屏幕尺寸（xs – sm – md – lg）的样式

第10集内容讲解：利用弹性盒模型的上下居中设置

1、妙味特色布局

函数式组件 – Miaov

2、左侧字体图标

钻石 \ 头像 \ 作品展示

背景、宽高、圆角：border:radius 、图标颜色

最小高度：min-height

3、样式设置

字体大小、行高、颜色、边距、text-align：center

垂直居中：display：flex

第11集内容讲解：利用网格布局的作品列表

1、学员作品结构（网格布局 ）

类式组件 – worklist

display:grid（定义网格布局）

grid-template-columns（定义网格中的列）

网格大小（fr）

2、样式设置

背景色 \ 边距 \ 字体大小 \ 行高 \ 字体颜色

背景 \ 渐变 \ 最大宽度

3、loadMore（正在加载更多内容）

loding 图

第12集内容讲解：课程页面视图完善

1、课程页面结构

图片引入

表单

2、样式设置

背景延伸

默认样式清除（table \ td \ th）

第13集内容讲解：可以通用不同结构的功能组件制作

1、讲师团队 结构

标题

讲师头像

讲师名称

切换tab

2、样式设置

3、通用组件实现

功能相似、结构不一样

不同结构的功能组件制作

第14集内容讲解：完善讲师页面幻灯片结构

1、讲师页面幻灯片结构

讲师头像 / 讲师名称 列表实现

id / name / img

2、样式设置

nav 位置

3、结构当成参数传进来

第15集内容讲解：为页面链接添加触碰效果

1、加入我们（join-us）

函数式组件 JoinUs

2、加入我们结构

a 链接跳转

图标（课程顾问图标  \ 问答图标 \ 客服图标 \ 行政前台图标 ）

3、样式设置

默认样式清除

字体颜色：半透明

背景 \ 边距 \ 背景位置设置

字体大小 \ 行高

4、active 按下的样式设置

设置 a 标签默认样式

5、引入组件

job.js

第16集内容讲解：使用dangerouslySetInnerHTML添加作品详情

1、作品详情结构

缩略轮播图

标题

内容

2、dangerouslySetInnerHTML

添加作品详情的内容

3、内容详情

背景色设置

第17集内容讲解：完善作品详情页面

1、点赞

状态：未点赞 / isGood （已经点赞）

点赞动画特效：transition：-1s cubic-bezier( )

2、留言评论

类组件 – 留言列表（MessageList）

留言列表状态

没有留言状态

3、最底部加载

4、回复本贴按钮

图标

文字

第18集内容讲解：留言页面

1、留言页面 – message

头部 – Header

返回 – back

输入文本框 – textarea

默认样式清除

宽高 / 边框 / 字体 / 行高 / 字体大小

box – sizing：border – box

提交按钮

 

第19集内容讲解：登陆界面的3D卡片布局

1、登录界面 – Login

头部 – Header

返回 – back

背景图 – loginPage

登录 / 注册标题 – loginTitle

2、登录（login – form）\ 注册（register – form）

prespective（景深）

transfrom-style:preserve-3d（父级进行3d变换时，保留子元素的3d变换）

隐藏背面（backface – visibility:hidden）

第20集内容讲解：完善登陆界面布局

1、立即登录页面（LoginForm）

图标

描述文字

用户名：

密码：

验证码：线上地址

立即登录按钮：

没有账号按钮

2、立即注册页面（RegisterForm）

调整页面样式

第21集内容讲解：利用children属性，制作可以通过各种结构的menu交互组件

1、分析菜单的展开收缩功能

类组件 – MenuPage

2、引入

header

menu

3、传递结构

第22集内容讲解：添加菜单动画

1、点击菜单按钮 – 执行chageOpen

2、onTouchEnd（按下抬起）

3、点击展开 – 点击收缩过渡动画

transition

transfrom

4、onTouchStart

处理横向滚动条

全局阻止默认事件

第23集内容讲解：跳出React阻止默认事件的深坑完善菜单动画

1、介绍不允许阻止默认事件原因

2、讲解阻止默认事件

3、阻止默认事件处理，禁止页面滑动

componentDidMout

view.addEventListener

4、阻止事件冒泡

第24集内容讲解：阻止了默认事件之后，超链接跳转的处理

1、点击菜单，a标签跳转

menuA / headerA

首页/课程安排/讲师团队

2、介绍通过路由自带方法

push

3、讲解原生 js 的方法

添加事件：touchend

修改 widdow.location.href

通过判断 排除 href 为空的 a 标签

4、添加 touchmove 事件

判断是否发生滑动

按下 a 标签跳转

滑动 a 标签不跳转

5、bug介绍：在部分安卓手机下，手指触碰屏幕时，如果触碰面积不大，

会误触 touthmove 事件

讲解解决 bug 方法

第25集内容讲解：幻灯片动画制作_1

1、幻灯片动画制作 – tab组件

React 生命周期 – Mounting 挂载阶段

componentDidMount

2、给 tab 加上点击事件

tab.addEventListener

touchstart / touchmove / touchend

3、手指按下的位置（startPoint）：

x：e.changedTouchhes[0].pageX

y：e.changedTouchhes[0].pageY

4、手指滑动的位置（nowPoint）

x：nowPoint.x – startPoint.x

y：nowPoint.y – startPoint.y

5、当用户滑动距离超过100px 时，用户需要进行切换

第26集内容讲解：幻灯片添加无缝处理

1、添加动画

picList.style.transition

2、添加无缝

picList.innerHTML += picList.innerHTML

picList.style.width=picList.length + “00vw”

3、第0张和最后一张，划出边界的风险的处理办法

第27集内容讲解：判断滑动方向修复滑动时幻灯片的抖动

1、处理左右滑动带动上下滑动问题

当前是否按照我想要的方向进行滑动

判断用户的滑动方向

2、每次第一次滑动，当判断出方向后，不再重复判断方向

isFirst && Math.abs(dis.x – dis.y)>2

第28集内容讲解：完善幻灯片的制作添加自动轮播

1、幻灯片导航同步

setNav

2、幻灯片自动播放

autoplay

3、下一张

toNext

4、定时器

timer

无缝自动播放

延迟时间：setTimeout

清除定时器：clearInterval

第29集内容讲解：登陆和注册界面的受控组件制作

1、分析登录注册的功能

界面切换

受控组件

验证码切换

2、登录接口

/ user/login

POST:

verify:验证码

username:用户名

passwore:密码

添加受控组件

username / passwore / verify

3、登录接口

/ user/login

POST:

verify:验证码

username:用户名

passwore:密码

repassword:确认密码

添加受控组件

username / passwore / verify / repassword

第30集内容讲解：完善登陆注册界面的3D翻页和验证码交互

1、3D翻页

changeDeg

2、传递方法

loginFrom

registerForm

3、点击立即登录 / 立即注册切换动画

4、验证码（verify）交互

verifyimg:

点击验证码，切换

验证码输入框获取焦点时，生成验证码（onFocus）

第31集内容讲解：实现注册功能

1、域名地址：https:www.koocv.com/

注册地址：/ user/register

异步通信：mpn i axios (请求方式）

提交地址：https:www.koocv.com/user/register

提交方式：POST

2、提交信息：

verify；

username；

passwore；

repassword

3、axios

qs.stringify 把对象转换成 URL

4、跨域请求

withCredertials 携带cookie

5、返回值

code:0  msg:注册成功

code:1  msg:验证码错误

code:2  msg:密码和重复密码不一致

code:3（注册失败）  msg:提示不同的注册失败原因

code:4  msg:注册已关闭（后台可控制）

6、注册成功，返回用户登录界面

第32集内容讲解：对接登陆接口实现登陆功能

1、引入axios和qs

2、登录地址：/ user/login

3、提交地址：https:www.koocv.com/user/login

4、返回值

code:0  msg:登录成功

code:1  msg:验证码错误

code:2（登录失败）  msg:提示不同的登录失败原因

5、登录成功 – 返回原页面

window.history.back（返回上一页）

window.location.href=”/”

第33集内容讲解：获取用户登录状态

1、用户登录和未登录状态不同逻辑处理

获取用户是否登录

定义方法：getLoginState

2、是否登录接口

/user/islogin

3、axios.post

https:www.koocv.com/user/islogin

4、组件更新

重新请求用户名

React 生命周期

更新阶段：componentDidUpdate

第34集内容讲解：利用context把登陆状态传递给各个子组件

1、获取登录的状态，不停执行更新，处理死循环问题

2、跨组件通信 （context）

chidContextTypes

prop-types

getchidContext

ContextTypes

第35集内容讲解：登陆和未登录状态不同的逻辑处理

1、实现用户已经登录，不用进入login界面

2、React 重定向

Redirect

3、登陆和未登录状态切换

登录：显示用户名

未登录：显示登录按钮图标

4、跳转回复本帖页面，不显示login

第36集内容讲解：作品列表数据获取

1、上滑加载 – 通用组件

类组件 – loadMore

传递结构

children

2、首页获取的数据传递内容

order：desc（降序） / asc（升序）

sort：

sort（后台指定排序）

id（加入的ID）

update_time（修改时间）

category_id：1 和 2  1代表作品列表 /  2代表讲师列表

recommend：首页推荐位置，首页推荐值为1，全部为0

3、作品列表数据获取

第37集内容讲解：上滑加载更多内容-1

1、数据添加至结构

数据结构：数组

数组内容：

id（唯一）

category_id

item.title（标题）

item.good（点赞个数）

item.message（留言个数）

item.icon（图片）

2、上滑加载更多

loading

加载显示更多内容

loadEnd

加载完成，不显示加载图标

显示：这里是底线了

第38集内容讲解：上滑加载更多内容-2

1、获取滚动条的位置

y = window.scrollY

屏幕高度winH：clientHeight

页面高度pageH：scrollHeight

2、页面可滑动最大高度maxY=页面高度pageH – 屏幕高度winH

3、页面滑动快到底部时请求新的数据

第39集内容讲解：为各个视图添加菜单交互

1、各个视图添加菜单交互

MenuPage 菜单页面的交互

课程安排

course-page

讲师团队

lecture-page

学员作品

work-page

2、React 生命周期 Unmounting 卸载阶段

componentWillUnmount

卸载事件：window.removeEventListener

第40集内容讲解：获取讲师列表数据

1、引入请求数据  – axios / qs

order:”desc”

sort:”id”

category_id:2

2、组件加载

componentDidMount( )

3、妙味团队 列表数据获取

4、妙味团队 Tab切换功能

getTab 方法

第41集内容讲解：讲师页面弹窗结构

1、引入Popup

2、讲解弹窗结构（popup）

全屏半透明

头像

标题

关闭按钮

内容区域

内容超出滚动条

第42集内容讲解：子滚动条滚动带动父级滚动条滚动的问题解决

1、滚动条问题处理

简单 demo 展示滚动条 bug

2、解决方案1

布局解决方案：不使用系统滚动条，使用原生滚动条

弊端：原生滚动条在滚动会有下拉回弹或者内容背景菜单显示

第43集内容讲解：better-scroll的使用说明

1、解决滑屏问题的利器

better-scroll

2、引入 bscroll.js 文件

3、生成布局

4、添加滚动

startY（左右滑动）

scrollY（上下滑动）

freescroll（左右上下滑动）

bounce（回弹动画）

refresh方法

第44集内容讲解：添加better-scroll

1、项目引入 better-scroll

npm i better-scroll -s

2、首页滚动调整

PageScroll

3、是否阻止浏览器默认行为

preventDefault

preventDefaultException

tagName

第45集内容讲解：better-scroll阻止默认事件后，导致的链接不可用问题解决

1、问题 – a 标签点击失效 （部分）

2、解决方案

获取所有 a 标签

循环判断给 a 标签加点击事件

第46集内容讲解：利用better-scroll完善上拉加载的效果

1、上拉加载

pullUpLoad：ture / false（是否需要）

threshold：配置开始加载的时机，距离底部多久开始加载

2、已经加载

finishPullUp

3、动态关闭上拉加载

closePullUp

4、学员作品跳转失效

事件代理/事件委托方法

第47集内容讲解：完善教师弹窗

1、弹窗添加

openPopup

2、点击显示弹窗

popupPage

onTouchStart

onTouchEnd

getPopupDate

第48集内容讲解：为讲师弹窗添加滑动

1、绑定数据

data.icon

data.title

data.content

2、添加滚动条

overflow-y：hidden

3、讲师介绍弹窗关闭

clossPopup

点击空白区域弹窗关闭

点击关闭按钮弹窗关闭

4、添加滑动

componentDidMount

new BScroll

bounce：false（取消回弹）

 

第49集内容讲解：合并菜单和滑屏组件

1、给各个界面加上滑屏

2、合并菜单和滑屏组件

引入组件：PageScroll

3、学员作品点击失效

第50集内容讲解：添加详情页的loading动画

1、添加学员作品详情页跳转id ：item.id

2、loading动画

Loading

3、CSS3动画

animation

4、判断数据是否拿到数据

是：直接加载数据

否：Loading状态

第51集内容讲解：文章详情页面的数据获取及better-scroll在差网速下的bug修复

1、学员作品详情页数据添加

getWordData

url

qs.stringify

article_id

data

data.iamge_path

data.title

data.content

data.good

2、refresh方法

当DOM内容更新，重新计算better-scroll

第52集内容讲解：点赞功能-1

1、判断是否点赞

data.good

状态：isgood

getIsGood

2、是否点赞接口

lecturer/getgood

3、POST参数

article_id:文章id

4、返回值

code：0  （点赞）

code:1（mag:未登录）

code:2（mag:收藏文章id不能为空）

code:3（mag:未点赞）

第53集内容讲解：点赞功能-2

1、点赞功能分析

已经点赞：取消点赞

没有点赞：开始点赞

2、判断是否登录

接口：user / islogin

返回值：code：0 / code：1

未登录：实现跳转 login 界面

已登录：实现点赞或者取消点赞

第54集内容讲解：点赞功能-3

1、判断是否点赞

判断 res.data.code 的值

code：1（点赞）/ code：3（未点赞）

2、点赞 / 点赞数

good 的值

3、取消点赞

接口：lecturer/cancelgood？

POST参数：

goodid：在获取是否点赞接口中获取到的id

article_id：文章id

返回值：

code:0（mag:取消点赞成功）

code:1（mag:未登录）

code:2（mag:文章id不能为空）

code:3（mag:收藏id不能为空）

4、点赞和未点赞切换动画

5、解决用户快速点击重复提交问题

6、总结点赞功能实现过程

第55集内容讲解：获取留言列表

1、留言列表接口

lecturer/getconment？page=1&rows=20

2、留言列表

MessageList

3、留言状态：

有留言 ：显示留言

没留言 ：抢沙发

第56集内容讲解：提交留言

1、留言评论

接口：lecturer/addconment

POST参数：

article_id：文章id

content：评论内容

2、提交留言

postMessage

axios.post

withCredentials：true

3、返回值

弹窗：判断code 的值，code等于 0（评论成功）

第57集内容讲解：细节修复

1、a 按下的效果失效修复

active

2、事件代理，判断是点击行为还是滑屏修复

3、学员作品有时候刷不到底部修复

第58集内容讲解：安卓下真机测试-修复首页布局

1、真机测试 – （坚果pro手机）自带浏览器

2、解决学员作品图片撑开整行 bug

3、真机上逐个测试相关功能

第59集内容讲解：iOS真机测试–vh问题处理

1、测试：iphone6  ios 11.3系统版本，微信内置浏览器测试

2、测试功能：

1）登录

2）菜单

3）上滑加载

4）左右滑屏

5）课程安排

6）讲师团队

7）讲师弹窗及弹窗滑屏

8）学员作品详情

9）点赞

3、修复登录界面的问题

登录界面 – 底部白边

登录界面 – 顶部被盖住

4、页面最底部 – 未显示完整问题处理

vh问题处理

动态获取可视区高度：window.innerHeight

第60集内容讲解：IOS下微信内置浏览器跨域请求不携带cookie处理

1、修复验证码输入错误后，再次输入正确的验证码登录不成功bug

2、proxy 代理服务器讲解

转发

请求重定向

3、替换请求地址

第61集内容讲解：软键盘遮挡输入框处理思路

1、修复软键盘遮挡输入框问题

2、获取软键盘本身高度

3、获取鼠标聚焦坐标（input坐标）

初始坐标

当前坐标

4、计算输入框移动距离

5、修改页面的top值