微信小程序网易云音乐获取视频列表数据(需要登录获取携带cookie)

获取网易云视频列表的数据时需要先登录再获取，并且获取的时候要携带cookie
cookie存在request中，需要从request中获取，但是request中并不是每一个请求都需要获取cookie，所以需要在login.js的请求时携带一个参数来标识他需要获取cookie
login.js

// 后端验证let result=await request('/login/cellphone',{phone,password,isLogin:true})

request.js中进行判断是否携带isLogin参数为true的参数，是的话就获取cookie进行存储，并且cookie需要添加在请求头中，请求头中当cookie有值的时候在请求头中获取并加上cookie，没有的时候需要设置为空，防止用户未登录的时候报错
request.js

import config from './config'
// 封装ajax请求功能函数
export default (url,data={},method='GET')=>{return new Promise((resolve,reject)=>{// 1.初始化promise状态为pending// 2.执行异步任务wx.request({url:config.host+url,data,method,header:{cookie:wx.getStorageSync('cookies')?wx.getStorageSync('cookies').toString():''},// 3.根据异步任务的结果修改promise的状态success:(res)=>{// console.log('请求成功',res)// 登录请求,将用户的cookie保存至本地if (data.isLogin) {wx.setStorageSync('cookies', res.cookies)}resolve(res.data) //修改promise状态为成功为resolved},fail:(err)=>{console.log('请求失败',err)reject(err) //修改promise状态为失败状态 rejected},})})
}

video.js

import request from '../../utils/request'
Page({/*** 页面的初始数据*/data: {videoGroupList:[], //导航标签数据navId:'', //导航标签的id标识videoList:[], //视频列表数据},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.getVideoGroupList()},// 获取导航标签数据的功能函数async getVideoGroupList(){let result=await request('/video/group/list')// 更新videoGroupList的数据// slice splice(会影响原数组)this.setData({videoGroupList:result.data.slice(0,14),navId:result.data[0].id})this.getVideoList(this.data.navId)},// 获取视频列表数据的功能函数async getVideoList(navId){let videoListData=await request('/video/group',{id:navId})// console.log(videoListData)// 更新videoList状态数据let index=0// 若videoListData.data有值，使用map方法加工这个数组，给item添加一个唯一的id用于标识当前的item，注意加工完的item需要返回if (videoListData.datas) {let videoList=videoListData.datas.map(item=>{item.id=index++return item})this.setData({videoList})}},// 点击导航切换的回调changeNav(event){let navId=event.currentTarget.idthis.setData({navId:Number(navId)})// 获取最新的视频列表数据this.getVideoList(this.data.navId)},})

video.wxml

  <!-- 导航区域 --><scroll-view scroll-x="true" enable-flex="true" class="navScroll"><view class="navItem" wx:for="{{videoGroupList}}" wx:key="id"><view class="navContent {{navId===item.id ? 'active' : ''}}" bindtap="changeNav" id="{{item.id}}">{{item.name}}</view></view></scroll-view><!-- 视频列表区域 --><scroll-view><view class="videoItem" wx:for="{{videoList}}" wx:key="id"><video src="{{item.data.urlInfo.url}}"></video></view></scroll-view>

微信小程序网易云音乐获取视频列表数据(需要登录获取携带cookie)相关推荐

微信小程序网易云音乐播放界面
微信小程序网易云效果图 HTML JS CSS 效果图 HTML <view class="box"><view class ...
SSM+微信小程序网易云音乐设计与实现毕业设计-附源码261620
基于SSM微信小程序的网易云音乐摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序 ...
SSM+mysql+微信小程序网易云音乐设计与实现毕业设计-附源码261620
基于SSM微信小程序的网易云音乐摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序 ...
（附源码）SSM+mysql+微信小程序网易云音乐设计与实现毕业设计261620
基于SSM微信小程序的网易云音乐摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序的 ...
微信小程序网易云音乐设计与实现毕业设计-附源码261620
基于SSM微信小程序的网易云音乐摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序的 ...
（附源码）SSM+mysql+微信小程序网易云音乐设计与实现毕业设计261620
基于SSM微信小程序的网易云音乐摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序的 ...
微信小程序网易云音乐视频播放切换的功能的实现
需要使用bindplay事件 <video src="{{item.data.urlInfo.url}}" object-fit="cover" bind ...
WeChat微信小程序网易云音乐播放链接方法
微信小程序网易云音乐轮播图右侧留白
效果图这个效果需要用到swiper里面的一个方法next-margin 使用如下: <swiper class="topListSwiper" next-margin='5 ...
微信小程序网悦新闻开发--视频模块开发（四）
目录微信小程序网悦新闻开发--功能介绍(一) 微信小程序网悦新闻开发--小程序配置(二) 微信小程序网悦新闻开发--首页模块开发(三) 微信小程序网悦新闻开发--视频模块开发(四) 微信小程序网悦新 ...

微信小程序网易云音乐获取视频列表数据(需要登录获取携带cookie)

微信小程序网易云音乐获取视频列表数据(需要登录获取携带cookie)相关推荐

最新文章

热门文章