妙味课堂最新尊享课程:>>了解详情
课程介绍
本项目从拿到设计图开始,从页面适配、到交互效果、再到数据渲染,一步步带着大家搭建自己的移动端 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 异步通信 >>查看详情
- PS:不清楚自己是否具备学前要求?不如测一测吧,扫描二维码做一下学前测试:
案例截图(布局篇)
一、首页展示
一、妙味团队 & 课程安排
二、妙味特色 & 学员作品
三、登录注册 3D 卡片
案例截图(业务逻辑):
课程介绍
1、介绍项目相关功能及交互
2、学前基础介绍
3、课程说明
>>请点击看更多详细课程内容
咨询方式:
- 咨询 QQ:2852509866、2852509868
- 微信咨询:miaov-class、miaov-study
知识点
React
- create-react-app react 脚手架
- state 及 setState 状态和状态更新
- props 属性操作
- 类组件及函数组件
- React 的生命周期
- dangerouslySetInnerHTML 添加 innerHTML
- prop-types 属性验证
- children 子组件获取
- refs 获取真实的 DOM 节点
- context 跨组件消息传递
React-router 路由
- Link 和 Route 路由跳转
- Redirect 重定向
- location.href 及 props.history.push 在 js 中操作路由跳转
- props.match.params 通过路由传递数据
axios 基于 promise 的 http 库
- url 请求地址
- postData 请求数据
- withCredentials 携带 cookie
- then 请求成功回调
- catch 请求是被回调
- qs 对象转换 url 格式字符串
- proxy 代理服务器设置
- 转发标示设置
- target 转发地址
- changeOrigin 开启代理服务器转发
- secure 验证 ssl
- pathRewrite 转发标示替换
- cookieDomainRewrite 修改响应头中 cookie 中域名,实现当前域的 cookie 写入
better-scroll
- new BScroll(wrapper) 创建 better-scroll 滑屏
- pullUpLoad 启动上滑加载更多
- pullingUp 上滑事件
- finishPullUp() 上滑加载完成
- closePullUp() 关闭上滑
- refresh() 重新计算相关尺寸
移动端布局 及 css3
- viewport
- vw,vh,rem 相对单位适配
- iconfont 字体图标
- display:flex 弹性盒模型
- display:grid 网格布局
- transfrom 3d变换
- transition
移动端事件
- touchstart
- touchmove
- touchend
- touchEvent
功能一致但结构不一致的功能组件通用问题处理
阻止了默认事件后链接不能跳转问题处理
滑动幻灯片页面抖动问题处理
安卓下大面积触屏,误触 touchmove 问题处理
移动端子滚动条滚动带动父级滚动条滚动问题处理
better-scroll 网速差的情况下,异步请求图片导致不能拖到底部问题处理
ios safari 下 vh 的 bug 说明
ios 下微信内置浏览器跨域请求不能携带 cookie 问题处理
移动端输入框被键盘遮挡的问题处理
文字看得不过瘾?想看视频?到这里来观看吧:
>>React - 移动端企业级数据交互项目实战视频观看地址
进群方式:关注公众号,发送 “vip进群” 关键字,联系我们加入 VIP 微信学习群
