找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序开发资源

关注:1587

所属分类: 微信开发 微信小程序开发资源



本版块为微信小程序资源分享区,包括微信小程序开发中可能会用到的各类小程序开发工具、小程序demo源码及开发教程等。

快捷导航www.henkuai.com):微信小程序社区微信小程序导航微信小程序资源下载微信小程序官方课程

[更新动态] 微信小程序小白项目开发案例之音乐播放器-完成相似页面

[复制链接]
查看: 6327|回复: 36
最佳答案
1 

17

主题

21

帖子

825

积分

略知一二

积分
825
 楼主| 发表于 2017-2-16 17:40:28 | 显示全部楼层 |阅读模式
本帖最后由 peoples 于 2017-2-17 16:42 编辑

完成相似页面

专辑的页面与我们刚刚完成的排行列表很相似,除了部分文字的变化外就是多了简介这一部分。

网络请求的函数为:
  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. module.exports = {
  30.   ...
  31.   getAlbumInfo:getAlbumInfo
  32. }
复制代码

页面的布局代码为:
  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>
复制代码

简介部分的格式文件:
  1. .desc {
  2.   box-sizing: border-box;
  3.   font-size: 14px;
  4.   padding: 40px 10px;
  5.   color: #fff;
  6.   line-height: 20px;
  7. }

  8. .desc-title {
  9.   text-align: center;
  10.   width: 100%;
  11.   font-size: 16px;
  12.   margin-bottom: 20px;
  13. }
复制代码

加载数据的代码为:
  1. var MusicService = require('../../services/music');
  2. var app = getApp()

  3. Page({
  4.     data: {
  5.         albumInfo: {},
  6.         coverImg: '',
  7.     },
  8.     onLoad: function (options) {
  9.         // 页面初始化 options为页面跳转所带来的参数
  10.         var mid = app.globalData.zhidaAlbummid;
  11.         MusicService.getAlbumInfo(mid, this.setPageData)
  12.     },
  13.     setPageData: function (data) {
  14.         if (data.code == 0) {
  15.             var albummid = data.data.mid;
  16.             var img = 'http://y.gtimg.cn/music/photo/mid_album_500/' + albummid.slice(-2, -1) + '/' + albummid.slice(-1) + '/' + albummid + '.jpg'
  17.             this.setData({albumInfo: data.data, coverImg: img});
  18.         }
  19.     },
  20. })
复制代码

这里的点击事件与前文相同,就不再重复了。

另外,我们在首页里未完成的两个点击事件,现在也可以完成了。先看电台的点击事件,这个事件与我们刚刚完成的一样,具体代码为:
  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.     },
复制代码

这里面getRadioMusicList为网络请求,具体代码为:
  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.             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. module.exports = {
  29.   ...
  30.   getRadioMusicList:getRadioMusicList
  31. }
复制代码

另一部分为搜索结果里歌曲的点击事件
  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.             song.id = item.songid;
  14.             song.mid = item.songmid;
  15.             song.name = item.songname;
  16.             song.title = item.songorig;
  17.             song.subTitle = '';
  18.             song.singer = item.singer;
  19.             song.album = album;
  20.             song.time_public = item.time_public;
  21.             song.img = 'http://y.gtimg.cn/music/photo_new/T002R150x150M000' + album.mid + '.jpg?max_age=2592000'
  22.             this.addPlayingSongs(song);
  23.         }
  24.     },
复制代码

前面的内容与我们写过的一样,最后我们没有直接更新全局变量而是调用了一个新方法,因为前文所有的点击事件都更新了整个播放列表,而我们点击某一首歌曲时,我们希望添加这首歌到已有的列表中,而不是先清空它。
  1. addPlayingSongs: function (song) {
  2.         var playingSongs = app.globalData.playList;         //获取当前的播放列表
  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 {                                  //不为空的话我们先判断当前列表是否包含选定歌曲
  12.             for (var i = 0; i < playingSongs.length; i++) {    //遍历整个列表
  13.                 var item = playingSongs[i];
  14.                 if (item.mid == song.mid) {           //如果发现有mid相同的(即同一首歌)
  15.                     index = i;                     //获取这首歌在列表里的序号
  16.                     break;
  17.                 }
  18.             }
  19.             if (index != -1) {                   //歌曲已存在
  20.                 app.setGlobalData({   
  21.                     playIndex: index             //用我们获取的序号更新当前播放序号
  22.                 });
  23.             } else {                                    //不存在的情况
  24.                 playingSongs.push(song);
  25.                 index = playingSongs.length - 1;    //将歌曲加入播放列表,播放序号改为列表最后一项
  26.                 app.setGlobalData({
  27.                     playList: playingSongs,
  28.                     playIndex: index
  29.                 });
  30.             }
  31.         }
  32.         wx.navigateTo({
  33.             url: '../play/play'
  34.         });
  35.     },
复制代码

上一节:微信小程序小白项目开发案例之音乐播放器-页面渲染
下一节:微信小程序小白项目开发案例之音乐播放器—音乐播放页

回复

使用道具 举报

最佳答案
0 

0

主题

50

帖子

426

积分

新人求带

积分
426
发表于 2018-1-24 08:58:01 | 显示全部楼层
学习。。。。
回复

使用道具 举报

最佳答案
0 

0

主题

17

帖子

33

积分

新人求带

积分
33
发表于 2018-1-25 00:47:46 | 显示全部楼层
不能充值 啊
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

5

帖子

124

积分

新人求带

积分
124
发表于 2018-3-31 17:58:29 | 显示全部楼层

新人报到
新人报到
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

53

帖子

678

积分

略知一二

积分
678
发表于 2018-4-26 15:28:23 | 显示全部楼层
谢谢您的分享正需要
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

39

帖子

93

积分

新人求带

积分
93
发表于 2018-5-3 10:30:43 | 显示全部楼层
SD卡斯柯达是大卡司杜卡迪 感谢楼主的分享,万分感谢。
回复 支持 反对

使用道具 举报

最佳答案
0 

1

主题

77

帖子

943

积分

略知一二

积分
943
发表于 2018-5-3 12:13:33 | 显示全部楼层
学习下
回复

使用道具 举报

最佳答案
0 

0

主题

3

帖子

60

积分

等待验证会员

积分
60
发表于 2018-5-9 20:09:50 | 显示全部楼层
微信小程序小白项目开发案例之音乐播放器-完成相似页面
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

48

帖子

1463

积分

专家路上

积分
1463
发表于 2018-5-17 11:34:12 | 显示全部楼层
哎呦不错呦
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

48

帖子

1463

积分

专家路上

积分
1463
发表于 2018-5-17 11:34:22 | 显示全部楼层
哎呦不错呦
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com