微信小程序音樂(lè)播放器,音樂(lè)播放器小程序制作步驟（音樂(lè)排行榜）

2018-03-21

導(dǎo)讀：同上一小節(jié)所做的一樣，我們先在services/music.js里添加網(wǎng)絡(luò)請(qǐng)求函數(shù)...

　　排行頁(yè)

　　獲取排行榜的網(wǎng)絡(luò)請(qǐng)求地址：

　　http://c.y.qq.com/v8/fcg-bin/fcg_myqq_toplist.fcg

　　同上一小節(jié)所做的一樣，我們先在services/music.js里添加網(wǎng)絡(luò)請(qǐng)求函數(shù)：

function getTopMusic(callback){
var data = {
format: 'json',
g_tk: 5381,
uin: 0,
inCharset: 'utf-8',
outCharset: 'utf-8',
notice: 0,
platform: 'h5',
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
}

復(fù)制代碼

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

{
"code": 0,
"subcode": 0,
"message": "",
"default": 0,
"data": {
"topList": [
{
"id": 4,
"listenCount": 20000000,
"picUrl": "http://y.gtimg.cn/music/common/upload/iphone_order_channel/toplist_4_300_200669704.jpg",
"songList": [
{
"singername": "趙雷",
"songname": "理想 (Live)"
},
{
"singername": "薛之謙/歐陽(yáng)娜娜",
"songname": "小幸運(yùn) (Live)"
},
{
"singername": "迪瑪希Dimash",
"songname": "秋意濃 (Live)"
}
],
"topTitle": "巔峰榜·流行指數(shù)",
"type": 0
},
{
"id": 26,
"listenCount": 19900000,
"picUrl": "http://y.gtimg.cn/music/common/upload/iphone_order_channel/toplist_26_300_109191643.jpg",
"songList": [
{
"singername": "李玉剛",
"songname": "剛好遇見(jiàn)你"
},
{
"singername": "周杰倫",
"songname": "告白氣球"
},
{
"singername": "張杰",
"songname": "三生三世"
}
],
"topTitle": "巔峰榜·熱歌",
"type": 0
},
...
]
}
}

復(fù)制代碼

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

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

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

復(fù)制代碼

　　排行頁(yè)主要由列表組成，所以使用wx:for為topList每一項(xiàng)創(chuàng)建view,綁定每一項(xiàng)的id和點(diǎn)擊事件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>

復(fù)制代碼

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

<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>

復(fù)制代碼

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

　　最后我們添加歌曲列表，每一項(xiàng)由文字(歌曲名-歌手)以及表示排名的圖片組成。這個(gè)圖片為本地圖片，保存在resources/images下，名稱(chēng)為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>

復(fù)制代碼

　　需要的格式文件代碼為：

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

復(fù)制代碼

　　頁(yè)面完成后，在index.js里添加點(diǎn)擊事件的代碼：

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

復(fù)制代碼

　　這樣在點(diǎn)擊之后就進(jìn)入了列表頁(yè)面，但這樣還不能完成我們的要求，因?yàn)檫@樣列表頁(yè)完全不知道我們點(diǎn)擊了哪一類(lèi)。為了讓列表頁(yè)獲取這個(gè)信息，我們需要把類(lèi)的id傳過(guò)去，這就需要我們?cè)赼pp.js里添加一個(gè)全局變量。

//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
}
})

復(fù)制代碼

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

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

復(fù)制代碼

　　上一節(jié)：微信小程序小白項(xiàng)目開(kāi)發(fā)案例之音樂(lè)播放器——推薦頁(yè)

第二部分：如何開(kāi)通一個(gè)小商店