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值

VIP免费

已有5人支付

相关说明:
1、链接失效后,请通过客服QQ告知站长;
2、资源来源于网络公开发表文件,所有资料仅供学习交流;
3、学分仅用来维持网站运营,性质为用户友情赞助,并非购买文件费用;
4、如侵犯您的权益,请联系管理员处理(QQ:5603324;Email:webmaster#day8.cc)。
星期八资源网 » React – 移动端企业级数据交互项目实战