微信小程序音樂(lè)播放器,音樂(lè)播放器小程序制作步驟(相似頁(yè)面)
專輯的頁(yè)面與我們剛剛完成的排行列表很相似,除了部分文字的變化外就是多了簡(jiǎn)介這一部分。
網(wǎng)絡(luò)請(qǐng)求的函數(shù)為:
- function getAlbumInfo(id,callback){
- var data = {
- albummid: albummid,
- g_tk: 5381,
- uin: 0,
- format: 'json',
- 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_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
- }
頁(yè)面的布局代碼為:
- <view class="list-top">
- <view class="top-info">
- <view class="top-info-inner">
- <view class="top-info-text">
- <view class="top-info-title">{{albumInfo.name}}</view>
- <view class="top-info-base">
- <text>{{albumInfo.singername}}</text>
- <text style="margin-left: 5px;">{{albumInfo.aDate}}</text>
- <text style="margin-left:10px;">{{albumInfo.genre}}</text>
- </view>
- </view>
- <view class="top-play"></view>
- </view>
- </view>
- <image class="top-img" mode="aspectFit" src="{{coverImg}}"></image>
- <view class="top-back"></view>
- </view>
- <view class="song-list" style="background:{{listBgColor}}">
- <view class="song-item" wx:for="{{albumInfo.list}}" data-data="{{item.data}}" data-mid="{{item.songmid}}">
- <text class="song-index">{{index+1}}</text>
- <view class="song-item-title">{{item.songname}}</view>
- <view class="song-item-text">
- <block wx:for="{{item.singer}}">
- <block wx:if="{{index!=0}}">|</block>
- {{item.name}}
- </block>
- </view>
- </view>
- </view>
- <view class="desc" style="background:{{listBgColor}}">
- <view class="desc-title">簡(jiǎn)介</view>
- <text>{{albumInfo.desc}}</text>
- </view>
簡(jiǎn)介部分的格式文件:
- .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;
- }
加載數(shù)據(jù)的代碼為:
- var MusicService = require('../../services/music');
- var app = getApp()
- Page({
- data: {
- albumInfo: {},
- coverImg: '',
- },
- onLoad: function (options) {
- // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
- 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});
- }
- },
- })
這里的點(diǎn)擊事件與前文相同,就不再重復(fù)了。
另外,我們?cè)谑醉?yè)里未完成的兩個(gè)點(diǎn)擊事件,現(xiàn)在也可以完成了。先看電臺(tái)的點(diǎn)擊事件,這個(gè)事件與我們剛剛完成的一樣,具體代碼為:
- 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; i++) {
- 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
- });
- }
- });
- },
這里面getRadioMusicList為網(wǎng)絡(luò)請(qǐng)求,具體代碼為:
- 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: 'h5',
- 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
- }
另一部分為搜索結(jié)果里歌曲的點(diǎn)擊事件
- 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);
- }
- },
前面的內(nèi)容與我們寫過(guò)的一樣,最后我們沒(méi)有直接更新全局變量而是調(diào)用了一個(gè)新方法,因?yàn)榍拔乃械狞c(diǎn)擊事件都更新了整個(gè)播放列表,而我們點(diǎn)擊某一首歌曲時(shí),我們希望添加這首歌到已有的列表中,而不是先清空它。
- addPlayingSongs: function (song) {
- var playingSongs = app.globalData.playList; //獲取當(dāng)前的播放列表
- var index = -1;
- if (typeof playingSongs === 'undefined') { //判斷列表是否為空
- playingSongs = [];
- playingSongs.push(song);
- app.setGlobalData({ //如果是空的話,直接更新全局變量
- playList: playingSongs,
- playIndex: 0
- });
- } else { //不為空的話我們先判斷當(dāng)前列表是否包含選定歌曲
- for (var i = 0; i < playingSongs.length; i++) { //遍歷整個(gè)列表
- var item = playingSongs[i];
- if (item.mid == song.mid) { //如果發(fā)現(xiàn)有mid相同的(即同一首歌)
- index = i; //獲取這首歌在列表里的序號(hào)
- break;
- }
- }
- if (index != -1) { //歌曲已存在
- app.setGlobalData({
- playIndex: index //用我們獲取的序號(hào)更新當(dāng)前播放序號(hào)
- });
- } else { //不存在的情況
- playingSongs.push(song);
- index = playingSongs.length - 1; //將歌曲加入播放列表,播放序號(hào)改為列表最后一項(xiàng)
- app.setGlobalData({
- playList: playingSongs,
- playIndex: index
- });
- }
- }
- wx.navigateTo({
- url: '../play/play'
- });
- },
上一節(jié):微信小程序小白項(xiàng)目開(kāi)發(fā)案例之音樂(lè)播放器-頁(yè)面渲染
下一節(jié):微信小程序小白項(xiàng)目開(kāi)發(fā)案例之音樂(lè)播放器—音樂(lè)播放頁(yè)
第二部分:如何開(kāi)通一個(gè)小商店