React

07-28 02:12

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

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值

454

11-15 11:24

React Native大神班项目实战视频课程

React Native大神班项目实战视频课程课程目录 ├─01React Native初体验 │ 01-React Native简介 │ 02-React Native环境搭建 │ 03-React Native初体验及其它环境搭建 │ 04-React Native项目目录结构详解 │ ├─02FlexBox布局和常局设置 │ 01-组件View的介绍 │ 02-FlexBox布局上 │ 03-FlexBox布局下 │ 04-屏幕适配之获取屏幕的分辨率 │ ├─03核心组件和案例上 │ 01-昨日知识点回顾 │ 02-image案例包展示搭建界面 │ 03-图片设置数据并进行布局 │ 04-TextInput组件的常用属性 │ 05-QQ登录界面案例布局 │ 06-QQ登录界面样式设置并适配双系统 │ 07-Touchable触摸交互组件 │ 08-组件的生命周期上 │ 09-组件的生命周期下 │ 10-ScrollView组件的基本设置 │ 11-案例焦点图-设置图片 │ 12-案例焦点图-设置圆点 │ 13-案例焦点图-设置定时器 │ 14-ListView组件的介绍 │ 15-ListView组件的数据并布局 │ ├─04核心组件和案例下 │ 01-昨日内容回顾 │ 02-ListView案例九宫格-布局 │ 03-ListView案例九宫格-具体实现 │ 04-ListView吸顶效果原理 │ 05-ListView数据结构和数据的处理 │ 06-ListView实现吸顶效果和设置样式 │ 07-TaBbarIOS的具体实现 │ 08-TabBarIOS界面之间的切换 │ 09-新闻app小项目-初始化项目 │ 10-新闻app小项目-包装导航控制器 │ 11-新闻app小项目-请求网络数据 │ 12-新闻app小项目-处理网络异常的情况 │ 13-新闻app小项目-设置具体的界面数据 │ 14-新闻app小项目-设置头部数据 │ 15-新闻app小项目-设置新闻详情页 │ ├─05电商项目实战上 │ 01-初始化设置(掌握 │ 02-设置主要框架(掌握 │ 03-包装Navigator(掌握 │ 04-包装和封装导航(掌握 │ 05-设置首页头部的结构(掌握 │ 06-设置首页头部的样式(掌握 │ 07-设置安卓中启动图片(掌握 │ 08-更多的导航设置(掌握 │ 09-设置通用的cell(掌握 │ 10-设置cell的其他样式和类型(掌握 │ 11-我的公关的Cell(掌握 │ 12-设置我的公共的Cell的样式(掌握 │ 13-我的中间的内容设置(掌握 │ 14-头部下部分的内容(掌握 │ ├─06电商项目实战下 │ 01-首页头部(掌握 │ 02-设置首页头部里面的内容和结构(掌握 │ 03-设置ListView中的内容(掌握 │ 04-完善头部的内容(掌握 │ 05-设置中间的View的结构(掌握 │ 06-中间的组件设置(掌握 │ 07-中间组件-右边(掌握 │ 08-中间左边的View(掌握 │ 09-中下内容的结构搭建(掌握 │ 10-中下部分的内容样式(掌握 │ 11-购物中心-上部分(掌握 │ 12-设置购物中心-下部分内容(掌握 │ 13-设置购物中心详情(掌握 │ 14-设置猜你喜欢(掌握 │ 15-首页-猜你喜欢设置 │ 16-商家补充(掌握 │ └─07资料代码 ├─01 │ 代码 │ 资料 │ 软件 │ ├─02 │ 代码 │ 资料 │ ├─ │ 代码 │ 资料 │ ├─ │ 代码 │ 资料 │ └─ 代码资料

369

«
1
2
»