Micro letter applet song list page implementation

Small micro-channel single song program components to achieve the effect of

LAC applet on the micro-channel pull-down refresh carrier

Small micro-channel routing reform program

More than three articles to achieve a single song page, and cloud routing function transformation, then complete song list page.

The effect of a single song:

Jump pages

Click on individual songs, song single id needs to be passed to the song list page, each individual song is achieved through custom components, so it is necessary to achieve the jump and parameter passing in a single song playlist components

Add goToMusiclist method playlist file js assembly, as follows:

  methods: {

    goToMusiclist() {
      wx.navigateTo({
        url: `../../pages/musiclist/musiclist?playlistId=${this.properties.playlist.id}`,
      })
    },
...

}

Add a click event in wxml file playlist assembly

Musiclist new page, the print data received in the onLoad method musiclist.js

  onLoad: function (options) {
    console.log(options)
  },

Click on any single song, enter musiclist page, print the following message stating that the page jump successfully, and successfully received the playlistId parameters.

---

The implementation process shown as follows:

Add cloud routing function

Add musiclist routing function in the music cloud

 // 云函数入口文件
const cloud = require('wx-server-sdk')
const TcbRouter = require('tcb-router')
const rp = require('request-promise')
const BASE_URL = 'http://xx.xx.xx'

cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {

  const app = new TcbRouter({
    event
  })

  app.router('playlist', async (ctx, next) => {
    ctx.body = await cloud.database().collection('playlist')
      .skip(event.start)
      .limit(event.count)
      .orderBy('createTime', 'desc')
      .get()
      .then((res) => {
        return res
      })
  })

  //这里直接将歌单详情接口中请求的数据返回给调用者
  app.router('musiclist', async (ctx, next) => {
    ctx.body = await rp(BASE_URL + '/playlist/detail?id=' + parseInt(event.playlistId))
      .then((res) => {
        console.log(res)
        return JSON.parse(res)
      })
  })

  return app.serve()
}
 

musiclist custom components

New musiclist custom components

musiclist.wxml:

<block wx:for="{{musiclist}}" wx:key="id">
  <view class="musiclist-container {{item.id === playingId ? 'playing': ''}}" 
  bind:tap="onSelect" data-musicid="{{item.id}}" data-index="{{index}}">
    <view class="musiclist-index">{{index+1}}</view>
    <view class="musiclist-info">
      <view class="musiclist-name">
        {{item.name}}
        <text class="musiclist-alia">{{item.alia.length==0?"":item.alia[0]}}</text>
      </view>
      <view class="musiclist-singer">{{item.ar[0].name}} - {{item.al.name}}</view>
    </view>
  </view>
</block>

musiclist.js :

// components/musiclist/musiclist.js
const app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    musiclist: Array
  },

  /**
   * 组件的初始数据
   */
  data: {
    playingId: -1
  },
  pageLifetimes: {
    show() {
      this.setData({
        playingId: parseInt(app.getPlayMusicId())
      })
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onSelect(event) {
      console.log('被选中了')
      // 事件源 事件处理函数 事件对象 事件类型
      // console.log(event.currentTarget.dataset.musicid)
      const ds = event.currentTarget.dataset
      const musicid = ds.musicid
      this.setData({
        playingId: musicid
      })
      wx.navigateTo({
        url: `../../pages/player/player?musicId=${musicid}&index=${ds.index}`,
      })
    }
  }
})

musiclist.wxss:

.musiclist-container {
  display: flex;
  padding: 14rpx 20rpx;
  align-items: center; /* 垂直居中 */
}

.musiclist-index {
  color: #888;
  font-size: 34rpx;
  width: 80rpx;
}

.musiclist-info {
  flex-grow: 1;
  width: 0;
}

.musiclist-name {
  font-size: 34rpx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 10rpx;
}

.musiclist-alia {
  color: #888;
}

.musiclist-singer {
  font-size: 24rpx;
  color: #888;
}

.playing view, .playing text {
  color: #d43c33;
}

The song list page implementation

New musiclist song list page

Musiclist custom components incorporated in the musiclist.json

{
  "usingComponents": {
    "x-musiclist": "/components/musiclist/musiclist"
  }
}

musiclist.wxml:

<view class='detail-container' style='background: url({{listInfo.coverImgUrl}}) no-repeat  top/cover'></view>
<view class='detail-mask'></view>
<view class='detail-info'>
  <image src="{{listInfo.coverImgUrl}}" class='detail-img'></image>
  <view class='detail'>
    <view class='detail-nm'>{{listInfo.name}}</view>
  </view>
</view>

<x-musiclist musiclist="{{musiclist}}" />

musiclist.wxss:

.detail-container {
  height: 320rpx;
  filter: blur(40rpx);
  opacity: 0.4;
}

.detail-mask {
  position: absolute;
  width: 100%;
  height: 320rpx;
  background-color: #333;
  top: 0;
  left: 0;
  z-index: -1;
}

.detail-img {
  width: 280rpx;
  height: 280rpx;
  margin-right: 24rpx;
  border-radius: 6rpx;
}

.detail-info {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 320rpx;
  padding: 20rpx;
  box-sizing: border-box;
  align-items: center;
}

.detail {
  flex-grow: 1;
  line-height: 60rpx;
  width: 0;
}

.detail view {
  color: #fff;
  font-size: 24rpx;
}

.detail .detail-nm {
  font-size: 36rpx;
  font-weight: 400;
}

musiclist.js :

// pages/musiclist/musiclist.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    musiclist: [],
    listInfo: {},
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    console.log(options)
    wx.showLoading({
      title: '加载中',
    })
    //调用music云函数的musiclist路由，获取歌曲列表数据
    wx.cloud.callFunction({
      name: 'music',
      data: {
        playlistId: options.playlistId,
        $url: 'musiclist'
      }
    }).then((res) => {
      console.log(res)
      const pl = res.result.playlist
      this.setData({
      	//歌单详情中的歌曲列表数据
        musiclist: pl.tracks,
        //歌单封面和歌单名
        listInfo: {
          coverImgUrl: pl.coverImgUrl,
          name: pl.name,
        }
      })
      wx.hideLoading()
    })
  },
})

Achieve results is as follows: