舟山闪爸电子技术有限公司

產(chǎn)品中心
更多服務(wù)

微信小程序音樂播放器,音樂播放器小程序制作步驟（相似頁面）

—— 2018 ——
03/21
00:00

來源：

作者：未知

閱讀：0

欄目：小程序開發(fā)

2018/3/21 0:00:00 來源：不詳 作者：未知

　　

　　專輯的頁面與我們剛剛完成的排行列表很相似，除了部分文字的變化外就是多了簡介這一部分。

　　

　　網(wǎng)絡(luò)請求的函數(shù)為：

  1. function getAlbumInfo(id,callback){
  2.     var data = {
  3.             albummid: albummid,
  4.             g_tk: 5381,
  5.             uin: 0,
  6.             format: 'json',
  7.             inCharset: 'utf-8',
  8.             outCharset: 'utf-8',
  9.             notice: 0,
  10.             platform: 'h5',
  11.             needNewCode: 1,
  12.             _: Date.now()
  13.         };
  14.         wx.request({
  15.             url: 'http://c.y.qq.com/v8/fcg-bin/fcg_v8_album_info_cp.fcg',
  16.             data: data,
  17.             header: {
  18.                 'Content-Type': 'application/json'
  19.             },
  20.             success: function (res) {
  21.                 console.log(res);
  22.                 if (res.statusCode == 200) {
  23.                     callback(res.data);
  24.                 } else {
  25.  
  26.                 }
  27.             }
  28.         });
  29. }
  30.  
  31. module.exports = {
  32.   ...
  33.   getAlbumInfo:getAlbumInfo
  34. }
復(fù)制代碼

 

　　頁面的布局代碼為：

  1. <view class="list-top">
  2.   <view class="top-info">
  3.     <view class="top-info-inner">
  4.       <view class="top-info-text">
  5.         <view class="top-info-title">{{albumInfo.name}}</view>
  6.         <view class="top-info-base">
  7.           <text>{{albumInfo.singername}}</text>
  8.           <text style="margin-left: 5px;">{{albumInfo.aDate}}</text>
  9.           <text style="margin-left:10px;">{{albumInfo.genre}}</text>
  10.         </view>
  11.       </view>
  12.       <view class="top-play"></view>
  13.     </view>
  14.   </view>
  15.   <image class="top-img" mode="aspectFit" src="{{coverImg}}"></image>
  16.   <view class="top-back"></view>
  17. </view>
  18. <view class="song-list" style="background:{{listBgColor}}">
  19.   <view class="song-item" wx:for="{{albumInfo.list}}" data-data="{{item.data}}" data-mid="{{item.songmid}}">
  20.     <text class="song-index">{{index+1}}</text>
  21.     <view class="song-item-title">{{item.songname}}</view>
  22.     <view class="song-item-text">
  23.       <block wx:for="{{item.singer}}">
  24.         <block wx:if="{{index!=0}}">|</block>
  25.         {{item.name}}
  26.       </block>
  27.     </view>
  28.   </view>
  29. </view>
  30. <view class="desc" style="background:{{listBgColor}}">
  31.   <view class="desc-title">簡介</view>
  32.   <text>{{albumInfo.desc}}</text>
  33. </view>
復(fù)制代碼

 

　　簡介部分的格式文件：

  1. .desc {
  2.   box-sizing: border-box;
  3.   font-size: 14px;
  4.   padding: 40px 10px;
  5.   color: #fff;
  6.   line-height: 20px;
  7. }
  8.  
  9. .desc-title {
  10.   text-align: center;
  11.   width: 100%;
  12.   font-size: 16px;
  13.   margin-bottom: 20px;
  14. }
復(fù)制代碼

 

　　加載數(shù)據(jù)的代碼為：

  1. var MusicService = require('../../services/music');
  2. var app = getApp()
  3.  
  4. Page({
  5.     data: {
  6.         albumInfo: {},
  7.         coverImg: '',
  8.     },
  9.     onLoad: function (options) {
  10.         // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
  11.         var mid = app.globalData.zhidaAlbummid;
  12.         MusicService.getAlbumInfo(mid, this.setPageData)
  13.     },
  14.     setPageData: function (data) {
  15.         if (data.code == 0) {
  16.             var albummid = data.data.mid;
  17.             var img = 'http://y.gtimg.cn/music/photo/mid_album_500/' + albummid.slice(-2, -1) + '/' + albummid.slice(-1) + '/' + albummid + '.jpg'
  18.             this.setData({albumInfo: data.data, coverImg: img});
  19.         }
  20.     },
  21. })
