妙味课堂最新尊享课程：>>了解详情

课程介绍

本项目从拿到设计图开始，从页面适配、到交互效果、再到数据渲染，一步步带着大家搭建自己的移动端 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 微信学习群