尊享视频: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 异步通信 >>查看详情

  • PS:不清楚自己是否具备学前要求?不如测一测吧,扫描二维码做一下学前测试:

案例截图(布局篇)

一、首页展示

一、妙味团队 & 课程安排

二、妙味特色 & 学员作品

三、登录注册 3D 卡片

案例截图(业务逻辑):

  1. 课程介绍
  2. 1、介绍项目相关功能及交互
  3. 2、学前基础介绍
  4. 3、课程说明

>>请点击看更多详细课程内容

咨询方式:

  • 咨询 QQ:2852509866、2852509868
  • 微信咨询:miaov-class、miaov-study

知识点

React

  1. - create-react-app react 脚手架
  2. - state setState 状态和状态更新
  3. - props 属性操作
  4. - 类组件及函数组件
  5. - React 的生命周期
  6. - dangerouslySetInnerHTML 添加 innerHTML
  7. - prop-types 属性验证
  8. - children 子组件获取
  9. - refs 获取真实的 DOM 节点
  10. - context 跨组件消息传递

React-router 路由

  1. - Link Route 路由跳转
  2. - Redirect 重定向
  3. - location.href props.history.push js 中操作路由跳转
  4. - props.match.params 通过路由传递数据

axios 基于 promise 的 http 库

  1. - url 请求地址
  2. - postData 请求数据
  3. - withCredentials 携带 cookie
  4. - then 请求成功回调
  5. - catch 请求是被回调
  6. - qs 对象转换 url 格式字符串
  7. - proxy 代理服务器设置
  8. - 转发标示设置
  9. - target 转发地址
  10. - changeOrigin 开启代理服务器转发
  11. - secure 验证 ssl
  12. - pathRewrite 转发标示替换
  13. - cookieDomainRewrite 修改响应头中 cookie 中域名,实现当前域的 cookie 写入

better-scroll

  1. - new BScroll(wrapper) 创建 better-scroll 滑屏
  2. - pullUpLoad 启动上滑加载更多
  3. - pullingUp 上滑事件
  4. - finishPullUp() 上滑加载完成
  5. - closePullUp() 关闭上滑
  6. - refresh() 重新计算相关尺寸

移动端布局 及 css3

  1. - viewport
  2. - vwvhrem 相对单位适配
  3. - iconfont 字体图标
  4. - display:flex 弹性盒模型
  5. - displaygrid 网格布局
  6. - transfrom 3d变换
  7. - transition

移动端事件

  1. - touchstart
  2. - touchmove
  3. - touchend
  4. - touchEvent
  5. 功能一致但结构不一致的功能组件通用问题处理
  6. 阻止了默认事件后链接不能跳转问题处理
  7. 滑动幻灯片页面抖动问题处理
  8. 安卓下大面积触屏,误触 touchmove 问题处理
  9. 移动端子滚动条滚动带动父级滚动条滚动问题处理
  10. better-scroll 网速差的情况下,异步请求图片导致不能拖到底部问题处理
  11. ios safari vh bug 说明
  12. ios 下微信内置浏览器跨域请求不能携带 cookie 问题处理
  13. 移动端输入框被键盘遮挡的问题处理

文字看得不过瘾?想看视频?到这里来观看吧:

>>React - 移动端企业级数据交互项目实战视频观看地址

进群方式:关注公众号,发送 “vip进群” 关键字,联系我们加入 VIP 微信学习群

妙味网友
请登录后留言,请登录注册
 
 
 
 
 
官方微博
常见问题
手机观看
微信扫一扫
公众号内观看视频
咨询客服
点击咨询QQ客服
微信客服
返回顶部