復(fù)制代碼

 

　　這里的點(diǎn)擊事件與前文相同，就不再重復(fù)了。

　　

　　另外，我們在首頁里未完成的兩個點(diǎn)擊事件，現(xiàn)在也可以完成了。先看電臺的點(diǎn)擊事件，這個事件與我們剛剛完成的一樣，具體代碼為：

  1. radioTap: function (e) {
  2.         var dataSet = e.currentTarget.dataset;
  3.         MusicService.getRadioMusicList(dataSet.id, function (data) {
  4.             wx.navigateTo({
  5.                 url: '../play/play'
  6.             });
  7.             if (data.code == 0) {
  8.                 var list = [];
  9.                 var dataList = data.data;
  10.                 for (var i = 0; i < dataList.length; i++) {
  11.                     var song = {};
  12.                     var item = dataList[i];
  13.                     song.id = item.id;
  14.                     song.mid = item.mid;
  15.                     song.name = item.name;
  16.                     song.title = item.title;
  17.                     song.subTitle = item.subtitle;
  18.                     song.singer = item.singer;
  19.                     song.album = item.album
  20.                     song.img = 'http://y.gtimg.cn/music/photo_new/T002R150x150M000' + item.album.mid + '.jpg?max_age=2592000'
  21.                     list.push(song);
  22.                 }
  23.                 app.setGlobalData({
  24.                     playList: list,
  25.                     playIndex: 0
  26.                 });
  27.             }
  28.         });
  29.     },
復(fù)制代碼

 

　　這里面getRadioMusicList為網(wǎng)絡(luò)請求，具體代碼為：

  1. function getRadioMusicList(id,callback){
  2.     var data = {
  3.             labelid: id,
  4.             g_tk: 5381,
  5.             uin: 0,
  6.             format: 'json',
  7.             inCharset: 'utf-8',
  8.             outCharset: 'utf-8',
  9.             notice: 0,
  10.    &nnbsp;        platform: 'h5',
  11.             needNewCode: 1,
  12.             _: Date.now(),
  13.         }
  14.         wx.request({
  15.             url: 'https://c.y.qq.com/v8/fcg-bin/fcg_v8_radiosonglist.fcg',
  16.             data: data,
  17.             header: {
  18.                 'Content-Type': 'application/json'
  19.             },
  20.             success: function (res) {
  21.                 if (res.statusCode == 200) {
  22.                     callback(res.data);
  23.                 } else {
  24.  
  25.                 }
  26.  
  27.             }
  28.         });
  29. }
  30.  
  31. module.exports = {
  32.   ...
  33.   getRadioMusicList:getRadioMusicList
  34. }
復(fù)制代碼

 

　　另一部分為搜索結(jié)果里歌曲的點(diǎn)擊事件

  1. musuicPlay: function (e) {
  2.         var dataSet = e.currentTarget.dataset;
  3.         var playingSongs = app.globalData.playList;
  4.         if (typeof dataSet.index !== 'undefined') {
  5.             var index = dataSet.index;
  6.             var item = this.data.searchSongs[index];
  7.             var song = {};
  8.             var album = {};
  9.             album.mid = item.albummid
  10.             album.id = item.albumid
  11.             album.name = item.albumname;
  12.             album.desc = item.albumdesc
  13.  
  14.             song.id = item.songid;
  15.             song.mid = item.songmid;
  16.             song.name = item.songname;
  17.             song.title = item.songorig;
  18.             song.subTitle = '';
  19.             song.singer = item.singer;
  20.             song.album = album;
  21.             song.time_public = item.time_public;
  22.             song.img = 'http://y.gtimg.cn/music/photo_new/T002R150x150M000' + album.mid + '.jpg?max_age=2592000'
  23.             this.addPlayingSongs(song);
  24.         }
  25.     },
