微信小程序怎么實現(xiàn)音樂排行榜

發(fā)布時間：2022-03-09 10:15:47 來源：億速云閱讀：644 作者：iii 欄目：開發(fā)技術

今天小編給大家分享一下微信小程序怎么實現(xiàn)音樂排行榜的相關知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

　　排行頁

我們先在services/music.js里添加網(wǎng)絡請求函數(shù)：

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
}

復制代碼

　　這里返回的JSON格式數(shù)據(jù)為：

{
"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": "趙雷",
"songname": "理想 (Live)"
},
{
"singername": "薛之謙/歐陽娜娜",
"songname": "小幸運 (Live)"
},
{
"singername": "迪瑪希Dimash",
"songname": "秋意濃 (Live)"
}
],
"topTitle": "巔峰榜·流行指數(shù)",
"type": 0
},
{
"id": 26,
"listenCount": 19900000,
"picUrl": "https://cache.yisu.com/upload/information/20220117/465/14208.jpg",
"songList": [
{
"singername": "李玉剛",
"songname": "剛好遇見你"
},
{
"singername": "周杰倫",
"songname": "告白氣球"
},
{
"singername": "張杰",
"songname": "三生三世"
}
],
"topTitle": "巔峰榜·熱歌",
"type": 0
},
...
]
}
}

復制代碼

　　可以看到這里顯示了兩類排行榜：“巔峰榜·流行指數(shù)”與“巔峰榜·熱歌”，篇幅原因省去了其他12類，所以實際返回的排行榜類別為14類，每一類包涵標題("topTitle")，該類的圖標圖片地址("picUrl")，以及前三位的歌曲列表("songList")。因此，我們最后要達成的頁面應該為圖所示。

　　同理上一節(jié)內(nèi)容，我們新增topList數(shù)組，調(diào)用網(wǎng)絡請求，使用回調(diào)函數(shù)為topList賦值。

//引用網(wǎng)絡請求文件
var MusicService = require('../../services/music');
//獲取應用實例
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
})
}
},
...
})

復制代碼

　　排行頁主要由列表組成，所以使用wx:for為topList每一項創(chuàng)建view,綁定每一項的id和點擊事件topListTap。

<view class="top-view" hidden="{{currentView != 2}}">
<view class="top-item" wx:for="{{topList}}" wx:key="unique" data-id="{{item.id}}" bindtap="topListTap">
...
</view>
</view>

復制代碼

　　列表的每一項由圖片(數(shù)據(jù)源為picUrl)以及前三名歌曲列表(數(shù)據(jù)源為songList)組成。我們把這一部分加入到省略號位置。

<view class="top-view" hidden="{{currentView != 2}}">
<view class="top-item" wx:for="{{topList}}" wx:key="unique" data-id="{{item.id}}" bindtap="topListTap">
<image class="top-item-img" mode="aspectFit" src="{{item.picUrl}}" />
<view class="top-item-info">
...
</view>
</view>
</view>

復制代碼

　　圖片定義了屬性aspectFit，即在保持縱橫比的前提下，縮放圖片，使圖片在容器內(nèi)都顯示出來。

　　最后我們添加歌曲列表，每一項由文字(歌曲名-歌手)以及表示排名的圖片組成。這個圖片為本地圖片，保存在resources/images下，名稱為1.png,2.png,3.png。所以這部分最終的代碼為：

<view class="top-view" hidden="{{currentView != 2}}">
<view class="top-item" wx:for="{{topList}}" wx:key="unique" data-id="{{item.id}}" bindtap="topListTap">
<image class="top-item-img" mode="aspectFit" src="{{item.picUrl}}" />
<view class="top-item-info">
<view class="top-item-list" wx:for="{{item.songList}}" wx:key="unique">
<image class="top-icon" src="../../resources/images/{{index+1}}.png" />
<text class="top-item-text">{{item.songname}}-{{item.singername}}</text>
</view>
</view>
</view>
</view>

復制代碼

　　需要的格式文件代碼為：

.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;
}

復制代碼

　　頁面完成后，在index.js里添加點擊事件的代碼：

topListTap: function (e) {
wx.navigateTo({
url: '../toplist/toplist'
})
},

復制代碼

　　這樣在點擊之后就進入了列表頁面，但這樣還不能完成我們的要求，因為這樣列表頁完全不知道我們點擊了哪一類。為了讓列表頁獲取這個信息，我們需要把類的id傳過去，這就需要我們在app.js里添加一個全局變量。

//app.js
App({
onLaunch: function () {
//調(diào)用API從本地緩存中獲取數(shù)據(jù)
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{
//調(diào)用登錄接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
//這里是我們添加的代碼!!!
setGlobalData: function (obj) {
for(var n in obj) {
this.globalData[n] = obj[n];
}
},
globalData:{
userInfo:null
}
})

復制代碼

　　這里定義了一個方法，讓我們可以向globalData里添加數(shù)據(jù)，之后我們只需在點擊事件里調(diào)用這個方法就可以了：

topListTap: function (e) {
var _dataSet = e.currentTarget.dataset; //獲取點擊的view的數(shù)據(jù)
app.setGlobalData({ //將數(shù)據(jù)里的id傳給globaldata
topListId: _dataSet.id
});
wx.navigateTo({
url: '../toplist/toplist'
})
},

以上就是“微信小程序怎么實現(xiàn)音樂排行榜”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

微信小程序怎么實現(xiàn)音樂排行榜

猜你喜歡

最新資訊

相關推薦

相關標簽