小程序网易云（三）

一，登录后，将客户信息保存在微信小程序本地中

1,1，wx.setstorege（），

将登录信息存储到本地，将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。
单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB

 //用于发送登录请求的函数
   async handleLogin(){
    let {phone,password} = this.data;
    let result = await request('/login/cellphone',{
      phone,
      password
      
    });
    /*
    登录接口
    用户名错误->状态为400
    密码错误  ->状态为502
    登陆成功  ->状态为200
     */
    // console.log('result',result)
    if (result.code===400){
      wx.showToast({
        title: '用户名错误',
        icon:"none"
      })
    } else if (result.code === 502) {
      wx.showToast({
        title: '密码错误',
        icon: "none"
      })
    }else if(result.code===200){
      wx.showToast({
        title: '登陆成功,即将跳转',
        icon: "success",
        // 成功的回调
        success() {
          wx.setStorage({
            key:"userinfo",
            // 字符串的形式存储
            data: JSON.stringify(result.profile) ,
            success(){
              console.log('存储成功')
            }
          })
          // 登录成功后，跳转到个人中心
          wx.switchTab({
            url: '/pages/personal/personal'
          })
        }
      })
    }
  },

1,2，此时个人中心页personal,从本地中获取客户信息，此时在onshow函数中获取，不是在onload中获取，因为从个人中心页跳转登录页，没有销毁该页，onload的周期已过，

 onShow: async function () {
    // 解析成数组
    let userinfo = JSON.parse(wx.getStorageSync("userinfo")) || "{}";
    // console.log(userinfo)
    this.setData({
      userinfo
    });
    // 有登录信息后，才请求播放记录
    if(userinfo){
      let result = await request('/user/record',{type:0,uid:userinfo.userId});
      // console.log(result)
      this.setData({
　　　　　　//数组
        playList:result.weekData
      })
    }
  },

1.3，最近播放记录发送请求获取数据，此时必须是用户登录过才可以，此时客户登录信息已从本地获取到了，可以发送请求获取播放信息记录了

 data: {
    moveDistance:0,
    moveTransition:"none",
    playList:null,
    userinfo:{}
  },

1.4，数据渲染

  <view class="playList">
        <view class="playTitle">最近播放</view>
        <scroll-view class="playScroll" scroll-x enable-flex wx:if="{{playList}}">
          <!-- <view><image src="/static/images/nvsheng.jpg"></image></view> -->
          <image src="{{item.song.al.picUrl}}" wx:for="{{playList}}"></image>
         
        </scroll-view>
        <view class="noData" wx:else>暂时没有数据</view>
      </view>

客户登录过，图片更改，昵称更改

 <view class="user-info-box" bindtap="toLogin">
      <view class="portrait-box">
        <image class="portrait"  src="{{userinfo.avatarUrl?userinfo.avatarUrl:'/static/images/personal/missing-face.png'}}" ></image>
      </view>
      <view class="info-box">
        <text class="username">{{userinfo.nickname?userinfo.nickname:'游客'}}</text>
      </view>
    </view>

客户已经登录过，点击后不用再跳转到登录页了

 toLogin(){
    // 如果已经登录，不需要在跳转登录页
    if(this.data.userinfo.nickname)return;
    wx.navigateTo({
      url: '/pages/login/login'
    })
  },

二，视频页面导航条静态页面，以及动态渲染

1，flex-grow:1;生长系数，如果父级开启了flex,三个子元素的宽度没有父级的宽度长，那么空白区域给设置了生长系数属性的子级

2，scroll-view组件有默认高度，需要自己设置 高度，

3.小程序支持placeholder-class="placeholder"属性，对水印设置样式

 

  <input type="text" placeholder="光辉岁月" placeholder-class="placeholder"></input>

.videoContainer .header input .placeholder{
  text-align: center;
  font-size:28rpx;
  color:red;
}