復(fù)制代碼

 

　　前面的內(nèi)容與我們寫過的一樣，最后我們沒有直接更新全局變量而是調(diào)用了一個新方法，因?yàn)榍拔乃械狞c(diǎn)擊事件都更新了整個播放列表，而我們點(diǎn)擊某一首歌曲時，我們希望添加這首歌到已有的列表中，而不是先清空它。

  1. addPlayingSongs: function (song) {
  2.         var playingSongs = app.globalData.playList;         //獲取當(dāng)前的播放列表
  3.         var index = -1;
  4.         if (typeof playingSongs === 'undefined') {          //判斷列表是否為空
  5.             playingSongs = [];
  6.             playingSongs.push(song);
  7.             app.setGlobalData({                         //如果是空的話，直接更新全局變量
  8.                 playList: playingSongs,
  9.                 playIndex: 0
  10.             });
  11.         } else {                                  //不為空的話我們先判斷當(dāng)前列表是否包含選定歌曲
  12.             for (var i = 0; i < playingSongs.length; i++) {    //遍歷整個列表
  13.                 var item = playingSongs[i];
  14.                 if (item.mid == song.mid) {           //如果發(fā)現(xiàn)有mid相同的(即同一首歌)
  15.                     index = i;                     //獲取這首歌在列表里的序號
  16.                     break;
  17.                 }
  18.             }
  19.             if (index != -1) {                   //歌曲已存在
  20.                 app.setGlobalData({   
  21.                     playIndex: index             //用我們獲取的序號更新當(dāng)前播放序號
  22.                 });
  23.             } else {                                    //不存在的情況
  24.                 playingSongs.push(song);
  25.                 index = playingSongs.length - 1;    //將歌曲加入播放列表，播放序號改為列表最后一項(xiàng)
  26.                 app.setGlobalData({
  27.                     playList: playingSongs,
  28.                     playIndex: index
  29.                 });
  30.             }
  31.         }
  32.         wx.navigateTo({
  33.             url: '../play/play'
  34.         });
  35.     },
復(fù)制代碼

 

　　上一節(jié)：微信小程序小白項(xiàng)目開發(fā)案例之音樂播放器-頁面渲染

　　下一節(jié)：微信小程序小白項(xiàng)目開發(fā)案例之音樂播放器—音樂播放頁


【本站聲明】
  1、本站文章中所選用的圖片及文字來源于網(wǎng)絡(luò)以及用戶投稿，由于未聯(lián)系到知識產(chǎn)權(quán)人或未發(fā)現(xiàn)有關(guān)知識產(chǎn)權(quán)的登記，如有知識產(chǎn)權(quán)人并不愿意我們使用，如果有侵權(quán)請立即聯(lián)系。
  2、本網(wǎng)站不對文章中所涉及的內(nèi)容真實(shí)性、準(zhǔn)確性、可靠性負(fù)責(zé)，僅系客觀性描述，如您需要了解該類商品/服務(wù)詳細(xì)的資訊，請您直接與該類商品/服務(wù)的提供者聯(lián)系。


KESION 科汛軟件

KESION 科汛軟件是國內(nèi)領(lǐng)先的在線教育軟件及私域社交電商軟件服務(wù)提供商，長期專注于為企業(yè)提供在線教育軟件及社交電商SaaS平臺解決方案。
公司核心產(chǎn)品云開店SaaS社交電商服務(wù)平臺、在線教育SaaS服務(wù)平臺、教育企業(yè)數(shù)字化SaaS云平臺、企微營銷助手、私有化獨(dú)立部署品牌網(wǎng)校和在線教育咨詢等。

KESION 不斷通過技術(shù)創(chuàng)新，提供產(chǎn)品和服務(wù)，助力企業(yè)向數(shù)字化轉(zhuǎn)型，通過科技驅(qū)動商業(yè)革新，讓商業(yè)變得更智慧！



▼點(diǎn)擊進(jìn)入科汛官網(wǎng)了解更多



熱門標(biāo)簽
微信小程序
上/下篇
換一換相關(guān)推薦
精選內(nèi)容
熱點(diǎn)精選