小程序进阶学习（视频首页）

目录

首先封装请求文件

在用封装好的请求文件请求数据?

得到的数据

在把数据循环放到页面即可

页面代码

请求文件代码

首先封装请求文件

在用封装好的请求文件请求数据?

?

得到的数据

在把数据循环放到页面即可

页面代码

<!--pages/main-video/main-video.wxml-->

<view>
  <view>
    <block wx:for="{{videoList}}" wx:key="{{iten.srtisId}}">
     <image src="{{item.cover}}"></image>
     <view>作者：{{item.artistName}}</view>
      
    </block>
  </view>
</view>

// pages/main-video/main-video.js
import { getTopMv } from "../../services/request/myvideorequest"
Page({

  /**
   * 页面的初始数据
   */
  data: {
    videoList:[]

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getvideo()
  },
  async getvideo(){
    const videolist = await getTopMv()
    this.setData({videoList:videolist.data})
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

/* pages/main-video/main-video.wxss */

{
  "usingComponents": {}
}

请求文件代码

import { myMusicRequest } from "../../services/request/index"
export function getTopMv(offset=0,limit=10){
  return myMusicRequest.get({
    url : "/top/mv",
    data:{
      limit :limit,
      offset:offset
    }
  })
}

export function myRequest(option){
  return new Promise((resolve,reject)=>{
    wx.request({
      ...option,
      success:(res)=>{
        resolve(res.data)
      },
      fail:reject
    })
  })
}
class MyRequest{
  constructor(baseUrl){
    this.baseUrl = baseUrl
  }
  request(options){
    const {url} =  options
    return new Promise((resolve,reject) => { 
      wx.request({
        ...options,
        url:this.baseUrl+url,
        success:(res)=>{
          resolve(res.data)
        },
        fail:(err)=>{
          console.log("err",err)
        }
      })      
    })
  }
  get(options){
    return this.request({...options,method:"get"})
  }
  post(options){
    return this.request({...options,method:"post"})
  }
}
export const myMusicRequest = new MyRequest("http://codercba.com:9002")