项目

项目开发流程

1. 互联网的项目开发流程 √
2. 团队的管理 - 码云
3. 版本控制管理工具：git
4. 任务划分： 组长完成

注意：

1. 组员一定要注意不要操作原仓库代码，自己的分支自己操作，其他分支一概不碰，

2. 每天组长必须知道你的组员的进度

3. 进行组件划分，业务逻辑的提前查看，功能的提前查找

4. 项目环境搭建：

   1. webpack配置
      • 第一种选择是 yarn eject
      • 第二种选择是 webpack 的覆盖性文件： config-overrides.js
   2. router
   3. store
   4. lib 第三方插件
   5. assets 开发环境的静态资源
   6. component 组件
      1. common 公用组件
      2. pages 页面类型组件
   7. utils 自定义封装库
   8. css预处理语言
      1. less
      2. sass
      3. stylus
      4. styled-component
   9. ui组件库
   • antdesign ： 蚂蚁金服设计的， 涵盖了 vue react angular三大框架的组件库
   • 配置ui组件库和config-overrides.js

---

---

预处理

模拟数据：Mock.js || json-server
https://github.com/nuysoft/Mock/wiki/Getting-Started

在这里插入代码片

图片：图片占位符 http://placehold.it/400x200
lodash：数组处理

---

接口测试

在 Insomnia
左侧加号先新建一个文件夹 New Folder
然后对着文件夹右键新建 New Request

---

弹性盒布局

所有弹性盒子的最外成 div 都要height:100%
内部 header, footer高度固定，中间区域 flex:1

html,body{
  width: 100%;
  height: 100%;
}
.App{
  display: flex;
  flex-direction: column;
  height:100%;
}
#root{
  height:100%;
}

.head{
  height:1.12rem
}
.foot{
  height:.98rem
}

rem

最LOW版 rem

function font() {
  document.documentElement.style.fontSize = document.body.clientWidth / 3.75 + 'px'
}
font()
window.onresize = font

---

better-scroll

移动端单页面 app ，外层盒子样式

width:100%;
height:100%;
display:flex;
flex-direction: column;

内层header footer 固定高度，content 区高度自适应，溢出隐藏
content.css

flex: 1;
overflow:hidden;
display: flex;
flex-direction: column;

当中间的文本超出 content 高度的时候，发现撑出整个页面的滚动条，overflow:hidden 后不能滑动。这时我们需要用到 better-scroll

yarn add better-scroll

实例化 better-scroll 时候，考虑到所有页面都需要滚动，而不是单独的 home 页，所以在 App.js 内实例化
1.结构：可视窗口大小的容器包裹唯一子元素
2.通过 ref 绑定拿到 挂载节点
3.实例化在 App.js 钩子内异步等待 DOM 渲染完成后实例化
4.针对每次切换 APP组件实例化一次问题优化：

if(!this.scroll){
实例化
}

引入better-scroll
better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，
其它的元素都会被忽略。结构看起来像这样的
div.wrapper
	div.content--要滑动的盒子

import BScroll from 'better-scroll'

将 App 组件改为类组件
钩子内实例化
constructor(){
  setTimeout( ()=>{
    let scroll = new BScroll('.wrapper',options)
  },0)
}

---

上拉加载

this.scroll.on("pullingUp", function(){
  console.log('pullingUp')
  // 结束，如果不调用此方法上拉只执行一次
  this.finishPullUp()
});
注意：如果用ES6箭头函数注意 this 指向问题
this.scroll.on("pullingUp", () => {
  console.log('pullingUp');
  this.scroll.finishPullUp()
});

---

1px边框

核心：样式中的1px不带边物理设备上的1px。现代设备为了更好的视觉体验，原来1
px的地方出现两个物理像素点。分辨率越大，css中1px代表的物理像素就会越多
window.devicePixelRatio 属性就是一些浏览器针对比率的实现，深究原理：
http://www.cnblogs.com/2050/p/3877280.html

.radius-border{
    position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 2){
    .radius-border:before{
        content: "";
        pointer-events: none; /* 防止点击触发 */
        box-sizing: border-box;
        position: absolute;
        width: 200%;
        height: 200%;
        left: 0;
        top: 0;
        border-radius: 8px;
        border:1px solid #999;
        -webkit-transform(scale(0.5));
        -webkit-transform-origin: 0 0;
        transform(scale(0.5));
        transform-origin: 0 0;
    }
}
需要注意"button">是没有:before, :after伪元素的

优点: 其实不止是圆角, 其他的边框也可以这样做出来

缺点: 代码量也很大, 占据了伪元素, 容易引起冲突

---

轮播图

我们使用 swiper
安装：yarn add swiper
注意： swpier 中的箭头、分页器，不需要非要放在父级盒子内，当分页器在轮播上面（标题的地方），当使用定位后发现，轮播图的大盒子 overflow:hidden。当时很崩溃，但是发现可以移出来到父盒子外边，开心。

import Swiper from 'swiper'

钩子内延时实例化
componentDidMount() {
  setTimeout(() => {
    var mySwiper = new Swiper('.swiper-container', options )
  },0)
}

---

加载动画(axios 拦截器)

https://www.npmjs.com/package/axios 关键字：interceptor

入口文件配拦劫器，Toash请求时打开，.then()内关闭
index.js

import axios from 'axios'
// 引入 Toast ：加载动画
import { Toast } from 'antd-mobile'

数据没加载完
axios.interceptors.request.use(function (config) {

  这里第二个参数是自动关闭的时间(s)，默认为3，如果为0则需手动关闭
  在下边的拦截器内请求到数据后调用关闭的方法。
  一般不用写，默认3s，3s内加载到动画关闭，加载不到3s后自动关闭。
  可以设置回调函数3s后加载失败弹出失败框
  
  Toast.loading('加载中', 0);
  
  return config;
}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

数据加载完
axios.interceptors.response.use(function (response) {
  注意:这里的关闭将会关闭所有 Toash,不论写在哪里的
  Toast.hide()
  
  return response;
}, function (error) {
  // Do something with response error
  return Promise.reject(error);
});

一个带有网络错误提示的 demo

axios.interceptors.request.use(function (config) {

  等待10s，没加载出来走回调，加载出来走下边的拦截器直接关闭，同时这里的回调也不执行
  Toast.loading('Loading...', 10, () => {
  	3s后网络提示自动关闭
    Toast.info('请检查网络', 3);
  });
  return config;
});

axios.interceptors.response.use(function (response) {
  Toast.hide()
  return response;
});

---

路由监听

yarn add react-router-dom

<Provider store=store>
	<Router>

1.当路由切换到其他页面的时候，头部底部会消失。
分析：componentWillReaciveProps 钩子用于监听路由变化（整个路由变化）。只有路由组件身上有三个属性，history loaction ,match。这个只有路由组件才能用，APP组件变成路由组件不是，需要将app组件变成组件才能监听全局路由变化。
解决：使用 react-router-dom 提供的高阶组件 withRouter，将 App 组件变成伪路由组件，可以使用钩子监听整个路由，这就是没有导航守卫的原因

2.钩子内props.loaction.pathname vs this.props.loaction.pathname
一个是目标，this.props是当前的

3.切换路由后，首页滚动失效了
分析，切换的时候，组件需要重新创建，better-scroll 的实例化没有进行。
解决：监听路由变化的同时，再次实例化 better-scroll

---

数据分页懒加载

lodash数据处理，
axios拦截加载动画，

---

列表渲染组件封装，props传递数据

父组件获取 store 中的数据，通过 react-redux，然后通过props传递给共用组件渲染

---

验证码插件

captcha-mini
https://www.npmjs.com/package/captcha-mini

1. 安装：npm install captcha-mini -D

2. 引入import Captcha from 'captcha-mini'

3. 页面DOM加载完毕之后，调用captcha的draw方法

let captcha1 = new Captcha();
    captcha1.draw(document.querySelector('#captcha1'), r => {
        console.log(r, '验证码1');
    });