溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下微信小程序怎么實現音樂排行榜的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
排行頁
我們先在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
}
復制代碼
這里返回的JSON格式數據為：
{
"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": "巔峰榜·流行指數",
"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
},
...
]
}
}
復制代碼
可以看到這里顯示了兩類排行榜：“巔峰榜·流行指數”與“巔峰榜·熱歌”，篇幅原因省去了其他12類，所以實際返回的排行榜類別為14類，每一類包涵標題("topTitle")，該類的圖標圖片地址("picUrl")，以及前三位的歌曲列表("songList")。因此，我們最后要達成的頁面應該為圖所示。
同理上一節內容，我們新增topList數組，調用網絡請求，使用回調函數為topList賦值。
//引用網絡請求文件
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每一項創建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>
復制代碼
列表的每一項由圖片(數據源為picUrl)以及前三名歌曲列表(數據源為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，即在保持縱橫比的前提下，縮放圖片，使圖片在容器內都顯示出來。
最后我們添加歌曲列表，每一項由文字(歌曲名-歌手)以及表示排名的圖片組成。這個圖片為本地圖片，保存在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 () {
//調用API從本地緩存中獲取數據
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{
//調用登錄接口
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里添加數據，之后我們只需在點擊事件里調用這個方法就可以了：
topListTap: function (e) {
var _dataSet = e.currentTarget.dataset; //獲取點擊的view的數據
app.setGlobalData({ //將數據里的id傳給globaldata
topListId: _dataSet.id
});
wx.navigateTo({
url: '../toplist/toplist'
})
},
以上就是“微信小程序怎么實現音樂排行榜”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