4，发送请求，获取导航条的数据

 let result = await request('/video/group/list');
    console.log(result);
    this.setData({
      // 截取多余的数据
      videoGroup:result.data.slice(0,14)
    })

 data: {
    videoGroup:[],
    videoList:[]
  },

5，渲染数据

 <scroll-view class="navScroll" enable-flex scroll-x>
    <view class="navItem active" wx:for="{{videoGroup}}" wx:key="id"
    >{{item.name}}</view>
  </scroll-view>

三，视频模块（视频列表获取数据）

video组件，要播放视频的资源地址，支持网络路径、本地临时路径、云文件ID

获取视频标签下对应的视频数据
    必选参数 : id: videoGroup 的 id
    接口地址 : /video/group
    调用例子 : /video/group?id=9104
    注意事项: 
    需要先登录
    发请求需要携带用户cookie
    返回数据: 

此时cookie只有发送登录请求成功后，才会携带cookies

 1,我们需要在请求登录接口时，需要传入一个登录标识，此时在接口函数中，就可以判断是登录状态的，就可以将cookies保存在本地，然后将cookies在请求头header中携带cookie

//用于发送登录请求的函数
   async handleLogin(){
    let {phone,password} = this.data;
    let result = await request('/login/cellphone',{
      phone,
      password,
      isLogin:true
    });

2.在接口函数中将cookies保存在本地

import lj from './config.js'
export default function(url,data={}, method='get'){

  return new Promise((resolve,reject)=>{
    wx.request({
      url:lj.host+url,
      method,
      data,
      header:{
        // 必须设置成数组的字符串形式
        cookie:JSON.parse(wx.getStorageSync("cookies")||"[]").toString()
      },
      success:(res)=>{
        console.log(res)
        // console.log(res.dates)
        // console.log(res.cookies)
        //获取请求头中的cookies;
        let cookies=res.cookies;
        let {isLogin} = data;
        //cookies只有在登录接口中才会返回
        if(isLogin){
          // 字符串形式存储
          wx.setStorageSync("cookies", JSON.stringify(cookies));
        }
        resolve(res.data)
      }
  
    })
  })
 
}

JSON.parse(wx.getStorageSync("cookies")||"[]") ， 此时如果cookie是undefind, 就会报错，如果为undefind，就为空数组

3,此时cookies已经在请求头携带了，我们可以发送请求，获取视频列表数据了，id是每个视频标签下视频列表数据，此时58100的id是现场的id

let videoListData = await request("/video/group", { id: 58100});
    this.setData({
      videoList:videoListData.datas
    })
    console.log(videoListData)

数据渲染， 小程序没有a.b.c数据undefind问题，可以放心使用

<scroll-view class="videoList" scroll-y> 
  
    <view class="videoItem " wx:for="{{videoList}}"  wx:key="vid">
      <video class="common" src="{{item.data.urlInfo.url}}"></video>
      <!-- <image id="{{item.data.vid}}" class="common" bindtap="handleTrigger" src="{{item.data.coverUrl}}"></image> -->
      <view class="content">{{item.data.title}}</view>

四，视频列表动态情况

4,1，我们需要滑动视频列表，视频滚动，但是不需要顶部的页面页跟着一起滚动

4.2，可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

calc,计算属性，不包括底部的tarbar

.videoList{
  padding-top:40rpx;
  height:calc(100vh - 212rpx);
}

4.3,点击视频标签页，也就是更新id,重新发送请求，获取视频数据。默认页面加载时，获取第一个id的视频

onLoad: async function (options) {
    let result = await request('/video/group/list');
    console.log(result);
    this.setData({
      // 截取多余的数据
      videoGroup:result.data.slice(0,14)
    })

    let id = result.data[0].id
    
    //第一页面渲染时，获取视频列表数据
    let videoListData = await request("/video/group", { id});
    this.setData({
      id,
      videoList:result.data.slice(0,14)
    })
    console.log(id)
  },

 data: {
    videoGroup:[],
    videoList:[],
    id:null
  },

点击视频标签，跟新id,重新发送请求，

<scroll-view class="navScroll" enable-flex scroll-x>
    <view class="navItem {{id===item.id?'active':''}}" wx:for="{{videoGroup}}" wx:key="id"
    bindtap="changeId"  data-id="{{item.id}}"
    >{{item.name}}</view>
  </scroll-view>

js

 1, 视频在请求时，先搞个加载状态，  wx.showLoading({

      title:"加载中,请稍等"

    })

2，2s后，加载状态消失

setTimeout(wx.hideLoading,2000)

 

 // 用于控制导航条内部下边框的显示
   changeId(event){
     //获取自定义的属性的id
    let {id} = event.target.dataset
    // 跟新id
    this.setData({
      id
    })
    // 调用请求函数
    this.getVideoList(id);
  },

   //用于请求视频列表数据
   async getVideoList(id){
    //  显示加载状态
    wx.showLoading({
      title:"加载中,请稍等"
    })
    // 清空之前的视频数据
    this.setData({videoList:[]})
    let videoListData = await request("/video/group", { id });
    // 2s后清空加载状态
    setTimeout(wx.hideLoading,2000)
    // wx.hideLoading();
    this.setData({
      videoList: videoListData.datas
    })
    // console.log(videoListData)
  },

五，视频模块，（常见功能）

5,1，下拉功能

1.refresher-enabled，开启自定义下拉刷新，默认为false

2,bindrefresherrefresh,自定义下拉刷新被触发,

3，refresher-triggered，设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发

4，bindscrolltolower， 滚动到底部/右边时触发

5，scroll-into-view，值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

 6，scroll-with-animation  过渡效果

 

 

 

 <scroll-view class="videoList" 
  scroll-y 
  refresher-enabled
  refresher-triggered="{{trigger}}"
  bindrefresherrefresh="pullUpdate"
  bindscrolltolower="scrollToLower"
  >

下拉的js,此时下拉视频后，下拉状态还在，我们需要下拉成功后，还需要自动回去，此时需要设定属性refresher-triggered

  // 用于响应用户的下拉刷新效果
  pullUpdate(){
    // console.log('pullUpdate')
    // 重新发送请求，获取列表数据
    this.getVideoList(this.data.id);
  },

发送请求成后，下拉状态回去

 data: {
    videoGroup:[],
    videoList:[],
    id:null,
    trigger:false
  },

 //用于请求视频列表数据
  async getVideoList(id){
    wx.showLoading({
      title:"加载中,请稍等"
    })
    this.setData({videoList:[]})
    let videoListData = await request("/video/group", { id });
    setTimeout(wx.hideLoading,2000)
    // wx.hideLoading();
    this.setData({
      videoList: videoListData.datas,
      trigger:false
    })
    // console.log(videoListData)
  },

6，上拉触底加载

绑定scrolltolower事件,监听用户上拉触底的操作
由于没有真实的上拉加载更多接口,需要自己模拟数据,并将模拟的数据与旧数据合并,更新到状态中

7，

导航条内容滑动
使用scroll-into-view标签属性,实现点击某个选项,让其移动到最前面
注意:scroll-into-view的值必须是某个选项的id,id的值必须要以字母开头
提升用户体验,使用scroll-with-animation标签属性给移动效果添加动画

瞄点的功能

  <!-- 导航栏区域 -->
  <scroll-view class="navScroll" 
    enable-flex 
    scroll-x
    scroll-with-animation
    scroll-into-view="{{'scroll'+id}}">
    <view id="{{'scroll'+item.id}}" class="navItem {{id===item.id?'active':''}}"
      bindtap="changeId"
      data-id="{{item.id}}"
      wx:for="{{videoGroup}}"
      wx:key="id"
    >
      <text>{{item.name}}</text>
    </view>
  </scroll-view>