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

Today, the editor will share with you the relevant knowledge about how WeChat Mini Programs achieves the music charts. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Ranking page

Let's first add the network request function to services/music.js:

Function getTopMusic (callback) {

Var data = {

Format: 'json'

G_tk: 5381

Uin: 0

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_myqq_toplist.fcg',

Data: data

Header: {

'Content-Type': 'application/json'

}

Success: function (res) {

If (res.statusCode = = 200) {

Callback (res.data)

} else {

}

}

});

}

Module.exports = {

GetRecommendMusic:getRecommendMusic

GetTopMusic:getTopMusic

}

Copy the code

The JSON format data returned here is:

{

"code": 0

"subcode": 0

"message":

"default": 0

"data": {

"topList": [

{

"id": 4

"listenCount": 20000000

"picUrl": "https://cache.yisu.com/upload/information/20220117/465/14207.jpg","

"songList": [

{

"singername": "Zhao Lei"

"songname": "Live"

}

{

"singername": "Xue Zhiqian / Ouyang Nana"

"songname": "Live"

}

{

"singername": "Dimash Dimash"

"songname": "Live"

}

]

"topTitle": "Peak popularity Index"

"type": 0

}

{

"id": 26

"listenCount": 19900000

"picUrl": "https://cache.yisu.com/upload/information/20220117/465/14208.jpg","

"songList": [

{

"singername": "Li Yugang"

"songname": "I happened to meet you"

}

{

"singername": "Jay Chou"

"songname": "confession Balloon"

}

{

"singername": "Zhang Jie"

"songname": "three generations"

}

]

"topTitle": "Top Song"

"type": 0

}

...

]

}

}

Copy the code

You can see that two categories of rankings are shown here: "Peak Pop Index" and "Top list Hot songs". The other 12 categories are omitted for space reasons, so 14 categories are actually returned, each containing titles ("topTitle"), icons and picture addresses ("picUrl"), and top three song lists ("songList"). Therefore, the final page we want to achieve should be shown in the figure.

In the same way as in the previous section, we added the topList array, called the network request, and used callback functions to assign values to topList.

/ / reference the network request file

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

/ / obtain an application instance

Var app = getApp ()

Page ({

Data: {

IndicatorDots: true

Autoplay: true

Interval: 5000

Duration: 1000

RadioList: []

Slider: []

MainView: 1

TopList: []

}

OnLoad: function () {

Var that = this

MusicService.getRecommendMusic (that.initPageData)

MusicService.getTopMusic (that.initTopList)

}

...

InitTopList: function (data) {

Var self = this

If (data.code = = 0) {

Self.setData ({

TopList: data.data.topList

})

}

}

...

})

Copy the code

The ranking page consists mainly of lists, so use wx:for to create a view for each topList item, binding the id for each item and the click event topListTap.

...

Copy the code

Each item in the list consists of pictures (the data source is picUrl) and a list of the top three songs (the data source is songList). We add this part to the ellipsis position.

...

Copy the code

The picture defines the attribute aspectFit, that is, on the premise of maintaining the aspect ratio, zoom the picture so that the picture is displayed in the container.

Finally, we add a list of songs, each of which consists of text (song name-singer) and pictures that represent rankings. This picture is a local picture and is saved under resources/images under the name 1.pngMagol 2.pngMagne3.png. So the final code for this part is:

{{item.songname}}-{{item.singername}}

Copy the code

The required format file code is:

. top-view {

Background:#f7f7f7

Padding:20rpx

}

. top-item {

Display:-webkit-box

Height:200rpx

Margin-bottom:20rpx

Background:#fff

Overflow: hidden

}

.top-item-img {

Display:block

Position:relative

Width:200rpx

Height:200rpx

}

.top-item-info {

Margin:0 10rpx 0 20rpx

Flex-direction:column

}

.top-item-list {

White-space:nowrap

}

. top-icon {

Margin-top:16rpx

Width:40rpx

Height:40rpx

}

.top-item-text {

Margin-bottom: 10rpx

Font-size:40rpx

}

Copy the code

When the page is complete, add the code for the click event in index.js:

TopListTap: function (e) {

Wx.navigateTo ({

Url:'.. / toplist/toplist'

})

}

Copy the code

This takes you to the list page after clicking, but this does not complete our request, because the list page has no idea which category we clicked on. In order for the list page to get this information, we need to pass the id of the class, which requires us to add a global variable to the app.js.

/ / app.js

App ({

OnLaunch: function () {

/ / call API to get data from the local cache

Var logs = wx.getStorageSync ('logs') | | []

Logs.unshift (Date.now ())

Wx.setStorageSync ('logs', logs)

}

GetUserInfo:function (cb) {

Var that = this

If (this.globalData.userInfo) {

Typeof cb = = "function" & & cb (this.globalData.userInfo)

} else {

/ / call login API

Wx.login ({

Success: function () {

Wx.getUserInfo ({

Success: function (res) {

That.globalData.userInfo = res.userInfo

Typeof cb = = "function" & & cb (that.globalData.userInfo)

}

})

}

})

}

}

/ / here is the code we added!

SetGlobalData: function (obj) {

For (var n in obj) {

This.globalData [n] = obj [n]

}

}

GlobalData: {

UserInfo:null

}

})

Copy the code

A method is defined so that we can add data to the globalData, and then we just need to call this method in the click event:

TopListTap: function (e) {

Var _ dataSet = e.currentTarget.dataset; / / get the data of the clicked view

App.setGlobalData ({/ / transfer the id in the data to globaldata

TopListId: _ dataSet.id

});

Wx.navigateTo ({

Url:'.. / toplist/toplist'

})

}

These are all the contents of the article "how to achieve Music ranking by WeChat Mini Programs". Thank you for your reading. I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.