请选择 进入手机版|继续访问电脑版
设为首页收藏本站
返回列表 发新帖

微信小程序demo之:网易云音乐

  [复制链接]
  • TA的每日心情
    开心
    2016-9-24 20:42
  • 签到天数: 1 天

    [LV.1]初来乍到

    16

    主题

    22

    帖子

    272

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    272
    发表于 2016-11-22 09:27:44  | 显示全部楼层 | 阅读模式
    网易云音乐的demo,展示效果相当的不错。
    下载附件在最底部。
    QQ截图20161122091518.png

    1. var data = require('../../utils/data.js').songs;
    2. var favUtil = require('../../utils/fav.js');
    3. var strRe = /\[(\d{2}:\d{2})\.\d{2,}\](.*)/;

    4. Page({
    5.         data: {
    6.                 toastHidden: true
    7.         },
    8.         onLoad: function(param) {
    9.                 this.setData({
    10.                         currentId: param.id
    11.                 })
    12.                 this.idsMap = wx.getStorageSync('ids') || {};
    13.                 this.idsArr = Object.keys(this.idsMap);
    14.         },
    15.         onReady: function() {
    16.                 this.reload(this.data.currentId);
    17.         },
    18.         onShow: function() {
    19.                 this.animation = wx.createAnimation({
    20.                         duration: 1000,
    21.                         timingFunction: 'ease',
    22.                 });
    23.         },
    24.         onHide: function() {
    25.                 this.clearTurner();
    26.         },
    27.         onUnload: function() {
    28.                 this.clearTurner();
    29.         },
    30.         errorEvent: function(e) {
    31.                 console.log("加载资源失败 code:", e.detail.errMsg);
    32.                 this.reload(this.idsMap[Number(this.data.currentId)].nextid);
    33.         },
    34.         prevEvent: function(e) {
    35.                 this.reload(this.idsMap[Number(this.data.currentId)].preid);
    36.         },
    37.         nextEvent: function(e) {
    38.                 this.reload(this.idsMap[Number(this.data.currentId)].nextid);
    39.         },
    40.         actionEvent: function(e) {
    41.                 var method = this.data.status === 'play' ? 'pause' : 'play';
    42.                 this.setData({
    43.                         status: method,
    44.                         action: {
    45.                                 method: method
    46.                         }
    47.                 });

    48.                 if (method === 'pause') this.clearTurner();
    49.         },
    50.         switchModeEvent: function(e) {
    51.                 var newMode = 'loop';
    52.                 var toastMsg = "列表循环";
    53.                 if (this.data.mode === 'loop') {
    54.                         newMode = 'single';
    55.                         toastMsg = "单曲循环";
    56.                 } else if (this.data.mode === 'single') {
    57.                         newMode = 'random';
    58.                         toastMsg = "随机播放";
    59.                 }
    60.                 this.setData({
    61.                         mode: newMode,
    62.                         toastMsg: toastMsg,
    63.                         toastHidden: false
    64.                 })
    65.         },
    66.         switchbgEvent: function(e) {
    67.                 this.setData({
    68.                         lyricHidden: !this.data.lyricHidden
    69.                 });
    70.         },
    71.         favEvent: function(e) {
    72.                 if (this.data.fav === 'unlike') {
    73.                         this.setData({
    74.                                 favHidden: false
    75.                         });
    76.                         return;
    77.                 }

    78.                 var id = this.data.currentId,
    79.                         fav = wx.getStorageSync('fav') || {},
    80.                         favName = fav[id],
    81.                         favlist = wx.getStorageSync('favlist') || {},
    82.                         favData = favlist[favName];

    83.                 delete fav[id];
    84.                 if (favData) {
    85.                         favData.list.splice(favData.list.indexOf(id), 1);

    86.                         if (favData.list.length) {
    87.                                 favData.picurl = data[favData.list[favData.list.length - 1]].album.picUrl;
    88.                         } else {
    89.                                 favData.picurl = '';
    90.                         }
    91.                 }

    92.                 wx.setStorageSync('fav', fav);
    93.                 wx.setStorageSync('favlist', favlist);

    94.                 this.setData({
    95.                         fav: 'unlike',
    96.                         favlist: favUtil.getFavList()
    97.                 });
    98.         },
    99.         addFavItem: function(e) {
    100.                 this.addFav(e.detail.value);
    101.         },
    102.         favItemTap: function(e) {
    103.                 this.addFav(e.currentTarget.dataset.name);
    104.         },
    105.         actionSheetChange: function(e) {
    106.                 this.setData({
    107.                         favHidden: true
    108.                 });
    109.         },
    110.         timeupdateEvent: function(e) {
    111.                 var t = e.detail.currentTime,
    112.                         d = e.detail.duration,
    113.                         step = this.isEnSong ? 78 : 55,
    114.                         list = this.data.lyricList,
    115.                         cIndex = this.data.currentIndex;

    116.                 if (cIndex < list.length - 1 && t >= list[cIndex + 1].time) {
    117.                         this.animation.translateY(-step * (cIndex + 1)).step();

    118.                         this.setData({
    119.                                 currentTime: t,
    120.                                 currentIndex: cIndex + 1,
    121.                                 animationData: this.animation.export()
    122.                         });
    123.                 }

    124.                 this.setData({
    125.                         per: Math.floor(t / d * 100),
    126.                         timeText: this.formatTime(t),
    127.                         durationText: this.formatTime(d)
    128.                 });

    129.                 if (!this.turner && this.data.status === 'play') {
    130.                         this.turner = setInterval(() => {
    131.                                 this.setData({
    132.                                         deg: this.data.deg + 1,
    133.                                 })
    134.                         }, 50);
    135.                 }
    136.         },
    137.         endEvent: function(e) {
    138.                 this.reload(this.getNextSongId());
    139.         },
    140.         toastChange: function(e) {
    141.                 this.setData({
    142.                         toastHidden: true
    143.                 });
    144.         },
    145.         reload: function(id) {
    146.                 var song = data[id] || {};

    147.                 this.clearTurner();
    148.                 this.animation.translateY(0).step({
    149.                         duration: 1000,
    150.                         delay: 100
    151.                 });
    152.                 this.setData({
    153.                         per: 0,
    154.                         deg: 0,
    155.                         status: 'play',
    156.                         lyricHidden: true,
    157.                         toastHidden: true,
    158.                         favHidden: true,
    159.                         fav: wx.getStorageSync('fav')[id] ? 'liked' : 'unlike',
    160.                         mode: this.data.mode || 'loop',
    161.                         currentId: id,
    162.                         currentTime: '0',
    163.                         currentIndex: -1,
    164.                         timeText: '00:00',
    165.                         durationText: '',
    166.                         animationData: this.animation.export(),
    167.                         title: song.name,
    168.                         picurl: song.album.picUrl,
    169.                         src: song.mp3Url,
    170.                         action: {
    171.                                 method: 'setCurrentTime',
    172.                                 data: 0
    173.                         },
    174.                         lyricList: this.getLyricList(song),
    175.                         favlist: favUtil.getFavList()
    176.                 });

    177.                 wx.setNavigationBarTitle({
    178.                         title: song.name
    179.                 });

    180.                 setTimeout(() => {
    181.                         this.setData({
    182.                                 action: {
    183.                                         method: 'play'
    184.                                 }
    185.                         })
    186.                 }, 100);
    187.         },
    188.         getNextSongId: function() {
    189.                 if (this.data.mode === 'single') {
    190.                         return this.data.currentId;
    191.                 } else if (this.data.mode === 'random') {
    192.                         return idsArr[Math.floor(Math.random() * idsArr.length)]
    193.                 } else if (this.data.mode === 'loop') {
    194.                         return this.idsMap[Number(this.data.currentId)].nextid;
    195.                 }
    196.         },
    197.         getLyricList: function(song) {
    198.                 var obj = {},
    199.                         lyricList = [],
    200.                         zh = song.zh ? song.zh.split('\n') : [],
    201.                         en = song.en ? song.en.split('\n') : [];

    202.                 zh.forEach(function(str) {
    203.                         var arr = str.match(strRe);
    204.                         if (!arr) return;

    205.                         var k = arr[1],
    206.                                 v = arr[2] || '(music)';

    207.                         if (!obj[k]) obj[k] = {};
    208.                         obj[k].zh = v;
    209.                 });
    210.                 if (en.length) {
    211.                         this.isEnSong = true;
    212.                 } else {
    213.                         this.isEnSong = false;
    214.                 }

    215.                 en.forEach(function(str) {
    216.                         var arr = str.match(strRe);
    217.                         if (!arr) return;

    218.                         var k = arr[1],
    219.                                 v = arr[2] || '(music)';

    220.                         if (!obj[k]) obj[k] = {};
    221.                         obj[k].en = v;
    222.                 });

    223.                 for (var t in obj) {
    224.                         var ts = t.split(':');
    225.                         var time = parseInt(ts[0]) * 60 + parseInt(ts[1]);

    226.                         if (lyricList.length) {
    227.                                 lyricList[lyricList.length - 1].endtime = time;
    228.                         }

    229.                         lyricList.push({
    230.                                 time: time,
    231.                                 zh: obj[t].zh,
    232.                                 en: obj[t].en
    233.                         });
    234.                 }

    235.                 return lyricList;
    236.         },
    237.         clearTurner: function() {
    238.                 if (this.turner) {
    239.                         clearInterval(this.turner);
    240.                         this.turner = null;
    241.                 }
    242.         },
    243.         addFav: function(favName) {
    244.                 if (!favName) {
    245.                         return;
    246.                 }

    247.                 var id = this.data.currentId,
    248.                         fav = wx.getStorageSync('fav') || {},
    249.                         favlist = wx.getStorageSync('favlist') || {};

    250.                 fav[id] = favName;
    251.                 if (!favlist[favName]) favlist[favName] = {
    252.                         picurl: '',
    253.                         list: []
    254.                 }

    255.                 var favData = favlist[favName];
    256.                 favData.picurl = data[id].album.picUrl;
    257.                 favData.list.push(id);

    258.                 wx.setStorageSync('fav', fav);
    259.                 wx.setStorageSync('favlist', favlist);

    260.                 this.setData({
    261.                         fav: 'liked',
    262.                         toastMsg: '收藏成功',
    263.                         toastHidden: false,
    264.                         favHidden: true,
    265.                         favlist: favUtil.getFavList()
    266.                 });
    267.         },
    268.         formatTime: function(time) {
    269.                 time = Math.floor(time);
    270.                 var m = Math.floor(time / 60).toString();
    271.                 m = m.length < 2 ? '0' + m : m;

    272.                 var s = (time - parseInt(m) * 60).toString();
    273.                 s = s.length < 2 ? '0' + s : s;

    274.                 return `${m}:${s}`;
    275.         }
    276. })
    复制代码
    下载网易云音乐:
    游客,如果您要查看本帖隐藏内容请回复

    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    1

    帖子

    6

    积分

    新手上路

    Rank: 1

    积分
    6
    发表于 2016-11-22 10:02:43  | 显示全部楼层
    这个帅爆了!下载看一下。谢谢分享。
    回复 支持 1 反对 0

    使用道具 举报

  • TA的每日心情
    开心
    2016-12-1 09:10
  • 签到天数: 8 天

    [LV.3]偶尔看看II

    5

    主题

    37

    帖子

    230

    积分

    中级会员

    Rank: 3Rank: 3

    积分
    230
    发表于 2016-11-22 09:36:03  | 显示全部楼层
    这个帅爆了!下载看一下。谢谢分享。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2016-12-1 09:10
  • 签到天数: 8 天

    [LV.3]偶尔看看II

    5

    主题

    37

    帖子

    230

    积分

    中级会员

    Rank: 3Rank: 3

    积分
    230
    发表于 2016-11-22 09:36:27  | 显示全部楼层
    这个帅爆了!下载看一下。谢谢分享。
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    1

    帖子

    4

    积分

    新手上路

    Rank: 1

    积分
    4
    发表于 2016-11-22 09:38:47  | 显示全部楼层
    wolaile hahahh
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    1

    帖子

    8

    积分

    新手上路

    Rank: 1

    积分
    8
    发表于 2016-11-22 09:39:17  | 显示全部楼层
    good job!!!!!!!!!!!!!!
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    1

    帖子

    4

    积分

    新手上路

    Rank: 1

    积分
    4
    发表于 2016-11-22 09:44:19  | 显示全部楼层
    这个帅爆了!下载看一下。谢谢分享。楼主大大&#128077;
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    1

    帖子

    4

    积分

    新手上路

    Rank: 1

    积分
    4
    发表于 2016-11-22 09:58:02  | 显示全部楼层
    下载看一下。谢谢分享和写代码者。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2016-11-21 10:50
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    10

    帖子

    44

    积分

    新手上路

    Rank: 1

    积分
    44
    发表于 2016-11-22 10:01:41  | 显示全部楼层
    谢谢分享,下载下来借鉴借鉴
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    2

    帖子

    6

    积分

    新手上路

    Rank: 1

    积分
    6
    发表于 2016-11-22 10:04:23  | 显示全部楼层
    微信小程序demo之
    回复 支持 反对

    使用道具 举报

    发表回复

    *滑动验证:
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关于我们
    关于我们
    友情链接
    联系我们
    帮助中心
    网友中心
    微信小程序开发
    微信小程序定制开发
    服务支持
    资源下载
    售后服务
    定制流程
    关注我们
    官方微博
    官方空间
    官方微信
    快速回复 返回顶部 返回列表