Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to write the code for WeChat Mini Programs to make a music player. The content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe that everyone will gain something after reading this WeChat Mini Programs's code for making a music player. Let's take a look.

The function of the network request is:

Function getAlbumInfo (id,callback) {

Var data = {

Albummid: albummid

G_tk: 5381

Uin: 0

Format: 'json'

InCharset: 'utf-8'

OutCharset: 'utf-8'

Notice: 0

Platform: 'H6'

NeedNewCode: 1

_: Date.now ()

}

Wx.request ({

Url: 'http://c.y.qq.com/v8/fcg-bin/fcg_v8_album_info_cp.fcg',

Data: data

Header: {

'Content-Type': 'application/json'

}

Success: function (res) {

Console.log (res)

If (res.statusCode = = 200) {

Callback (res.data)

} else {

}

}

});

}

Module.exports = {

...

GetAlbumInfo:getAlbumInfo

}

Copy the code

The layout code for the page is:

{{albumInfo.name}}

{{albumInfo.singername}}

{{albumInfo.aDate}}

{{albumInfo.genre}}

{{index+1}}

{{item.songname}}

| |

{{item.name}}

Brief introduction

{{albumInfo.desc}}

Copy the code

Format file for the introduction section:

.desc {

Box-sizing: border-box

Font-size: 14px

Padding: 40px 10px

Color: # fff

Line-height: 20px

}

. desc-title {

Text-align: center

Width: 100%

Font-size: 16px

Margin-bottom: 20px

}

Copy the code

The code to load the data is:

Var MusicService = require ('.. /.. / services/music')

Var app = getApp ()

Page ({

Data: {

AlbumInfo: {}

CoverImg:''

}

OnLoad: function (options) {

/ / parameters brought by page initialization options for page jump

Var mid = app.globalData.zhidaAlbummid

MusicService.getAlbumInfo (mid, this.setPageData)

}

SetPageData: function (data) {

If (data.code = = 0) {

Var albummid = data.data.mid

Var img = 'http://y.gtimg.cn/music/photo/mid_album_500/' + albummid.slice (- 2,-1) +' /'+ albummid.slice (- 1) +'/'+ albummid + '.jpg'

This.setData ({albumInfo: data.data, coverImg: img})

}

}

})

Copy the code

The click event here is the same as the previous article, so it will not be repeated.

In addition, the two clicks we left unfinished on the home page can now be completed. First, let's take a look at the click event on the radio station, which is the same as the one we just completed. The specific code is:

RadioTap: function (e) {

Var dataSet = e.currentTarget.dataset

MusicService.getRadioMusicList (dataSet.id, function (data) {

Wx.navigateTo ({

Url:'.. / play/play'

});

If (data.code = = 0) {

Var list = []

Var dataList = data.data

For (var I = 0; I < dataList.length; iTunes +) {

Var song = {}

Var item = dataList [I]

Song.id = item.id

Song.mid = item.mid

Song.name = item.name

Song.title = item.title

Song.subTitle = item.subtitle

Song.singer = item.singer

Song.album = item.album

Song.img = 'http://y.gtimg.cn/music/photo_new/T002R150x150M000' + item.album.mid +' .jpg? max_age=2592000'

List.push (song)

}

App.setGlobalData ({

PlayList: list

PlayIndex: 0

});

}

});

}

Copy the code

The getRadioMusicList is a network request. The specific code is as follows:

Function getRadioMusicList (id,callback) {

Var data = {

Labelid: id

G_tk: 5381

Uin: 0

Format: 'json'

InCharset: 'utf-8'

OutCharset: 'utf-8'

Notice: 0

& nnbsp; platform: 'H6'

NeedNewCode: 1

_: Date.now ()

}

Wx.request ({

Url: 'https://c.y.qq.com/v8/fcg-bin/fcg_v8_radiosonglist.fcg',

Data: data

Header: {

'Content-Type': 'application/json'

}

Success: function (res) {

If (res.statusCode = = 200) {

Callback (res.data)

} else {

}

}

});

}

Module.exports = {

...

GetRadioMusicList:getRadioMusicList

}

Copy the code

The other part is the click event of the song in the search results.

MusuicPlay: function (e) {

Var dataSet = e.currentTarget.dataset

Var playingSongs = app.globalData.playList

If (typeof dataSet.index! = = 'undefined') {

Var index = dataSet.index

Var item = this.data.searchSongs [index]

Var song = {}

Var album = {}

Album.mid = item.albummid

Album.id = item.albumid

Album.name = item.albumname

Album.desc = item.albumdesc

Song.id = item.songid

Song.mid = item.songmid

Song.name = item.songname

Song.title = item.songorig

Song.subTitle =''

Song.singer = item.singer

Song.album = album

Song.time_public = item.time_public

Song.img = 'http://y.gtimg.cn/music/photo_new/T002R150x150M000' + album.mid +' .jpg? max_age=2592000'

This.addPlayingSongs (song)

}

}

Copy the code

In the end, instead of updating the global variable directly, we called a new method, because all the previous clicks updated the entire playlist, and when we clicked on a song, we wanted to add the song to the existing list instead of emptying it first.

AddPlayingSongs: function (song) {

Var playingSongs = app.globalData.playList; / / get the current playlist

Var index =-1

If (typeof playingSongs = = 'undefined') {/ / determine whether the list is empty

PlayingSongs = []

PlayingSongs.push (song)

App.setGlobalData ({/ / if it is empty, update the global variable directly

PlayList: playingSongs

PlayIndex: 0

});

} if else {/ / is not empty, let's first determine whether the current list contains the selected songs.

For (var I = 0; I < playingSongs.length; iTunes +) {/ / traverses the entire list

Var item = playingSongs [I]

If (item.mid = = song.mid) {/ / if you find the same mid (that is, the same song)

Index = I; / / get the serial number of this song in the list

Break

}

}

If (index! =-1) {/ / the song already exists

App.setGlobalData ({

PlayIndex: index / / update the current playback sequence number with the sequence number we obtained

});

} situations where else {/ / does not exist

PlayingSongs.push (song)

Index = playingSongs.length-1; / / add the song to the playlist and change the playsequence number to the last item in the list

App.setGlobalData ({

PlayList: playingSongs

PlayIndex: index

});

}

}

Wx.navigateTo ({

Url:'.. / play/play'

});

}

This is the end of the article on "how to write the code for WeChat Mini Programs to make a music player". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to write the code for WeChat Mini Programs to make a music player". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.