我的小程序开发之路（02）

1.用户登录页面

过程：
1.收集表单项数据

2.前端验证
1)验证用户信息（账号，密码）是否合法
2)前端验证不通过就提示用户，不需要发请求给后端
3)前端验证通过了，发请求（携带账号，密码）给服务器\

3.后端验证
1)验证用户是否存在
2)用户不存在直接返回，告诉前端用户不存在
3)用户存在需要验证密码是否正确
4)密码不正确返回给前端提示密码不正确
5)密码正确返回给前端数据，提示用户登录成功（会携带用户的相关信息）

2.事件流的三个阶段

1.捕获：从外向内
2.执行目标阶段
3.冒泡：从内向外

3.事件委托

1.什么是事件委托？
-将子元素的事件绑定给父元素

2.事件委托的好处
-只需要绑定一次就可以享用事件
-新添加的元素也可以用之前委托的事件

3.事件委托的原理
-冒泡

4.触发事件的是谁
-子元素

5.如何找到触发事件的对象
-event.target (该对象有可能是子元素也有可能是父元素)

6.currentTarget VS target
-currentTarget要求绑定事件的元素一定是触发事件的元素 -target绑定的元素不一定是触发事件的元素

4.收集表单项数据

方法一：当传入单个数据标识时使用id

//方法一：
//表单数据
<input type="text" placeholder="请输入手机号码" id="phone" bindinput="handleInput"/>

//js内容
data: {
    phone:'',
    password:''
  },
  
 handleInput(event){
     //存入id
    let type = event.currentTarget.id;
    //id值和data值相同时
    this.setData({
      [type]:event.detail.value
    })
  },

方法二：当传入多个数据标识时 使用data_type

//html内容
  <input type="text" placeholder="请输入手机号码" data-type="phone" bindinput="handleInput"/>

//js内容
  handleInput(event){
    let type = event.currentTarget.dataset.type;
    this.setData({
      [type]:event.detail.value
    })
  },

5.小程序的数据缓存

💁🏼‍♀️使用wx.reLaunch(object,object)实现跳转Tab页面携带用户信息进入

/**login页面写入数据**/

//将用户信息存入本地存储，传入的数据转为json数据
wx.setStorageSync('userInfo',JSON.stringify(result.profile))

/**personal页面收数据**/

onLoad: function (options) {
    //接收数据
    let userInfo = wx.getStorageSync('userInfo');
    
    //如果登录成功则，userInfo为收到的数据也需转为JSON类型
    if(userInfo){
      this.setData({
        userInfo:JSON.parse(userInfo)
      })
    }
  },

6.尽量避免在生命周期上加载async

// 选取前十个数据并且添加id属性
let index = 0;
let recentPlayList = recentPlayListData.allData.splice(0,10).map(item=>{
      item.id = index++;
      return item;
    })

7.两边固定，中间自适应的实现 _使用flex=1

//1.flex=1 代表什么？
//flex:flex-grow:0,flex-shrink:1,flex-basis:auto;
//flex:1 flex-grow:1,flex-shrink:1,flex-basis:0%;
//flex:auto flex-grow:1,flex-shrink:1,flex-basis:auto;

8.位移运算符

let num = 3
console.log（num >>>2)//0
console.log（num >>>1)//1

//0000 0011
//0000 0000 移动了两位
//0000 0001 移动了一位

//右移零位会将非number数据强制转换为number

9.将用户的cookies存放至本地

//1.判断是否登录，只有登录了才会需要将cookies存放至本地
let result = await request('/login/cellphone',{phone,password,isLogin:true})

//2.如果是登录状态则将cookies存放至本地
if(data.isLogin){
  //将用户的cookie存入本地
  wx.setStorage({
    key:'cookies',
    data:res.cookies
  })
  
//接收cookie的条件
header:{
    // 选取cookies中的有用的部分放到请求头中
    cookie:wx.getStorageSync('cookies').find(item => item.indexOf('MUSIC_U') !== -1)
    },

10.导航条的动态

//实现导航条的过渡效果和点击后列表成第一个注意属性的要求是string
scroll-into-view="{{'scroll' + navId}}"
scroll-with-animation

//要一一对应
<view id="{{'scroll'+item.id}}" class="navItem" wx:for="{{videoGroupList}}" wx:key="id">