Repository: HEternally/weChatApp-HMusic Branch: master Commit: b8205d1d5fd4 Files: 47 Total size: 208.3 KB Directory structure: gitextract_rgoq66r_/ ├── README.md ├── app.js ├── app.json ├── app.wxss ├── component/ │ └── playMusic/ │ ├── playMusic.js │ ├── playMusic.json │ ├── playMusic.wxml │ └── playMusic.wxss ├── pages/ │ ├── gedan/ │ │ ├── gedan.js │ │ ├── gedan.json │ │ ├── gedan.wxml │ │ └── gedan.wxss │ ├── index/ │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ ├── logs/ │ │ ├── logs.js │ │ ├── logs.json │ │ ├── logs.wxml │ │ └── logs.wxss │ ├── playSong/ │ │ ├── playSong.js │ │ ├── playSong.json │ │ ├── playSong.wxml │ │ └── playSong.wxss │ ├── rank/ │ │ ├── rank.js │ │ ├── rank.json │ │ ├── rank.wxml │ │ └── rank.wxss │ ├── search/ │ │ ├── search.js │ │ ├── search.json │ │ ├── search.wxml │ │ └── search.wxss │ ├── share/ │ │ ├── share.js │ │ ├── share.json │ │ ├── share.wxml │ │ └── share.wxss │ ├── singer/ │ │ ├── singer.js │ │ ├── singer.json │ │ ├── singer.wxml │ │ └── singer.wxss │ └── top/ │ ├── top.js │ ├── top.json │ ├── top.wxml │ └── top.wxss ├── project.config.json ├── utils/ │ └── util.js └── weui.wxss ================================================ FILE CONTENTS ================================================ ================================================ FILE: README.md ================================================ - 歌曲来源：[QQ音乐][1] 说明 -- - 目前只有体验版，如果有兴趣的同学可以私聊我，我帮您加入，名额有限。（博客标题下方有本人的qq链接） - 因为个人开发者无法发布在线音乐播放小程序，所以开发该小程序目的只为学习小程序开发； - 小程序涉及到到所有歌曲资源都来源于QQ音乐，部分API由本人对QQ音乐接口进行了二次封装（我会另外再写一篇文章专门用来分享API，敬请期待） 编辑器效果展示 ------- - 因为要压缩为GIF格式，所以加快了播放速度并且画质有点差 ![](https://user-gold-cdn.xitu.io/2019/2/13/168e4c0fd4267205?w=377&h=600&f=gif&s=3574312) 真机截图 ---- [操作视频][3] - 推荐页面 ![](https://user-gold-cdn.xitu.io/2019/2/13/168e4c185d5627aa?w=750&h=1334&f=jpeg&s=125261) - [歌手列表][5] ![](https://user-gold-cdn.xitu.io/2019/2/13/168e4c1c8b9eafec?w=750&h=1334&f=jpeg&s=62395) - 各大排行榜 ![](https://user-gold-cdn.xitu.io/2019/2/13/168e4c1eca5749cb?w=750&h=1334&f=jpeg&s=97443) - 搜索页面 ![](https://user-gold-cdn.xitu.io/2019/2/13/168e4c216cb55a4c?w=750&h=1334&f=jpeg&s=74551) - 歌手详情页 ![](https://user-gold-cdn.xitu.io/2019/2/13/168e4c23d2460e6c?w=750&h=1334&f=jpeg&s=68977) - 歌单（排行榜）详情页 ![](https://user-gold-cdn.xitu.io/2019/2/13/168e4c267e539b33?w=750&h=1334&f=jpeg&s=77183) - 播放器页面 ![](https://user-gold-cdn.xitu.io/2019/2/13/168e4c29a7095336?w=750&h=1334&f=jpeg&s=69707) - 分享页面 ![](https://user-gold-cdn.xitu.io/2019/2/13/168e4c2c83d97702?w=750&h=1334&f=jpeg&s=42039) ## 目前实现的功能 ## 1. 歌单 2. 电台 3. 歌曲播放 4. MV播放（最近发现QQ音乐的接口不返回MV数据了，所以这个功能暂时无法展示） 5. [歌手列表][13] 6. 排行榜 7. 歌曲歌手搜索（支持模糊查询） 8. 最近搜索记录 9. 热门搜索词条 10. 歌手详情页 11. 歌单详情页 12. 歌曲分享 13. 查看评论 14. 歌词滚动 15. 最近播放歌曲 ## 接下来准备实现的功能 ## 1. 用户登录 2. 私人FM 3. 增加点赞，评论功能 4. 歌曲播放方式（随机，单曲，循环） 5. 收藏 6. 全局播放器组件 项目目录 ---- ![图片描述][14] 1. comment--自定义组件（播放器组件，开发中） 2. img--存放图片 3. gedan--歌单页 4. index--首页 5. logs--歌手列表页 6. playSong--播放器页 7. rank--排行榜页 8. search--搜索页 9. share--分享页 10. singer--歌手详情页 11. top--歌单详情页 12. app.js--应用程序逻辑 13. app.json--应用程序配置 14. app.wxss--应用程序公共样式 ---------- **app.json** **应用程序配置文件** ``` { "pages": [ "pages/index/index", "pages/logs/logs", "pages/rank/rank", "pages/search/search", "pages/gedan/gedan", "pages/playSong/playSong", "pages/singer/singer", "pages/top/top", "pages/share/share" ],//页面路径列表 "requiredBackgroundModes": [ "audio" ],//需要在后台使用的能力，这里我们使用到了【音乐播放】 "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "HMusic", "navigationBarTextStyle": "black" },//全局到默认窗口表现 "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "推荐" }, { "pagePath": "pages/logs/logs", "text": "歌手" }, { "pagePath": "pages/rank/rank", "text": "排行榜" }, { "pagePath": "pages/playSong/playSong", "text": "播放器" } ], "position": "top" }//tab栏到表现，默认是放在底部，根据position，我们将其设置为顶部显示 } ``` **每个页面都有各自到配置页面，可以对各自页面进行单独对配置** [pageName].json用于指定页面工作时，window的设置： ``` { // 导航条背景色 "navigationBarBackgroundColor": "#fff", // 导航条前景色（只能是white/black） "navigationBarTextStyle": "black", // 导航条文本 "navigationBarTitleText": "HMusic", // 窗口背景颜色 "backgroundColor": "#fff", // 窗口前景色 "backgroundTextStyle": "dark", // 是否开启下拉刷新 "enablePullDownRefresh": false } ``` **app.js应用程序逻辑** ``` // App函数是一个全局函数，用于创建应用程序对象 App({ // ========== 全局数据对象（可以整个应用程序共享） ========== globalData: { ... }, // ========== 应用程序全局方法 ========== method1 (p1, p2) { ... }, method2 (p1, p2) { ... }, // ========== 生命周期方法 ========== // 应用程序启动时触发一次 onLaunch () { ... }, // 当应用程序进入前台显示状态时触发 onShow () { ... }, // 当应用程序进入后台状态时触发 onHide () { ... } }) ``` 欢迎Star[GitHub][15] [博客][16] 各位看官觉得有用的请点个星星 [1]: https://y.qq.com/ [3]: https://github.com/HEternally/weChatApp-HMusic/blob/master/img/QQ20190128-110802-HD.gif [5]: https://juejin.im/post/5b9880dee51d450e7f52d370 [13]: https://juejin.im/post/5b9880dee51d450e7f52d370 [15]: https://github.com/HEternally/weChatApp-HMusic [16]: http://heternally.ka94.com/ ================================================ FILE: app.js ================================================ //app.js App({ onLaunch: function (options) { var that = this; wx.getSystemInfo({ success: function(res) { that.globalData.system = res; }, }) }, onShow(options){ // console.log(options) this.globalData.scene = options.scene; if (options.query.songid) { var songid = [], name = [], shareId = wx.getStorageSync('share_id'); songid.push(parseInt(options.query.songid)); name.push(options.query.name); if (shareId) { // console.log(songid[0], shareId[0]) if (songid[0] != shareId[0]) { this.globalData.changeMusic = true; } else { this.globalData.changeMusic = false; } } wx.setStorage({ key: 'share_id', data: songid, }); wx.setStorage({ key: 'share_name', data: name, }); } }, onHide(){ // console.log('hide') }, globalData: {}, timestampToTime:function(time) { //将时间戳转为日期格式 var date = new Date(time * 1000); var Y = date.getFullYear() + '-'; var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; var D = date.getDate() + ' '; var h = date.getHours() + ':'; var m = date.getMinutes() + ':'; var s = date.getSeconds(); return Y+M+D+h+m+s; }, gePlay:function(id,num) { //播放歌单的全部歌曲 wx.setStorageSync('labelid', id);//将最新歌单id存入缓存 wx.request({ url: '歌单API', data: {}, success: res => { var Data = res.data, code = Data.code; if (code == 0) { var id = Data.songids.split(','), songlist = Data.songlist, music_name = []; for (var i = 0; i < id.length; i++) { id[i] = parseInt(id[i]); music_name.push(songlist[i].songname); } // for(var i =0;i { wx.showToast({ icon: 'none', title: '哎呀！数据出错了，别急，程序猿正在加急修改中', }) } }) } }) ================================================ FILE: app.json ================================================ { "pages": [ "pages/index/index", "pages/logs/logs", "pages/rank/rank", "pages/search/search", "pages/gedan/gedan", "pages/playSong/playSong", "pages/singer/singer", "pages/top/top", "pages/share/share" ], "requiredBackgroundModes": [ "audio" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "HMusic", "navigationBarTextStyle": "black" }, "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "推荐" }, { "pagePath": "pages/logs/logs", "text": "歌手" }, { "pagePath": "pages/rank/rank", "text": "排行榜" }, { "pagePath": "pages/playSong/playSong", "text": "播放器" } ], "position": "top" } } ================================================ FILE: app.wxss ================================================ /**app.wxss**/ @import 'weui.wxss'; .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; /* padding: 200rpx 0; */ box-sizing: border-box; background:#f4f4f4; } .main { width:100%; } .hide { display: none; } .load { position: fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:99; } .load .k-line { display: inline-block; width: 15px; height: 15px; border-radius: 15px; margin-right: 5px; } .load .k-line2-1 { animation: k-loadingA 1.5s 1s infinite; background-color: #F44336; } .load .k-line2-2 { animation: k-loadingA 1.5s .5s infinite; background-color: #E91E63; } .load .k-line2-3 { animation: k-loadingA 1.5s 0s infinite; background-color: #9C27B0; } /* loading动画 */ @keyframes k-loadingA { 0% { height:15px; } 50% { height:35px; } 100% { height:15px; } } page { height:100%; background:#f4f4f4; } #mask { position:fixed; width:100%; height:100%; top:0; left:0; background-color:#000; opacity: 0; z-index:99999; } ================================================ FILE: component/playMusic/playMusic.js ================================================ // component/playMusic/playMusic.js Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { } }) ================================================ FILE: component/playMusic/playMusic.json ================================================ { "component": true, "usingComponents": {} } ================================================ FILE: component/playMusic/playMusic.wxml ================================================ {{currentSong.singer}} {{playingLyric}} ================================================ FILE: component/playMusic/playMusic.wxss ================================================ /* component/playMusic/playMusic.wxss */ ================================================ FILE: pages/gedan/gedan.js ================================================ const app = getApp() Page({ data:{}, onLoad: function (option) { wx.showLoading({ title: '加载中', }) let disstid = option.disstid; this.setData({ disstid:disstid }); this.getGeDan(disstid, 0); wx.showShareMenu(); }, getGeDan(disstid,begin) { //获取歌单歌曲信息，disstid为歌单id，begin为开始号码 wx.request({ url: '歌单API', data: {}, success: res => { wx.hideLoading(); var dataList = this.data.list, data = res.data.cdlist[0], songids = data.songids.split(','), songlist = data.songlist; if (data.cur_song_num < 15) { this.setData({ havaMusic:false }) } else { this.setData({ havaMusic: true }) } if (dataList.songlist) { dataList.songlist = dataList.songlist.concat(songlist); } else { dataList = data; } data.desc = data.desc.replace(/ /g,' '); data.desc = data.desc.replace(/´/g,"'"); data.desc = data.desc.replace(/
/g, "\n"); for(var i = 0;i { wx.showToast({ icon: 'none', title: '哎呀！数据出错了，别急，程序猿正在加急修改中', }); } }) }, MusicFcg(begin) { var data = this.data.MusicFcg; var len = this.data.songids.length; if (len - begin > 15) { data.req_0.param.ids = this.data.songids.slice(begin, parseInt(begin + 15)); data.req_0.param.types = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]; } else { var ll = len - begin; data.req_0.param.types = []; data.req_0.param.ids = this.data.songids.slice(begin); for (var i = 0;i { var tricks = res.data.req_0.data.tracks, songmid = []; for (var i =0;i { // console.log(res); var data= res.data.req_0.data, midurlinfo = data.midurlinfo, pix = data.sip[0], // musicUrl1 = [], mUrl = this.data.musicUrl; for (var i=0;i { wx.showToast({ icon: 'none', title: '哎呀！数据出错了，别急，程序猿正在加急修改中', }); } }) }, error:req=> { wx.showToast({ icon: 'none', title: '哎呀！数据出错了，别急，程序猿正在加急修改中', }); } }) }, getMoreMusic:function(){ var disstid = this.data.disstid, begin = this.data.begin; begin = begin + 15; this.getGeDan(disstid,begin); }, playAll() { var id = this.data.disstid; app.gePlay(id,0); wx.setStorage({ key: 'share_id', data: [], }) }, musicPlay(e){ var num = e.currentTarget.dataset.num, id = this.data.disstid; wx.showLoading({ title: '加载中', }) app.gePlay(id,num); app.globalData.shouldPlay = true; // app.globalData.unload = true; } }) ================================================ FILE: pages/gedan/gedan.json ================================================ {} ================================================ FILE: pages/gedan/gedan.wxml ================================================ {{list.dissname}} {{list.nickname}} 播放量：{{list.visitnum}} 播放全部 歌单 共{{list.songnum}}首 {{item.title}} {{item.album.title}} 点击加载更多歌曲 歌单简介 {{list.desc}} ================================================ FILE: pages/gedan/gedan.wxss ================================================ page { background: #fff; color:#777; } .info_box { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 480rpx; overflow: hidden; color: #fff; background: #fff; } .info_box__bd { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; background: rgba(0,0,0,.5); } .album { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; -webkit-box-sizing: border-box; width: 100%; margin-top: 34rpx; padding: 0 32rpx; overflow: hidden; } .album__media { position: relative; width: 250rpx; margin-right: 20rpx; overflow: hidden; } .album__cover { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; } .album__media::after { content: ""; display: block; padding-top: 100%; } .album__bd { position: relative; -webkit-box-flex: 1; } .album__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 94rpx; line-height: 1.3; overflow: hidden; font-size: 18px; font-weight: 300; } .author { display: -webkit-box; -webkit-box-align: center; margin-top: 16rpx; overflow: hidden; } .author__avatar { display: block; width: 48rpx; height: 48rpx; margin-right: 16rpx; border-radius: 48rpx; } .author__bd { -webkit-box-flex: 1; } .author__name { display: block; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; color: #fff; } .album__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 72rpx; overflow: hidden; margin-top: 16rpx; font-size: 12px; } .opt_box { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; height: 196rpx; padding: 0 32rpx; -webkit-transition: 1s ease-in-out; } .btn_play_all { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; min-width: 260rpx; padding: 0 40rpx; height: 80rpx; overflow: hidden; text-align: center; font-size: 16px; color: #fff; border-radius: 40rpx; background: #31c27c; } .btn_play_all::before { content: ""; display: block; height: 0; width: 0; margin-right: -6rpx; border-color: transparent transparent transparent #fff; border-width: 14rpx 22rpx; border-style: solid; border-radius: 4rpx; } .info_box__bg { position: absolute; top: 0; left: 0; z-index: 3; width: 100%; height: 100%; object-fit: cover; -webkit-transform: scale(1.1) translateZ(0); -webkit-filter: blur(36px); } .wrap { /* position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; padding-bottom: 0; */ overflow: hidden; } .main { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; padding-top: 480rpx; padding-bottom: 100rpx; overflow: hidden; will-change: transform; -webkit-transform: translateZ(0); } .count_box { position: relative; display: -webkit-box; -webkit-box-align: center; height: 108rpx; margin: 0 32rpx -20rpx; } .count_box__desc { font-size: 14px; } .count_box__number { margin-left: 10rpx; } .qui_list { overflow: hidden; } .qui_list__item { position: relative; display: -webkit-box; } .qui_list__bd { position: relative; -webkit-box-flex: 1; display: -webkit-box; -webkit-box-align: center; padding: 20rpx 32rpx; overflow: hidden; } .qui_list__box { -webkit-box-flex: 1; display: -webkit-box; -webkit-box-orient: vertical; } .qui_list__tit { font-size: 16px; color: #000; display: -webkit-box; -webkit-box-align: center; overflow: hidden; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; } .qui_list__desc{ display: -webkit-box; -webkit-box-align: center; overflow: hidden; font-size:12px; } .qui_list__txt { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size:16px; } .check_more { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; height: 64rpx; margin-bottom: 30rpx; font-size: 28rpx; } .qui_tit { position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; -webkit-box-align: center; height: 110rpx; padding: 0 80rpx; overflow: hidden; text-align: center; } .intro { position: relative; margin: 0 32rpx 40rpx; overflow: hidden; text-align: justify; word-wrap: break-word; font-size: 14px; } ================================================ FILE: pages/index/index.js ================================================ const app = getApp() Page({ data: { banner: [], //轮播图 radioList: [], //电台 songList: [], //歌单 loading: false, //是否加载完成 }, onLoad: function() { wx.showShareMenu(); wx.showLoading({ title: '加载中', }); // wx.request({ // url: '首页信息API', // data:{}, // success:res=> { // let data = res.data; // var that = this; // if (data.code == 0) { var data = { "data": { "slider": [{ "linkUrl": "http://y.qq.com/w/album.html?albummid=004ZGlrw3Me8eI", "picUrl": "http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1155264.jpg", "id": 19857 }, { "linkUrl": "http://y.qq.com/w/album.html?albummid=003vVUT83SaF4l", "picUrl": "http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1155138.jpg", "id": 19858 }, { "linkUrl": "https://y.qq.com/m/digitalbum/gold/index.html?openinqqmusic=1_video=true&id=5447522&g_f=shoujijiaodian", "picUrl": "http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1155430.jpg", "id": 19853 }, { "linkUrl": "http://y.qq.com/w/album.html?albummid=000uoyVq093DIY", "picUrl": "http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1155139.jpg", "id": 19859 }, { "linkUrl": "https://y.qq.com/apg/612/index.html?ADTAG=JDT&openinqqmusic=1", "picUrl": "http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1155328.jpg", "id": 19850 }], "radioList": [{ "picUrl": "http://y.gtimg.cn/music/photo/radio/track_radio_199_13_1.jpg", "Ftitle": "热歌", "radioid": 199 }, { "picUrl": "http://y.gtimg.cn/music/photo/radio/track_radio_307_13_1.jpg", "Ftitle": "一人一首招牌歌", "radioid": 307 }], "songList": [{ "songListDesc": "催泪大杀器！盘点演唱会经典万人大合唱", "picUrl": "http://p.qpic.cn/music_cover/1Fr9IFMhWDPeUzWKVEjn3QTL2eX2QziaJmaL0ZAmsvtW71ic9IDUoYzg/300?n=1", "id": "2646688496", "accessnum": 9927141, "songListAuthor": "金青松", "pic_mid": "00333So02drvak", "album_pic_mid": "" }, { "songListDesc": "纳尼？这些华语歌手竟然会唱日语歌！", "picUrl": "http://p.qpic.cn/music_cover/z8wAFqicQ1qhImeiajkrgiaR4hYM3pzsUULFnicXshFXdw9uGkm261Ex9g/300?n=1", "id": "1144416825", "accessnum": 675463, "songListAuthor": "风吹草地", "pic_mid": "0013j8zs1jRnLQ", "album_pic_mid": "" }, { "songListDesc": "精选内地十大民谣歌手代表作", "picUrl": "http://p.qpic.cn/music_cover/hVUsfUFG2DV466URqw7PT7X66OknPIhic2mKDgicawN4qThIR7yhYY1w/300?n=1", "id": "2043041547", "accessnum": 1295560, "songListAuthor": "１'s ヽ", "pic_mid": "004bFmjW2PXSqF", "album_pic_mid": "0032YJyg2yF6Dd" }, { "songListDesc": "2016billboard嘻哈榜", "picUrl": "http://p.qpic.cn/music_cover/tkduvk4dwqBxwzZhsNe0nwkwyiaLHVkxtla7REsX0yNkhibOH3Bdb2og/300?n=1", "id": "2040362185", "accessnum": 1161101, "songListAuthor": "CREAMSAUCEONMEBABY", "pic_mid": "000cL0xT2csmd7", "album_pic_mid": "001iJq1y1Uq3zV" }, { "songListDesc": "浮光掠影：ACG纯音乐赏析合辑", "picUrl": "http://p.qpic.cn/music_cover/XMPAjfs5uwGZdWII3osvAvCRyNWx8Pqy5Yice41OCZlBhLtk0p0icNvg/300?n=1", "id": "1723063372", "accessnum": 998181, "songListAuthor": "黎桐同", "pic_mid": "000xFtbN1l8ye8", "album_pic_mid": "002egQPg3DWcCS" }, { "songListDesc": "trip-hop单曲大推荐", "picUrl": "http://y.gtimg.cn/music/photo_new/T005R600x600M000002CJKAY1LKpcz.jpg?n=1", "id": "3482605622", "accessnum": 357712, "songListAuthor": "哑忍", "pic_mid": "", "album_pic_mid": "004aOQhn3PPOpK" }] } }, slider = data.data.slider, radioList = data.data.radioList, songList = data.data.songList, radioId = [] for (var i = 0; i < radioList.length; i++) { radioId.push(radioList[i].radioid); } this.setData({ banner: slider, radioList: radioList, songList: songList, loading: true }); app.globalData.radioId = radioId; wx.hideLoading(); // } // }, // fail:req=> { // wx.showToast({ // icon:'none', // title: '哎呀！数据出错了，别急，程序猿正在加急修改中', // }) // } // }) }, go_radio: function(e) { wx.showLoading({ title: '加载中', }); var labelid = e.currentTarget.dataset.id; wx.request({ url: '电台API', method: 'get', data: {}, success: res => { var Data = res.data, code = Data.code; if (code == 0) { var radioData = Data.data, id = [], music_name = []; for (var i = 0; i < radioData.length; i++) { id.push(radioData[i].id); music_name.push(radioData[i].name); } wx.setStorageSync('song_id', id); //将电台随机生成的歌曲id存入缓存 wx.setStorageSync('music_name', music_name); //将随机生成的歌曲信息存入缓存 wx.setStorageSync('num', 0); //播放第一首歌 wx.setStorageSync('labelid', labelid); //写入新的广播id app.globalData.shouldPlay = true; //重新请求音乐接口，因为每次获取到的广播歌曲都是不同的 // app.globalData.unload = true; wx.switchTab({ url: '../playSong/playSong', }) } else { wx.showToast({ icon: 'none', title: '哎呀！数据出错了，别急，程序猿正在加急修改中', }) } }, error: req => { wx.showToast({ icon: 'none', title: '哎呀！数据出错了，别急，程序猿正在加急修改中', }) } }) }, selectHot: function(e) { let id = e.currentTarget.dataset.id; wx.showLoading({ title: '加载中', }); app.gePlay(id, 0); }, go_search() { //跳到搜索页 wx.navigateTo({ url: '../search/search', }) }, getGedan(e) { //跳到歌单详情页 let id = e.currentTarget.dataset.id; //跳转到歌单页面 wx.navigateTo({ url: '../gedan/gedan?disstid=' + id, }) } }) ================================================ FILE: pages/index/index.json ================================================ { } ================================================ FILE: pages/index/index.wxml ================================================ 电台 {{item.Ftitle}} 热门歌单 {{item.songListDesc}} {{item.songListAuthor}} {{item.accessnum}} ================================================ FILE: pages/index/index.wxss ================================================ /**index.wxss**/ page { width: 100%; } .page__bd { width:100%; } .main { width:100%; /* margin-top:48px; */ } .banner { width:100%; } .banner .banner-image { width:100%; height:300rpx; } .mod_radio_list { width:95%; margin:10px; } .list_title { font-size:16px; color:#000; margin-bottom:11px; font-weight: normal; } .radio_wrapper { overflow: hidden; margin-right: -10px; } .radio_wrapper .radio_img { position:relative; float:left; width:48%; padding-right: 4px; margin-bottom:10px; } .radio_wrapper .radio_img .radio_image { width:100%; height:410rpx; } .radio_wrapper .radio_img .radio_icon { position: absolute; width:40rpx; height:40rpx; left:14rpx; bottom:100rpx; } .radio_wrapper .radio_img .radio_play { position: absolute; width:48rpx; height:48rpx; right:14rpx; bottom:100rpx; } .radio_wrapper .radio_img .radio_text { position:absolute; width:90%; height: 36px; line-height: 18px; bottom:0; padding: 2px 7px 5px; background:#fff; font-size:14px; white-space: normal; word-wrap: break-word; } .radio_wrapper .radio_img .radio_text2 { position:absolute; bottom: 0; z-index:2; font-size:12px; width:90%; padding: 0 7px 5px; white-space: normal; word-wrap: break-word; } .radio_wrapper .radio_img .radio_num { position: absolute; color:#fff; left:60rpx; bottom:100rpx; font-size:12px; font-weight: bold; } .clearfix { clear:all; } ================================================ FILE: pages/logs/logs.js ================================================ //logs.js const util = require('../../utils/util.js') const app = getApp() const TITLE_HEIGHT = 30 const ANCHOR_HEIGHT = 18 Page({ data: { toSingerNum: '', logs: [], scrollTop: 0, HOT_NAME: '热', HOT_SINGER_LEN: 10, listHeight: [], currentIndex: 0, fixedTitle: '', fixedTop: 0, }, onLoad: function() { var that = this; wx.showLoading({ title: '加载中', }) wx.showShareMenu(); // wx.request({ // url: '歌手API', // data: {}, // success:res=> { var data = { "code": 0, "data": { "list": [{ "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "X", "Fother_name": "Joker", "Fsinger_id": "5062", "Fsinger_mid": "002J4UUk29y8BY", "Fsinger_name": "薛之谦", "Fsinger_tag": "541,555", "Fsort": "1", "Ftrend": "0", "Ftype": "0", "voc": "0" }, { "Farea": "0", "Fattribute_3": "2", "Fattribute_4": "0", "Fgenre": "0", "Findex": "Z", "Fother_name": "Jay Chou", "Fsinger_id": "4558", "Fsinger_mid": "0025NhlN2yWrP4", "Fsinger_name": "周杰伦", "Fsinger_tag": "541,555", "Fsort": "2", "Ftrend": "0", "Ftype": "0", "voc": "0" }, { "Farea": "2", "Fattribute_3": "5", "Fattribute_4": "0", "Fgenre": "0", "Findex": "B", "Fother_name": "빅뱅", "Fsinger_id": "11733", "Fsinger_mid": "004AlfUb0cVkN1", "Fsinger_name": "BIGBANG (빅뱅)", "Fsinger_tag": "645,663,676,679,694,703,710,713", "Fsort": "3", "Ftrend": "0", "Ftype": "2", "voc": "0" }, { "Farea": "0", "Fattribute_3": "1", "Fattribute_4": "0", "Fgenre": "0", "Findex": "C", "Fother_name": "Eason Chan", "Fsinger_id": "143", "Fsinger_mid": "003Nz2So3XXYek", "Fsinger_name": "陈奕迅", "Fsinger_tag": "555", "Fsort": "4", "Ftrend": "0", "Ftype": "0", "voc": "0" }, { "Farea": "0", "Fattribute_3": "44", "Fattribute_4": "0", "Fgenre": "0", "Findex": "L", "Fother_name": "JJ Lin", "Fsinger_id": "4286", "Fsinger_mid": "001BLpXF2DyJe2", "Fsinger_name": "林俊杰", "Fsinger_tag": "541,555", "Fsort": "5", "Ftrend": "0", "Ftype": "0", "voc": "0" }, { "Farea": "3", "Fattribute_3": "0", "Fattribute_4": "0", "Fgenre": "0", "Findex": "A", "Fother_name": "艾伦·沃克", "Fsinger_id": "944940", "Fsinger_mid": "0020PeOh4ZaCw1", "Fsinger_name": "Alan Walker (艾伦·沃克)", "Fsinger_tag": "", "Fsort": "6", "Ftrend": "1", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "L", "Fother_name": "Ronghao Li", "Fsinger_id": "60505", "Fsinger_mid": "000aHmbL2aPXWH", "Fsinger_name": "李荣浩", "Fsinger_tag": "", "Fsort": "7", "Ftrend": "0", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "T", "Fother_name": "", "Fsinger_id": "34412", "Fsinger_mid": "000zmpju02bEBm", "Fsinger_name": "TFBOYS", "Fsinger_tag": "", "Fsort": "8", "Ftrend": "1", "Ftype": "2", "voc": "0" }, { "Farea": "3", "Fattribute_3": "6", "Fattribute_4": "0", "Fgenre": "0", "Findex": "M", "Fother_name": "魔力红乐团", "Fsinger_id": "4983", "Fsinger_mid": "001JuGrt372YIQ", "Fsinger_name": "Maroon 5 (魔力红乐团)", "Fsinger_tag": "644,645", "Fsort": "9", "Ftrend": "1", "Ftype": "2", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "X", "Fother_name": "Vae Xu", "Fsinger_id": "7221", "Fsinger_mid": "000CK5xN3yZDJt", "Fsinger_name": "许嵩", "Fsinger_tag": "", "Fsort": "10", "Ftrend": "-1", "Ftype": "0", "voc": "0" }, { "Farea": "0", "Fattribute_3": "1", "Fattribute_4": "0", "Fgenre": "0", "Findex": "G", "Fother_name": "Gem Tang", "Fsinger_id": "13948", "Fsinger_mid": "001fNHEf1SFEFN", "Fsinger_name": "G.E.M. 邓紫棋", "Fsinger_tag": "541,555", "Fsort": "11", "Ftrend": "-1", "Ftype": "1", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "Z", "Fother_name": "Jason Zhang", "Fsinger_id": "6499", "Fsinger_mid": "002azErJ0UcDN6", "Fsinger_name": "张杰", "Fsinger_tag": "555", "Fsort": "12", "Ftrend": "0", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "L", "Fother_name": "", "Fsinger_id": "204664", "Fsinger_mid": "001SqkF53OEhdO", "Fsinger_name": "鹿晗", "Fsinger_tag": "", "Fsort": "13", "Ftrend": "1", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "1", "Fgenre": "0", "Findex": "Z", "Fother_name": "Ada Zhuang", "Fsinger_id": "89698", "Fsinger_mid": "003Cn3Yh16q1MO", "Fsinger_name": "庄心妍", "Fsinger_tag": "555", "Fsort": "14", "Ftrend": "-1", "Ftype": "1", "voc": "0" }, { "Farea": "0", "Fattribute_3": "2", "Fattribute_4": "1", "Fgenre": "0", "Findex": "Y", "Fother_name": "Aska Yang", "Fsinger_id": "11608", "Fsinger_mid": "003tMm0y0TuewY", "Fsinger_name": "杨宗纬", "Fsinger_tag": "555", "Fsort": "15", "Ftrend": "0", "Ftype": "0", "voc": "0" }, { "Farea": "3", "Fattribute_3": "15", "Fattribute_4": "0", "Fgenre": "0", "Findex": "J", "Fother_name": "贾斯汀·比伯", "Fsinger_id": "16257", "Fsinger_mid": "002DYpxl3hW3EP", "Fsinger_name": "Justin Bieber (贾斯汀·比伯)", "Fsinger_tag": "645,710", "Fsort": "16", "Ftrend": "1", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "Z", "Fother_name": "", "Fsinger_id": "199515", "Fsinger_mid": "0003ZpE43ypssl", "Fsinger_name": "张碧晨", "Fsinger_tag": "", "Fsort": "17", "Ftrend": "-1", "Ftype": "1", "voc": "1" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "H", "Fother_name": "", "Fsinger_id": "163550", "Fsinger_mid": "002Vcz8F2hpBQj", "Fsinger_name": "华晨宇", "Fsinger_tag": "555", "Fsort": "18", "Ftrend": "1", "Ftype": "0", "voc": "0" }, { "Farea": "0", "Fattribute_3": "1", "Fattribute_4": "0", "Fgenre": "0", "Findex": "Z", "Fother_name": "Jacky Cheung", "Fsinger_id": "174", "Fsinger_mid": "004Be55m1SJaLk", "Fsinger_name": "张学友", "Fsinger_tag": "555", "Fsort": "19", "Ftrend": "-1", "Ftype": "0", "voc": "0" }, { "Farea": "0", "Fattribute_3": "2", "Fattribute_4": "0", "Fgenre": "0", "Findex": "T", "Fother_name": "Hebe Tian", "Fsinger_id": "4701", "Fsinger_mid": "001ByAsv3XCdgm", "Fsinger_name": "田馥甄", "Fsinger_tag": "555", "Fsort": "20", "Ftrend": "-1", "Ftype": "1", "voc": "0" }, { "Farea": "2", "Fattribute_3": "4", "Fattribute_4": "0", "Fgenre": "0", "Findex": "R", "Fother_name": "ラッドウィンプス", "Fsinger_id": "9962", "Fsinger_mid": "000f1b6W1wzyRN", "Fsinger_name": "RADWIMPS (ラッドウィンプス)", "Fsinger_tag": "645,683,690,709", "Fsort": "21", "Ftrend": "1", "Ftype": "2", "voc": "0" }, { "Farea": "0", "Fattribute_3": "2", "Fattribute_4": "1", "Fgenre": "0", "Findex": "X", "Fother_name": "Jam Hsiao", "Fsinger_id": "13203", "Fsinger_mid": "004bsIDK0awMOv", "Fsinger_name": "萧敬腾", "Fsinger_tag": "", "Fsort": "22", "Ftrend": "-1", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "N", "Fother_name": "", "Fsinger_id": "137", "Fsinger_mid": "003LCFXH0eodXv", "Fsinger_name": "那英", "Fsinger_tag": "555", "Fsort": "23", "Ftrend": "-1", "Ftype": "1", "voc": "0" }, { "Farea": "0", "Fattribute_3": "2", "Fattribute_4": "0", "Fgenre": "0", "Findex": "W", "Fother_name": "Leehom Wang", "Fsinger_id": "265", "Fsinger_mid": "001JDzPT3JdvqK", "Fsinger_name": "王力宏", "Fsinger_tag": "541,573", "Fsort": "24", "Ftrend": "-1", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "Z", "Fother_name": "Jane Zhang", "Fsinger_id": "4607", "Fsinger_mid": "000aw4WC2EQYTv", "Fsinger_name": "张靓颖", "Fsinger_tag": "555", "Fsort": "25", "Ftrend": "-1", "Ftype": "1", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "W", "Fother_name": "Kris Wu", "Fsinger_id": "180646", "Fsinger_mid": "002yeznU3VAVEV", "Fsinger_name": "吴亦凡", "Fsinger_tag": "", "Fsort": "26", "Ftrend": "1", "Ftype": "0", "voc": "0" }, { "Farea": "0", "Fattribute_3": "1", "Fattribute_4": "0", "Fgenre": "0", "Findex": "B", "Fother_name": "", "Fsinger_id": "2", "Fsinger_mid": "002pUZT93gF4Cu", "Fsinger_name": "BEYOND", "Fsinger_tag": "541,558,569", "Fsort": "27", "Ftrend": "1", "Ftype": "2", "voc": "0" }, { "Farea": "0", "Fattribute_3": "2", "Fattribute_4": "0", "Fgenre": "0", "Findex": "L", "Fother_name": "Yoga Lin", "Fsinger_id": "11606", "Fsinger_mid": "001f0VyZ1hmWZ1", "Fsinger_name": "林宥嘉", "Fsinger_tag": "555", "Fsort": "28", "Ftrend": "-1", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "1", "Fgenre": "17", "Findex": "N", "Fother_name": "NZBZ", "Fsinger_id": "69205", "Fsinger_mid": "003ZQQb64D5317", "Fsinger_name": "南征北战", "Fsinger_tag": "", "Fsort": "29", "Ftrend": "1", "Ftype": "2", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "W", "Fother_name": "Silence Wan", "Fsinger_id": "3954", "Fsinger_mid": "001z2JmX09LLgL", "Fsinger_name": "汪苏泷", "Fsinger_tag": "541,555,562", "Fsort": "30", "Ftrend": "1", "Ftype": "0", "voc": "0" }, { "Farea": "2", "Fattribute_3": "5", "Fattribute_4": "0", "Fgenre": "0", "Findex": "G", "Fother_name": "权志龙", "Fsinger_id": "19851", "Fsinger_mid": "000t2qd13dLpae", "Fsinger_name": "G-DRAGON (权志龙)", "Fsinger_tag": "646,663,666,676,679,690,705,714", "Fsort": "31", "Ftrend": "0", "Ftype": "0", "voc": "0" }, { "Farea": "0", "Fattribute_3": "2", "Fattribute_4": "0", "Fgenre": "0", "Findex": "S", "Fother_name": "Sodagreen", "Fsinger_id": "5924", "Fsinger_mid": "000Q4W691sMvLG", "Fsinger_name": "苏打绿", "Fsinger_tag": "544,555,569", "Fsort": "32", "Ftrend": "1", "Ftype": "2", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "P", "Fother_name": "", "Fsinger_id": "4442", "Fsinger_mid": "000mLAT42CFWNa", "Fsinger_name": "朴树", "Fsinger_tag": "541,555,558", "Fsort": "33", "Ftrend": "1", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "W", "Fother_name": "Faye Wong", "Fsinger_id": "264", "Fsinger_mid": "000GDDuQ3sGQiT", "Fsinger_name": "王菲", "Fsinger_tag": "555", "Fsort": "34", "Ftrend": "1", "Ftype": "1", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "K", "Fother_name": "", "Fsinger_id": "11761", "Fsinger_mid": "002Sm9iK4RIsCr", "Fsinger_name": "筷子兄弟", "Fsinger_tag": "555", "Fsort": "35", "Ftrend": "-1", "Ftype": "2", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "M", "Fother_name": "", "Fsinger_id": "160022", "Fsinger_mid": "0035kILA0ydw3j", "Fsinger_name": "MC天佑", "Fsinger_tag": "", "Fsort": "36", "Ftrend": "-1", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "1", "Fgenre": "0", "Findex": "M", "Fother_name": "", "Fsinger_id": "1045852", "Fsinger_mid": "000WbpKa3WokLD", "Fsinger_name": "MC魏小然", "Fsinger_tag": "", "Fsort": "37", "Ftrend": "1", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "J", "Fother_name": "", "Fsinger_id": "12111", "Fsinger_mid": "004YXxql1sSr2o", "Fsinger_name": "金志文", "Fsinger_tag": "541,555", "Fsort": "40", "Ftrend": "0", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "S", "Fother_name": "Niko Sun", "Fsinger_id": "22874", "Fsinger_mid": "001oXbjs29oPul", "Fsinger_name": "孙子涵", "Fsinger_tag": "541,555,562", "Fsort": "41", "Ftrend": "1", "Ftype": "0", "voc": "0" }, { "Farea": "0", "Fattribute_3": "2", "Fattribute_4": "0", "Fgenre": "0", "Findex": "A", "Fother_name": "黄丽玲", "Fsinger_id": "6028", "Fsinger_mid": "003ArN8Z0WpjTz", "Fsinger_name": "A-Lin", "Fsinger_tag": "555", "Fsort": "42", "Ftrend": "1", "Ftype": "1", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "X", "Fother_name": "", "Fsinger_id": "3376", "Fsinger_mid": "00235pCx2tYjlq", "Fsinger_name": "许巍", "Fsinger_tag": "541,558", "Fsort": "43", "Ftrend": "-1", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "1", "Fgenre": "0", "Findex": "S", "Fother_name": "Donye.S", "Fsinger_id": "61620", "Fsinger_mid": "004KKLWZ4320g1", "Fsinger_name": "宋冬野", "Fsinger_tag": "544,558", "Fsort": "45", "Ftrend": "0", "Ftype": "0", "voc": "0" }, { "Farea": "0", "Fattribute_3": "2", "Fattribute_4": "0", "Fgenre": "0", "Findex": "Z", "Fother_name": "aMEI", "Fsinger_id": "141", "Fsinger_mid": "003JGrNQ3RjelA", "Fsinger_name": "张惠妹", "Fsinger_tag": "555", "Fsort": "46", "Ftrend": "-1", "Ftype": "1", "voc": "0" }, { "Farea": "0", "Fattribute_3": "2", "Fattribute_4": "0", "Fgenre": "0", "Findex": "Z", "Fother_name": "Steve Chou", "Fsinger_id": "4365", "Fsinger_mid": "004NMZuf2BLjg8", "Fsinger_name": "周传雄", "Fsinger_tag": "541,555", "Fsort": "47", "Ftrend": "-1", "Ftype": "0", "voc": "0" }, { "Farea": "0", "Fattribute_3": "2", "Fattribute_4": "0", "Fgenre": "0", "Findex": "Z", "Fother_name": "Jeff Chang", "Fsinger_id": "167", "Fsinger_mid": "0000mFvh1jtLcz", "Fsinger_name": "张信哲", "Fsinger_tag": "555", "Fsort": "48", "Ftrend": "1", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "Y", "Fother_name": "", "Fsinger_id": "944274", "Fsinger_mid": "004coWV04C5FCV", "Fsinger_name": "杨洋", "Fsinger_tag": "", "Fsort": "49", "Ftrend": "1", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "X", "Fother_name": "L Xu", "Fsinger_id": "22704", "Fsinger_mid": "004aRKga0CXIPm", "Fsinger_name": "徐良", "Fsinger_tag": "541,562", "Fsort": "50", "Ftrend": "1", "Ftype": "0", "voc": "0" }, { "Farea": "0", "Fattribute_3": "1", "Fattribute_4": "0", "Fgenre": "0", "Findex": "C", "Fother_name": "Jordan Chan", "Fsinger_id": "4284", "Fsinger_mid": "004DFS271osAwp", "Fsinger_name": "陈小春", "Fsinger_tag": "555", "Fsort": "51", "Ftrend": "-1", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "Q", "Fother_name": "Wanting Qu", "Fsinger_id": "34703", "Fsinger_mid": "0030RkE50nmpWC", "Fsinger_name": "曲婉婷", "Fsinger_tag": "", "Fsort": "52", "Ftrend": "-1", "Ftype": "1", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "1", "Fgenre": "0", "Findex": "P", "Fother_name": "", "Fsinger_id": "1102711", "Fsinger_mid": "003vSrlp0ujV6o", "Fsinger_name": "鹏泊", "Fsinger_tag": "", "Fsort": "53", "Ftrend": "-1", "Ftype": "0", "voc": "0" }, { "Farea": "0", "Fattribute_3": "44", "Fattribute_4": "0", "Fgenre": "0", "Findex": "S", "Fother_name": "Stefanie Sun", "Fsinger_id": "109", "Fsinger_mid": "001pWERg3vFgg8", "Fsinger_name": "孙燕姿", "Fsinger_tag": "555,558", "Fsort": "54", "Ftrend": "1", "Ftype": "1", "voc": "0" }, { "Farea": "3", "Fattribute_3": "6", "Fattribute_4": "0", "Fgenre": "0", "Findex": "W", "Fother_name": "维兹·卡利法", "Fsinger_id": "12978", "Fsinger_mid": "000CQ06r24Naco", "Fsinger_name": "Wiz Khalifa (维兹·卡利法)", "Fsinger_tag": "644", "Fsort": "55", "Ftrend": "0", "Ftype": "0", "voc": "0" }, { "Farea": "0", "Fattribute_3": "2", "Fattribute_4": "0", "Fgenre": "0", "Findex": "Z", "Fother_name": "Phil Chang", "Fsinger_id": "168", "Fsinger_mid": "0044wQXL0ElWF1", "Fsinger_name": "张宇", "Fsinger_tag": "555", "Fsort": "56", "Ftrend": "-1", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "G", "Fother_name": "", "Fsinger_id": "61959", "Fsinger_mid": "002OfR3n1vx75j", "Fsinger_name": "葛林", "Fsinger_tag": "", "Fsort": "58", "Ftrend": "-1", "Ftype": "0", "voc": "0" }, { "Farea": "0", "Fattribute_3": "1", "Fattribute_4": "0", "Fgenre": "0", "Findex": "M", "Fother_name": "Karen Mok", "Fsinger_id": "54", "Fsinger_mid": "000cISVf2QqLc6", "Fsinger_name": "莫文蔚", "Fsinger_tag": "555", "Fsort": "59", "Ftrend": "-1", "Ftype": "1", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "1", "Fgenre": "0", "Findex": "Z", "Fother_name": "", "Fsinger_id": "1012038", "Fsinger_mid": "004eaDNU1nfRO0", "Fsinger_name": "张磊", "Fsinger_tag": "", "Fsort": "60", "Ftrend": "1", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "J", "Fother_name": "", "Fsinger_id": "1041231", "Fsinger_mid": "0023ni2j3F9CpN", "Fsinger_name": "Jam", "Fsinger_tag": "", "Fsort": "61", "Ftrend": "1", "Ftype": "1", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "N", "Fother_name": "Milk Coffee", "Fsinger_id": "4422", "Fsinger_mid": "0012bj8d36Xkw1", "Fsinger_name": "牛奶咖啡", "Fsinger_tag": "552,555", "Fsort": "62", "Ftrend": "1", "Ftype": "2", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "W", "Fother_name": "", "Fsinger_id": "4604", "Fsinger_mid": "001adLDR1SS40P", "Fsinger_name": "汪峰", "Fsinger_tag": "541,555,569", "Fsort": "63", "Ftrend": "-1", "Ftype": "0", "voc": "0" }, { "Farea": "3", "Fattribute_3": "6", "Fattribute_4": "0", "Fgenre": "0", "Findex": "C", "Fother_name": "查理·普斯", "Fsinger_id": "39000", "Fsinger_mid": "000jnR7q3pCzYG", "Fsinger_name": "Charlie Puth (查理·普斯)", "Fsinger_tag": "644", "Fsort": "64", "Ftrend": "0", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "B", "Fother_name": "", "Fsinger_id": "4545", "Fsinger_mid": "003LaMHm42u7qS", "Fsinger_name": "本兮", "Fsinger_tag": "", "Fsort": "65", "Ftrend": "-1", "Ftype": "1", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "H", "Fother_name": "", "Fsinger_id": "24833", "Fsinger_mid": "002mze3U0NYXOM", "Fsinger_name": "胡夏", "Fsinger_tag": "555", "Fsort": "66", "Ftrend": "1", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "1", "Fgenre": "0", "Findex": "M", "Fother_name": "MXD", "Fsinger_id": "28227", "Fsinger_mid": "003wWQBU0fHBcj", "Fsinger_name": "马旭东", "Fsinger_tag": "555", "Fsort": "67", "Ftrend": "1", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "1", "Fgenre": "0", "Findex": "W", "Fother_name": "Vai", "Fsinger_id": "38625", "Fsinger_mid": "001WcO2V0TLCv3", "Fsinger_name": "威仔", "Fsinger_tag": "", "Fsort": "68", "Ftrend": "-1", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "L", "Fother_name": "", "Fsinger_id": "11707", "Fsinger_mid": "002xpOdd4Dh6pu", "Fsinger_name": "李易峰", "Fsinger_tag": "555", "Fsort": "70", "Ftrend": "1", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "Y", "Fother_name": "", "Fsinger_id": "7485", "Fsinger_mid": "004FtTNW2b0tJi", "Fsinger_name": "雨宗林", "Fsinger_tag": "555", "Fsort": "71", "Ftrend": "-1", "Ftype": "0", "voc": "0" }, { "Farea": "0", "Fattribute_3": "2", "Fattribute_4": "0", "Fgenre": "0", "Findex": "G", "Fother_name": "Claire Guo", "Fsinger_id": "11626", "Fsinger_mid": "0043Zxw10txf5O", "Fsinger_name": "郭静", "Fsinger_tag": "555", "Fsort": "72", "Ftrend": "-1", "Ftype": "1", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "L", "Fother_name": "Chris Lee", "Fsinger_id": "4615", "Fsinger_mid": "002ZOuVm3Qn20Y", "Fsinger_name": "李宇春", "Fsinger_tag": "555", "Fsort": "73", "Ftrend": "1", "Ftype": "1", "voc": "0" }, { "Farea": "0", "Fattribute_3": "2", "Fattribute_4": "0", "Fgenre": "0", "Findex": "Z", "Fother_name": "Angela Zhang", "Fsinger_id": "224", "Fsinger_mid": "002raUWw3PXdkT", "Fsinger_name": "张韶涵", "Fsinger_tag": "555", "Fsort": "74", "Ftrend": "-1", "Ftype": "1", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "M", "Fother_name": "MMD", "Fsinger_id": "943468", "Fsinger_mid": "003rJfMG3PPqWd", "Fsinger_name": "萌萌哒天团", "Fsinger_tag": "", "Fsort": "75", "Ftrend": "1", "Ftype": "2", "voc": "0" }, { "Farea": "3", "Fattribute_3": "6", "Fattribute_4": "0", "Fgenre": "0", "Findex": "F", "Fother_name": "打倒男孩", "Fsinger_id": "4868", "Fsinger_mid": "003CKb192ggBqi", "Fsinger_name": "Fall Out Boy (打倒男孩)", "Fsinger_tag": "645", "Fsort": "76", "Ftrend": "1", "Ftype": "2", "voc": "0" }, { "Farea": "3", "Fattribute_3": "6", "Fattribute_4": "0", "Fgenre": "0", "Findex": "R", "Fother_name": "蕾哈娜", "Fsinger_id": "6966", "Fsinger_mid": "002MiBdR19HQWx", "Fsinger_name": "Rihanna (蕾哈娜)", "Fsinger_tag": "710", "Fsort": "77", "Ftrend": "-1", "Ftype": "1", "voc": "0" }, { "Farea": "3", "Fattribute_3": "6", "Fattribute_4": "0", "Fgenre": "0", "Findex": "T", "Fother_name": "烟民二人组", "Fsinger_id": "156095", "Fsinger_mid": "004ABIFV1EZUAj", "Fsinger_name": "The Chainsmokers (烟民二人组)", "Fsinger_tag": "", "Fsort": "78", "Ftrend": "-1", "Ftype": "2", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "X", "Fother_name": "Ann", "Fsinger_id": "23800", "Fsinger_mid": "001oNMzI3WznzG", "Fsinger_name": "夏婉安", "Fsinger_tag": "", "Fsort": "79", "Ftrend": "-1", "Ftype": "1", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "Z", "Fother_name": "", "Fsinger_id": "968571", "Fsinger_mid": "0042kZuh1dgLre", "Fsinger_name": "周二珂", "Fsinger_tag": "", "Fsort": "80", "Ftrend": "-1", "Ftype": "1", "voc": "0" }, { "Farea": "3", "Fattribute_3": "8", "Fattribute_4": "0", "Fgenre": "0", "Findex": "T", "Fother_name": "", "Fsinger_id": "947788", "Fsinger_mid": "000ndQx82fsq8Z", "Fsinger_name": "Tez Cadey", "Fsinger_tag": "", "Fsort": "81", "Ftrend": "0", "Ftype": "0", "voc": "0" }, { "Farea": "3", "Fattribute_3": "6", "Fattribute_4": "0", "Fgenre": "0", "Findex": "E", "Fother_name": "艾米纳姆", "Fsinger_id": "4880", "Fsinger_mid": "000yDAjj2TE9j8", "Fsinger_name": "Eminem (艾米纳姆)", "Fsinger_tag": "645,647", "Fsort": "82", "Ftrend": "-1", "Ftype": "0", "voc": "0" }, { "Farea": "0", "Fattribute_3": "1", "Fattribute_4": "0", "Fgenre": "0", "Findex": "Z", "Fother_name": "Hins Cheung", "Fsinger_id": "219", "Fsinger_mid": "003AfDK34H82GU", "Fsinger_name": "张敬轩", "Fsinger_tag": "541,555", "Fsort": "83", "Ftrend": "-1", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "1", "Fgenre": "17", "Findex": "Q", "Fother_name": "", "Fsinger_id": "1042260", "Fsinger_mid": "0020IaUo4Vgsjk", "Fsinger_name": "齐一", "Fsinger_tag": "", "Fsort": "84", "Ftrend": "1", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "H", "Fother_name": "", "Fsinger_id": "1043567", "Fsinger_mid": "004QoDUs3jfOC6", "Fsinger_name": "韩安旭", "Fsinger_tag": "", "Fsort": "85", "Ftrend": "-1", "Ftype": "0", "voc": "0" }, { "Farea": "0", "Fattribute_3": "2", "Fattribute_4": "0", "Fgenre": "0", "Findex": "L", "Fother_name": "Sam Lee", "Fsinger_id": "38", "Fsinger_mid": "002seUhN1Akj7J", "Fsinger_name": "李圣杰", "Fsinger_tag": "555,562", "Fsort": "86", "Ftrend": "-1", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "Z", "Fother_name": "", "Fsinger_id": "63938", "Fsinger_mid": "000SJp6n49rDgl", "Fsinger_name": "张赫宣", "Fsinger_tag": "", "Fsort": "87", "Ftrend": "-1", "Ftype": "0", "voc": "0" }, { "Farea": "2", "Fattribute_3": "5", "Fattribute_4": "0", "Fgenre": "0", "Findex": "9", "Fother_name": "防弹少年团", "Fsinger_id": "162691", "Fsinger_mid": "001TpDgn4SxyJn", "Fsinger_name": "방탄소년단 (防弹少年团)", "Fsinger_tag": "536,678,663,676", "Fsort": "88", "Ftrend": "1", "Ftype": "2", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "L", "Fother_name": "Richael Liu", "Fsinger_id": "161444", "Fsinger_mid": "003bQEFA3KrvLI", "Fsinger_name": "刘瑞琦", "Fsinger_tag": "555", "Fsort": "89", "Ftrend": "-1", "Ftype": "1", "voc": "0" }, { "Farea": "3", "Fattribute_3": "7", "Fattribute_4": "0", "Fgenre": "0", "Findex": "A", "Fother_name": "阿黛尔", "Fsinger_id": "12578", "Fsinger_mid": "003CoxJh1zFPpx", "Fsinger_name": "Adele (阿黛尔)", "Fsinger_tag": "644", "Fsort": "90", "Ftrend": "1", "Ftype": "1", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "1", "Fgenre": "0", "Findex": "S", "Fother_name": "", "Fsinger_id": "1011983", "Fsinger_mid": "001t94rh4OpQn0", "Fsinger_name": "双笙", "Fsinger_tag": "", "Fsort": "91", "Ftrend": "1", "Ftype": "1", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "T", "Fother_name": "Escape Plan", "Fsinger_id": "15514", "Fsinger_mid": "001Yxpxc0OaUUX", "Fsinger_name": "逃跑计划", "Fsinger_tag": "544,569", "Fsort": "92", "Ftrend": "1", "Ftype": "2", "voc": "0" }, { "Farea": "2", "Fattribute_3": "5", "Fattribute_4": "0", "Fgenre": "0", "Findex": "B", "Fother_name": "", "Fsinger_id": "1190986", "Fsinger_mid": "003DBAjk2MMfhR", "Fsinger_name": "BLACKPINK", "Fsinger_tag": "", "Fsort": "93", "Ftrend": "0", "Ftype": "2", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "Y", "Fother_name": "Jackson", "Fsinger_id": "198135", "Fsinger_mid": "001IoTZp19YMDG", "Fsinger_name": "易烊千玺", "Fsinger_tag": "", "Fsort": "94", "Ftrend": "1", "Ftype": "0", "voc": "0" }, { "Farea": "3", "Fattribute_3": "6", "Fattribute_4": "0", "Fgenre": "0", "Findex": "O", "Fother_name": "猫头鹰之城", "Fsinger_id": "12926", "Fsinger_mid": "002a1DuK4evNsR", "Fsinger_name": "Owl City (猫头鹰之城)", "Fsinger_tag": "644", "Fsort": "95", "Ftrend": "1", "Ftype": "2", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "T", "Fother_name": "", "Fsinger_id": "6370", "Fsinger_mid": "000QG95i2rHlOf", "Fsinger_name": "谭晶", "Fsinger_tag": "", "Fsort": "96", "Ftrend": "-1", "Ftype": "1", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "C", "Fother_name": "Sean Chen", "Fsinger_id": "22926", "Fsinger_mid": "004EyqQS2hMS6V", "Fsinger_name": "陈翔", "Fsinger_tag": "555", "Fsort": "97", "Ftrend": "1", "Ftype": "0", "voc": "0" }, { "Farea": "0", "Fattribute_3": "1", "Fattribute_4": "0", "Fgenre": "0", "Findex": "L", "Fother_name": "Andy Lau", "Fsinger_id": "163", "Fsinger_mid": "003aQYLo2x8izP", "Fsinger_name": "刘德华", "Fsinger_tag": "555", "Fsort": "98", "Ftrend": "-1", "Ftype": "0", "voc": "0" }, { "Farea": "3", "Fattribute_3": "7", "Fattribute_4": "0", "Fgenre": "0", "Findex": "O", "Fother_name": "单向组合", "Fsinger_id": "24561", "Fsinger_mid": "001FXn5P0kkWfV", "Fsinger_name": "One Direction (单向组合)", "Fsinger_tag": "645", "Fsort": "99", "Ftrend": "0", "Ftype": "2", "voc": "0" }, { "Farea": "0", "Fattribute_3": "2", "Fattribute_4": "0", "Fgenre": "0", "Findex": "C", "Fother_name": "Tanya Chua", "Fsinger_id": "112", "Fsinger_mid": "000hNnWC3kko2c", "Fsinger_name": "蔡健雅", "Fsinger_tag": "541,555", "Fsort": "100", "Ftrend": "-1", "Ftype": "1", "voc": "0" }, { "Farea": "0", "Fattribute_3": "2", "Fattribute_4": "0", "Fgenre": "0", "Findex": "F", "Fother_name": "Christine Fan", "Fsinger_id": "4351", "Fsinger_mid": "003vyG9q2klWs4", "Fsinger_name": "范玮琪", "Fsinger_tag": "541,555,558", "Fsort": "101", "Ftrend": "-1", "Ftype": "1", "voc": "0" }, { "Farea": "0", "Fattribute_3": "2", "Fattribute_4": "0", "Fgenre": "0", "Findex": "X", "Fother_name": "LALA Xu", "Fsinger_id": "16244", "Fsinger_mid": "002LZVMH0zc8F4", "Fsinger_name": "徐佳莹", "Fsinger_tag": "541,555,569", "Fsort": "102", "Ftrend": "1", "Ftype": "1", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "1", "Fgenre": "0", "Findex": "J", "Fother_name": "J Sound", "Fsinger_id": "44018", "Fsinger_mid": "001m7JoC1IVL44", "Fsinger_name": "金南玲", "Fsinger_tag": "", "Fsort": "103", "Ftrend": "-1", "Ftype": "1", "voc": "0" }, { "Farea": "0", "Fattribute_3": "1", "Fattribute_4": "0", "Fgenre": "0", "Findex": "L", "Fother_name": "Hacken Lee", "Fsinger_id": "235", "Fsinger_mid": "003nS2v740Lxcw", "Fsinger_name": "李克勤", "Fsinger_tag": "555", "Fsort": "104", "Ftrend": "-1", "Ftype": "0", "voc": "0" }, { "Farea": "1", "Fattribute_3": "3", "Fattribute_4": "0", "Fgenre": "0", "Findex": "Q", "Fother_name": "", "Fsinger_id": "40798", "Fsinger_mid": "000H4xDG3heHtr", "Fsinger_name": "齐晨", "Fsinger_tag": "555", "Fsort": "105", "Ftrend": "1", "Ftype": "0", "voc": "0" }], "per_page": 100, "total": 552503, "total_page": 5526 }, "message": "succ", "subcode": 0 }, code = data.code, data = data.data, list = data.list; if (code == 0) { that.setData({ logs: that.normalizeSinger(list) }) that._calculateHeight(); wx.hideLoading(); } // }, // fail: req => { // wx.showToast({ // icon:'none', // title: '哎呀！数据出错了，别急，程序猿正在加急修改中', // }) // } // }) }, normalizeSinger(list) { //歌手列表渲染 let map = { hot: { title: this.data.HOT_NAME, items: [] } } list.forEach((item, index) => { if (index < this.data.HOT_SINGER_LEN) { map.hot.items.push({ name: item.Fsinger_name, avatar: this.constructor(item.Fsinger_mid), mid: item.Fsinger_mid }) } const key = item.Findex if (!map[key]) { map[key] = { title: key, items: [] } } map[key].items.push({ name: item.Fsinger_name, avatar: this.constructor(item.Fsinger_mid), mid: item.Fsinger_mid }) }) // 为了得到有序列表，我们需要处理 map let ret = [] let hot = [] for (let key in map) { let val = map[key] if (val.title.match(/[a-zA-Z]/)) { ret.push(val) } else if (val.title === this.data.HOT_NAME) { hot.push(val) } } ret.sort((a, b) => { return a.title.charCodeAt(0) - b.title.charCodeAt(0) }) return hot.concat(ret) }, scroll: function(e) { var newY = e.detail.scrollTop; this.scrollY(newY); }, scrollY(newY) { const listHeight = this.data.listHeight // 当滚动到顶部，newY>0 if (newY == 0 || newY < 0) { this.setData({ currentIndex: 0, fixedTitle: '' }) return } // 在中间部分滚动 for (let i = 0; i < listHeight.length - 1; i++) { let height1 = listHeight[i] let height2 = listHeight[i + 1] if (newY >= height1 && newY < height2) { this.setData({ currentIndex: i, fixedTitle: this.data.logs[i].title }) this.fixedTt(height2 - newY); return } } // 当滚动到底部，且-newY大于最后一个元素的上限 this.setData({ currentIndex: listHeight.length - 2, fixedTitle: this.data.logs[listHeight.length - 2].title }) }, fixedTt(newVal) { let fixedTop = (newVal > 0 && newVal < TITLE_HEIGHT) ? newVal - TITLE_HEIGHT : 0 if (this.data.fixedTop === fixedTop) { return } this.setData({ fixedTop: fixedTop }) }, _calculateHeight() { var lHeight = [], that = this; let height = 0; lHeight.push(height); var query = wx.createSelectorQuery(); query.selectAll('.list-group').boundingClientRect(function(rects) { var rect = rects, len = rect.length; for (let i = 0; i < len; i++) { height += rect[i].height; lHeight.push(height) } }).exec(); var calHeight = setInterval(function() { if (lHeight != [0]) { that.setData({ listHeight: lHeight }); clearInterval(calHeight); } }, 1000) }, constructor: function(id) { this.id = id this.avatar = `https://y.gtimg.cn/music/photo_new/T001R300x300M000${id}.jpg?max_age=2592000` return this.avatar; }, scrollToview(e) { var id = e.target.dataset.id if (id == '热') { this.setData({ scrollTop: 0 }) } else { this.setData({ toSingerNum: id }) } }, toSinger(e) { var id = e.currentTarget.id; wx.navigateTo({ url: '../singer/singer?disstid=' + id, }) } }) ================================================ FILE: pages/logs/logs.json ================================================ { "navigationBarTitleText": "HMusic" } ================================================ FILE: pages/logs/logs.wxml ================================================ {{group.title}} {{user.name}} {{item.title}} {{fixedTitle}} ================================================ FILE: pages/logs/logs.wxss ================================================ .log-list { display: flex; flex-direction: column; /* padding-bottom:60rpx; */ } .log-item { margin: 10rpx; } .title { height: 60rpx; line-height: 60rpx; padding-left: 40rpx; font-size: 24rpx; color: rgba(255, 255, 255, 1); background: #ccc; margin-top:60rpx; } .title:first-child { margin-top:0; } .list-group-item { display: flex; -webkit-box-align: center; align-items: center; padding: 40rpx 0 0 60rpx; } .list-group-item:last-child { padding-bottom: 60rpx; } .list-group-item .icon { width:100rpx; height:100rpx; border-radius: 50%; } ::-webkit-scrollbar{ width: 0; height: 0; color: transparent; } .list-shortcut { position: fixed; z-index: 30; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 20px; padding: 20px 0; border-radius: 10px; text-align: center; background: rgba(0,0,0,.3); font-family: Helvetica; } .list-shortcut text { display: block; padding: 3px; line-height: 1; color: #fff; font-size: 24rpx; } .current{ color: #ffcd32 !important; } .list-fixed { position: absolute; top: 0; left: 0; width: 100%; } .fixed-title { height:60rpx; line-height:60rpx; padding-left:40rpx; font-size:24rpx; color:rgba(255, 255, 255, 1); background:#ccc; } ================================================ FILE: pages/playSong/playSong.js ================================================ const app = getApp(); Page({ data: {}, onLoad: function(options) { wx.hideLoading(); wx.showShareMenu({ withShareTicket: true }); this.setData({ isPlay: app.globalData.isPlay }) app.globalData.backgroundAudioManager.onPlay(() => { var that = this; that.updateTime(that); that.setData({ isPlay: true, }); app.globalData.isPlay = true; }); app.globalData.backgroundAudioManager.onError((res) => { if (res.errCode == '10001') { wx.showToast({ icon: 'none', title: '由于系统错误导致歌曲播放失败', }) } else if (res.errCode == '10002') { wx.showToast({ icon: 'none', title: '由于网络错误导致歌曲播放失败', }) } else if (res.errCode == '10003') { wx.showToast({ icon: 'none', title: '哎呀！播放文件错误', }) } else if (res.errCode == '10004') { wx.showToast({ icon: 'none', title: '哎呀！播放格式错误', }) } else if (res.errCode == '-1') { wx.showToast({ icon: 'none', title: '哎呀！数据出错了，别急，程序猿正在加急修改中', }) } }); app.globalData.backgroundAudioManager.onEnded(() => { this.setData({ isPlay: false }); app.globalData.isPlay = false; var id = wx.getStorageSync('song_id'), num = this.data.num; num++; var this_id = id[num]; this.setData({ num: num, musicTime: 1, toView: 'A0' }); wx.setStorage({ key: 'num', data: num, }) wx.setStorage({ key: 'current', data: { musicTime: 1, toView: 'A0' }, }) if (num > 0 && num < 19) { this.setData({ haveNext: true, havePop: true }) } else { this.setData({ haveNext: false, havePop: true }) } this.music_fcg(this_id); }); app.globalData.backgroundAudioManager.onPause(() => { this.setData({ isPlay: false }); app.globalData.isPlay = false; }); app.globalData.backgroundAudioManager.onStop(() => { app.globalData.shouldPlay = true; // app.globalData.unload = true; app.globalData.startTime = 0; wx.setStorage({ key: 'current', data: { toView: 'A0', musicTime: 1 }, }); this.setData({ isPlay: false }) app.globalData.isPlay = false; }); app.globalData.backgroundAudioManager.onNext(() => { this.nextAudio(); }); app.globalData.backgroundAudioManager.onPrev(() => { this.popAudio(); }); }, onShow() { var startTime = app.globalData.startTime; // console.log(startTime, app.globalData.shouldPlay, this.data.time,app.globalData.unload,app.globalData.musicMsg); if (wx.getStorageSync('song_id').length == 0) { wx.showModal({ title: '提示', content: '您还未选择播放的歌曲，请移步推荐页哟', showCancel: false, success: function(res) { if (res.confirm) { wx.switchTab({ url: '../index/index', }) } } }); this.setData({ haveMusicStorage: false }); } else { var id = app.globalData.labelid, rid = app.globalData.radioId, radioid = wx.getStorageSync('labelid'), shouldPlay = app.globalData.shouldPlay, index = wx.getStorageSync('num'); if (shouldPlay) { var song_id = wx.getStorageSync('song_id'), this_id = song_id[index], unload = app.globalData.unload; wx.showLoading({ title: '加载中', }) if (!unload) { this.setData({ num: index, time: 0, toView:'A0', musicTime:1 }); this.music_fcg(this_id); } else { var current = wx.getStorageSync('current'), msg = app.globalData.musicMsg; if (current.toView) { this.setData({ toView: current.toView, musicTime: current.musicTime }); } if (msg.audioSrc) { this.setData({ audioSrc:msg.audioSrc }) } if (msg.haveCommentlist) { this.setData({ commentlist: msg.commentlist, haveCommentlist: true }); } else { this.setData({ haveCommentlist: false, commentlist: msg.commentlist, }); } this.setData({ num: index, time: startTime, track_info: msg.track_info, gedan: msg.gedan, simsongs: msg.simsongs, singer: msg.singer, songmid: msg.songmid, video: msg.video, lyrics: app.globalData.lyrics, }); app.globalData.unload = false; this.updateTime(this); wx.hideLoading(); } app.globalData.labelid = radioid; app.globalData.shouldPlay = false; // wx.setStorage({ // key: 'share_id', // data: [], // }); // wx.setStorage({ // key: 'share_name', // data: [], // }); } else { var share_id = wx.getStorageSync('share_id'); if (share_id.length != 0) { var background = wx.getStorageSync('backgrond'), current = wx.getStorageSync('current'), index = wx.getStorageSync('num'), song_id = wx.getStorageSync('song_id'), msg = app.globalData.musicMsg, this_id = song_id[index]; if (current.toView) { this.setData({ toView: current.toView, musicTime: current.musicTime }); } if (msg.audioSrc) { this.setData({ audioSrc: msg.audioSrc }) } if (msg.haveCommentlist) { this.setData({ commentlist: msg.commentlist, haveCommentlist: true }); } else { this.setData({ haveCommentlist: false, commentlist: msg.commentlist, }); } this.setData({ lyrics: app.globalData.lyrics, haveMusicStorage: true, audioSrc: background.src, time: startTime, num: index, track_info: msg.track_info, gedan: msg.gedan, simsongs: msg.simsongs, singer: msg.singer, songmid: msg.songmid, video: msg.video, }); var that = this; that.updateTime(that); // that.music_fcg(this_id); } else if (rid.indexOf(radioid) == -1) { if (radioid != id) { var song_id = wx.getStorageSync('song_id'), this_id = song_id[0]; this.setData({ num: 0, time: 0, toView:'A0', musicTime:1 }); wx.showLoading({ title: '加载中', }) this.music_fcg(this_id); app.globalData.labelid = radioid; } } } var music_name = wx.getStorageSync('music_name'); this.setData({ song_id: id, haveMusicStorage: true, MusicName: music_name }); } }, onShareAppMessage: function(options) { var that = this, song_id = wx.getStorageSync('song_id'), music_name = wx.getStorageSync('music_name'), num = wx.getStorageSync('num'), path = '/pages/share/share?songid=' + song_id[num] + '&name=' + music_name[num]; // path = '/pages/playSong/playSong'; app.globalData.clickShare = true; return { title: '@我，诚意推荐《' + music_name[num] + '》这首歌', path: path, imageUrl: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000' + that.data.track_info.album.mid + '.jpg?max_age=2592000', } }, onUnload() { // wx.setStorage({ // key: 'share_id', // data: [], // }); // app.globalData.shareMusic = true; app.globalData.shouldPlay = true; app.globalData.unload = true; // console.log('页面卸载'); }, onHide() { // console.log('页面隐藏'); }, music_fcg: function(this_id) { var musicu = this.data.musicu; musicu.detail.param.song_id = this_id; musicu.simsongs.param.songid = this_id; musicu.gedan.param.song_id = this_id; typeof this_id == 'string' ? musicu.video.param.songid = this_id.toString() : musicu.video.param.songid = this_id; //歌曲相关信息 wx.request({ url: '歌曲信息API', method: 'POST', data: JSON.stringify(musicu), success: res => { var detail = res.data.detail, gedan = res.data.gedan, simsongs = res.data.simsongs, songmid = detail.data.track_info.mid, info = detail.data.info, video = res.data.video.data.list, vids = [], lyric, mediaArray = [], haveLyric = false; //将歌词字符串转为数组，并去掉前五组数据 for (var i = 0; i < info.length; i++) { if (info[i].title == '歌词') { lyric = info[i].content[0].value.split('\n').slice(5); haveLyric = true; } } for (var i = 0; i < video.length; i++) { vids.push(video[i].vid); } if (vids.length > 0) { this.getVideoSrc(vids); } //将时间跟歌词分开 if (haveLyric) { for (var j = 0; j < lyric.length; j++) { var t = lyric[j].substring(lyric[j].indexOf('[') + 1, lyric[j].indexOf(']')), c = lyric[j].substring(lyric[j].indexOf("]") + 1, lyric[j].length); if (c != '') { mediaArray.push({ t: (parseInt(t.split(":")[0] * 60) + parseFloat(t.split(":")[1])).toFixed(1), c: c, id: 'A' + j }) } } } this.setData({ track_info: detail.data.track_info, gedan: gedan.data.vec_gedan, simsongs: simsongs.data.songInfoList, singer: detail.data.track_info.singer, songmid: songmid, lyrics: mediaArray, video: video }); app.globalData.lyrics = mediaArray; app.globalData.musicMsg = { track_info: detail.data.track_info, gedan: gedan.data.vec_gedan, simsongs: simsongs.data.songInfoList, singer: detail.data.track_info.singer, songmid: songmid, video: video } var songUrl = this.data.pUrl, mid = songmid; songUrl.req_0.param.songmid.splice(0, 1, mid); //获取歌曲链接 wx.request({ url: '歌曲播放API', method: 'post', data: JSON.stringify(songUrl), success: res => { wx.hideLoading(); var pUrl = res.data.req_0.data.midurlinfo[0].purl; if (pUrl == '') { app.globalData.backgroundAudioManager.pause(); var that = this; that.setData({ audioSrc: '' }); wx.showModal({ title: '提示', content: '很抱歉，该歌曲暂不支持播放哦，咱们听下一首歌吧', success: function(res) { if (res.confirm) { that.nextAudio(); } } }) } else if (this.data.time == 0) { wx.setStorage({ key: 'backgrond', data: { title: detail.data.track_info.name, singer: detail.data.track_info.singer[0].name, src: pUrl, coverImgUrl: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000' + detail.data.track_info.album.mid + '.jpg?max_age=2592000' }, }); app.globalData.backgroundAudioManager.title = detail.data.track_info.name; app.globalData.backgroundAudioManager.singer = detail.data.track_info.singer[0].name; app.globalData.backgroundAudioManager.src = pUrl; app.globalData.backgroundAudioManager.coverImgUrl = 'https://y.gtimg.cn/music/photo_new/T002R300x300M000' + detail.data.track_info.album.mid + '.jpg?max_age=2592000' app.globalData.backgroundAudioManager.play(); this.setData({ audioSrc: pUrl, isPlay: true }); app.globalData.isPlay = true; app.globalData.musicMsg.audioSrc = pUrl; wx.setStorage({ key: 'share_id', data: [], }); } }, error: req => { wx.showToast({ icon: 'none', title: '哎呀！数据出错了，别急，程序猿正在加急修改中', }) } }); }, error: req => { wx.showToast({ icon: 'none', title: '哎呀！数据出错了，别急，程序猿正在加急修改中', }) } }); //精彩评论 wx.request({ url: '评论API', data: {}, success: res => { var commentlist = res.data.hot_comment.commentlist, list = []; if (commentlist) { if (commentlist.length > 4) { list.push(commentlist[1]); list.push(commentlist[2]); list.push(commentlist[3]); } else { for (var i = 0; i < commentlist.length; i++) { list.push(commentlist[i]); } } for (var i = 0; i < list.length; i++) { list[i].time = app.timestampToTime(list[i].time); } this.setData({ commentlist: list, haveCommentlist: true }); app.globalData.musicMsg.commentlist = list; app.globalData.musicMsg.haveCommentlist = true; } else { this.setData({ haveCommentlist: false }); app.globalData.musicMsg.haveCommentlist = false; app.globalData.musicMsg.commentlist = ''; } }, error: req => { wx.showToast({ icon: 'none', title: '哎呀！数据出错了，别急，程序猿正在加急修改中', }) } }); }, audioPlay() { //音乐播放暂停 var isPlay = this.data.isPlay, src = this.data.audioSrc; if (isPlay) { app.globalData.backgroundAudioManager.pause(); this.setData({ isPlay: false }); app.globalData.isPlay = false; } else if (isPlay == false && src != '') { app.globalData.backgroundAudioManager.play(); this.setData({ isPlay: true }); app.globalData.isPlay = true; } else { var that = this; wx.showModal({ title: '提示', content: '很抱歉，该歌曲需要vip哦，咱们听下一首歌吧', success: function(res) { if (res.confirm) { that.nextAudio(); } } }) } }, updateTime: function(that) { //播放时更新时间 app.globalData.backgroundAudioManager.onTimeUpdate((res) => { var duration = app.globalData.backgroundAudioManager.duration, currentTime = app.globalData.backgroundAudioManager.currentTime.toFixed(1), time = this.data.lyrics, musicTime = this.data.musicTime; app.globalData.startTime = app.globalData.backgroundAudioManager.currentTime; // if (parseInt(currentTime) <= parseInt(time[0].t)) { // this.setData({ // toView: time[0].id // }); // // console.log(this.data.toView); // } else { for (var i = musicTime; i < time.length; i++) { if (parseInt(currentTime) > parseInt(time[i].t)) { if (this.data.toView != time[i].id) { this.setData({ toView: time[i].id, musicTime: musicTime + 1 }); wx.setStorage({ key: 'current', data: { toView: time[i].id, musicTime: musicTime + 1 }, }) } // console.log(currentTime, time[i].id, time[i].t,musicTime); return; } } // } // console.log(currentTime); }) }, nextAudio(e) { //下一首 wx.showLoading({ title: '加载中', }); var id = wx.getStorageSync('song_id'), num = this.data.num, len = id.length; console.log(num) if (num == len - 1) { num = 0; } else { num++; } var this_id = id[num]; this.setData({ num: num, musicTime: 1, toView: 'A0', time: 0 }); wx.setStorage({ key: 'num', data: num, }); // wx.setStorage({ // key: 'share_id', // data: [], // }); if (num < (len - 1)) { this.setData({ haveNext: true, havePop: true }) } else { this.setData({ num: -1 }) } // this.audioPlay(); this.music_fcg(this_id); }, popAudio(e) { //上一首 wx.showLoading({ title: '加载中', }) var id = wx.getStorageSync('song_id'), num = this.data.num; if (num == 0) { num = id.length - 1; } else { num--; } var this_id = id[num]; this.setData({ num: num, musicTime: 1, toView: 'A0', time: 0 }); wx.setStorage({ key: 'num', data: num, }); // wx.setStorage({ // key: 'share_id', // data: [], // }); if (num != 0) { this.setData({ havePop: true, haveNext: true }) } else { this.setData({ num: 0 }) } // this.audioPlay(); this.music_fcg(this_id); }, playVideo(e) { //播放视频 var isPlay = this.data.isPlay, id = e.currentTarget.id, index = e.target.dataset.index, video = this.data.videoisPlay; for (var i = 0; i < video.length; i++) { var videoContext = wx.createVideoContext('mid' + (i - 1)); videoContext.pause(); // video[i] = false; } video[index] = true; this.setData({ videoisPlay: video }) var videoContext1 = wx.createVideoContext(id); videoContext1.play(); if (isPlay) { app.globalData.backgroundAudioManager.pause(); this.setData({ isPlay: false }); app.globalData.isPlay = false; } }, playVideo1(e) { //点击自带的播放按钮 var isPlay = this.data.isPlay, id = e.currentTarget.id, index = e.target.dataset.index, video = this.data.videoisPlay; for (var i = 0; i < video.length; i++) { if ('mid' + (i - 1) != id) { var videoContext = wx.createVideoContext('mid' + (i - 1)); videoContext.pause(); } } video[index] = true; this.setData({ videoisPlay: video }) if (isPlay) { app.globalData.backgroundAudioManager.pause(); this.setData({ isPlay: false }); app.globalData.isPlay = false; } }, pauseVideo(e) { //暂停播放视频 var isPlay = this.data.isPlay; if (isPlay) { app.globalData.backgroundAudioManager.pause(); this.setData({ isPlay: false }); app.globalData.isPlay = false; } }, getVideoSrc(vids) { //获取视频链接 var videoData = this.data.videoSrcData; videoData.getMVInfo.param.vidlist = vids; videoData.getMVUrl.param.vids = vids; wx.request({ url: 'MVAPI', data: {}, success: res => { var data = res.data.getMVUrl.data, url = [], isPlaying = []; for (var i = 0; i < vids.length; i++) { var vid = vids[i]; url.push(data[vid].mp4[1].freeflow_url[0]); isPlaying[i] = false; } this.setData({ videoSrc: url, videoisPlay: isPlaying }); }, error: req => { wx.showToast({ icon: 'none', title: '哎呀！数据出错了，别急，程序猿正在加急修改中', }) } }) }, getGd(e) { //跳转到歌单信息页 var id = e.currentTarget.dataset.id; wx.navigateTo({ url: '../gedan/gedan?disstid=' + id, }) }, goSinger(e) { var id = e.currentTarget.dataset.id; wx.navigateTo({ url: '../singer/singer?disstid=' + id, }) }, addSong(e) { //跳到喜欢的歌曲 var id = e.currentTarget.dataset.id, //获取到点击歌曲id name = e.currentTarget.dataset.name, num = this.data.num, song_id = wx.getStorageSync('song_id'), music_name = wx.getStorageSync('music_name'); var a = song_id.indexOf(id); if (a != -1) { id = song_id[a]; this.setData({ num: a, time: 0 }) wx.setStorage({ key: 'num', data: a, }) this.audioPlay(); this.music_fcg(id); } else { num++; song_id.splice(num, 0, id); music_name.splice(num, 0, name); wx.setStorageSync('song_id', song_id); wx.setStorageSync('music_name', music_name); this.setData({ num: num, MusicName: music_name, time: 0 }) wx.setStorage({ key: 'num', data: num, }) this.audioPlay(); this.music_fcg(id); } // wx.setStorage({ // key: 'share_id', // data: [], // }); }, musicChange(e) { var index = parseInt(e.detail.value), song_id = wx.getStorageSync('song_id'), this_id = song_id[index], num = wx.getStorageSync('num'); if (num != index) { wx.showLoading({ title: '切换歌曲中', }); this.setData({ num: index, time: 0, musicTime: 1, toView: 'A0' }); this.music_fcg(this_id); wx.setStorage({ key: 'num', data: index, }); // wx.setStorage({ // key: 'share_id', // data: [], // }); } }, musicCancel(e) { console.log(e); }, showPlayList(){ var pix = 750 / app.globalData.system.windowWidth, height = 758 / pix; const animation = wx.createAnimation({ durarion: 1000, timingFunction: 'ease-in-out', }) this.animation = animation; animation.translateY(-height).step(); this.setData({ animationData: animation.export(), showList: true }); }, close(e) { // this.setData({ // showList:false // }) var pix = 750 / app.globalData.system.windowWidth, height = 758 / pix; const animation = wx.createAnimation({ durarion: 1000, timingFunction: 'ease-in-out', }) this.animation = animation; animation.translateY(height).step(); this.setData({ animationData: animation.export(), showList: false }); }, del(e) { var num = e.currentTarget.dataset.num, songid = wx.getStorageSync('song_id'), musicName = wx.getStorageSync('music_name'), index = wx.getStorageSync('num'); songid.splice(num,1); musicName.splice(num,1); wx.setStorage({ key: 'song_id', data: songid, }); wx.setStorage({ key: 'music_name', data: musicName, }); wx.showToast({ icon:'none', title: '已删除', }) this.setData({ MusicName:musicName }); if (num == index) { if (index < songid.length) { var id = songid[index]; this.setData({ num: index, time: 0, musicTime: 1, toView: 'A0' }); this.music_fcg(id); wx.setStorage({ key: 'num', data: index, }); } else { var id = songid[0]; this.setData({ num: 0, time: 0, musicTime: 1, toView: 'A0' }); this.music_fcg(id); wx.setStorage({ key: 'num', data: 0, }); } } }, changeMusic(e) { var index = e.currentTarget.dataset.num, songid = wx.getStorageSync('song_id'), id = songid[index], num = wx.getStorageSync('num'); if (num != index) { wx.showLoading({ title: '切换歌曲中', }); this.setData({ num: index, time: 0, musicTime: 1, toView: 'A0' }); this.music_fcg(id); wx.setStorage({ key: 'num', data: index, }); } } }) ================================================ FILE: pages/playSong/playSong.json ================================================ { "navigationBarTitleText": "HMusic" } ================================================ FILE: pages/playSong/playSong.wxml ================================================ {{track_info.title}} {{index > 0 ? ' / ' : ''}}{{item.name}} {{lyric.c}} 包含这首歌的歌单 {{item.dissname}} {{item.creator}} 喜欢这首歌的人也听 {{item.name}} {{item.singer[0].name}} 歌手 歌手 {{item.name}} 精彩评论 {{item.nick}} {{item.time}} {{item.rootcommentcontent}} {{item.praisenum}} 推荐音乐视频 {{item.title}} {{index > 0 ? ' / ' : ''}}{{ss.name}} 播放列表({{MusicName.length}}) {{item}} 关闭 ================================================ FILE: pages/playSong/playSong.wxss ================================================ page { background: #fff; } .main { position: relative; padding-bottom: 30rpx; overflow: hidden; } .main_bd { position: relative; z-index: 4; } .song_name { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; margin-top: 40rpx; font-size:18px; font-weight: 300; } .song_name .song_name__text { max-width: 222rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 18px; font-weight: 400; color: #000; } .song_name .icon_playlist { position: relative; display: block; width: 36rpx; height: 36rpx; margin: 0 -44rpx 0 8rpx; } .icon_playlist::after { content: ""; position: absolute; top: -100%; left: -100%; width: 300%; height: 300%; } .singer_name { margin: 0 40rpx 30rpx; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; color:grey; } .singer_name .item_name { display: inline-block; } .song_info_bd { position: relative; height: 300rpx; } .song_info_bd .album_cover { position: absolute; top: 0; left: 50%; z-index: 2; width: 468rpx; height: 468rpx; margin-left: -234rpx; box-shadow: 0 1rpx 4px rgba(0,0,0,.2); display: none; } .album_cover__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .lyric { position: absolute; top: 0; left: 0; z-index: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; -webkit-box-align: center; width: 100%; height: 100%; } .lyric .lyric__bd { width: 100%; height: 300rpx; overflow: hidden; /* -webkit-mask: -webkit-linear-gradient(top,rgba(0,0,0,0),#fff 25%,#fff 75%,rgba(0,0,0,0)); */ } .lyric__para { line-height: 2; margin: 0 40rpx; text-align: center; overflow: hidden; white-space: normal; text-overflow: ellipsis; font-size: 15px; /* color: #31c27c; */ } /* .opt { position: relative; height:180rpx; } .opt__item { position: absolute; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; width:80rpx; height:80rpx; margin: 0 40rpx; border: solid 1px rgba(0,0,0,.2); border-radius: 100%; top:50%; left:45%; transform:translate(-50%,-50%); } .opt__icon { display: block; width: 44rpx; height: 44rpx; fill: #000; } */ .opt { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; height: 180rpx; } .opt__item { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; width:76rpx; height:76rpx; margin: 0 40rpx; /* border: solid 1px rgba(0,0,0,.2); */ border-radius: 100%; } .opt__icon { display: block; width: 64rpx; height: 64rpx; fill: #000; } .bg { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height:750rpx; } .bg_img { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; opacity: .06; -webkit-transform: scale(1.2); } .mod_tit { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; height: 110rpx; font-size: 16px; font-weight: 400; color: #000; } .qui_list { margin-bottom: 30rpx; overflow: hidden; } .qui_list__item { position: relative; display: -webkit-box; -webkit-box-align: center; margin: 0 0 4rpx 32rpx; } .qui_list__media { position: relative; display: block; width: 130rpx; height: 130rpx; margin-right: 24rpx; overflow: hidden; } .qui_list__img { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; } .qui_list__bd { position: relative; -webkit-box-flex: 1; display: -webkit-box; -webkit-box-align: center; height: 130rpx; padding-right: 32rpx; } .qui_list__box { -webkit-box-flex: 1; display: -webkit-box; -webkit-box-orient: vertical; } .qui_list__tit { font-size: 13px; color: #000; } .qui_list__desc { font-size:12px; color:grey; } .qui_list__arrow { display: block; width: 14rpx; height: 14rpx; border-style: solid; border-width: 0 1px 1px 0; border-color: grey; -webkit-transform: rotate(-45deg); } .comment_box { padding: 0 32rpx; overflow: hidden; font: 300 24rpx/1.5 sans-serif; -webkit-tap-highlight-color: rgba(0,0,0,0); } .mod_comment_list { position: relative; margin: 0; padding: 0; } .comment_list__item { position: relative; display: -webkit-box; margin-bottom: 16rpx; padding-top: 4rpx; } .comment_list__avatar { position: relative; width: 70rpx; height: 70rpx; margin-right: 2rpx; border-radius: 100%; background-color: rgba(203,203,203,.2); -webkit-user-select: none; } .comment_list__avatar_img { display: block; width: 100%; height: 100%; border-radius: 100%; object-fit: cover; pointer-events: none; } .comment_list__body { position: relative; -webkit-box-flex: 1; padding-bottom: 2rpx; } .comment_list__heading { display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; min-height: 70rpx; margin: 0 18rpx 8rpx 0; } .comment_list__tit { display: -webkit-box; -webkit-box-align: center; margin: -8rpx 0 -4rpx; font-size: 28rpx; font-weight: 300; -webkit-user-select: none; } .comment_list__time { color: grey; } .comment_list__cont { position: relative; font-size: 28rpx; } .comment_list__para { margin: 0; overflow: hidden; word-wrap: break-word; word-break: break-all; text-align: justify; line-height: 1.6; color:#000; } .mod_comment_opt { position: absolute; top: 24rpx; right: 0px; display: -webkit-box; -webkit-user-select: none; } .mod_comment_opt .mod_praise { opacity: .6; } .mod_praise { position: relative; display: -webkit-box; -webkit-box-pack: end; -webkit-box-align: end; -webkit-transform: translateZ(0); min-width: 10rpx; } .praise__number { display: block; margin-right: 4rpx; line-height: 1.1; overflow: hidden; font-size: 12px; } .praise__icon { display: block; width: 36rpx; height: 36rpx; stroke-width: 0; stroke: currentColor; fill: currentColor; } .mod_mv { margin: 0 32rpx 40rpx; } .mv__media { position: relative; height: 386rpx; } .mv__img { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; } .mv__play { position: absolute; top: 50%; left: 50%; z-index: 2; width: 90rpx; height: 90rpx; margin: -44rpx 0 0 -44rpx; background: url('https://y.gtimg.cn/mediastyle/mobile/project_v5/img/cover_play.png?max_age=2592000'); background-repeat: no-repeat; background-size: 90rpx; } .mv__media::after { content: ""; display: block; padding-top: 56.25%; } .mv__tit { margin-top: 10rpx; font-size: 28rpx; color: #000; } .mv__desc, .mv__tit { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .mv__desc{ font-size: 12px; } .video_player__preview, .video_player__source, .video_player_mask { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; } .js_playlist_box { position: absolute; right: 0; bottom: 0; left: 0; display: -webkit-box; -webkit-box-orient: vertical; height: 758rpx; background: #fff; transform: translateY(100%); transition: 250ms ease-in-out; } .js_playlist_box .actionsheet__tit { position: relative; display: block; height: 110rpx; line-height: 110rpx; text-align: center; font-weight: 400; font-size: 32rpx; color: #000; } .js_playlist_box .actionsheet__tit::before { top:0; content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 2rpx; background: rgba(0,0,0,.08); } .js_playlist_box .actionsheet__tit::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 2rpx; background: rgba(0,0,0,.08); } .js_playlist_box .actionsheet__bd { -webkit-box-flex: 1; overflow-y: auto; } .js_playlist_box .play_list__item { position: relative; display: -webkit-box; -webkit-box-align: center; height: 90rpx; margin-left: 32rpx; font-size: 30rpx; color: #000; } .js_playlist_box .play_list__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 2rpx; background: rgba(0,0,0,.08); } .js_playlist_box .play_list__song,.play_list__singer { display: block; max-width: 45%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .js_playlist_box .play_list_line { display: block; margin: 0 10rpx; font-weight: 300; font-size: 24rpx; color: grey; } .playlist { position:fixed; width:100%; height:758rpx; background-color:#fff; left:0; bottom:-758rpx; /* bottom:0; */ z-index:999999; } .playlist .title { width:100%; height:110rpx; line-height:110rpx; text-align: center; font-weight: 400; font-size:32rpx; color:#000; border-top: 1px solid rgba(0,0,0,.08); border-bottom: 1px solid rgba(0,0,0,.08); } /* .playlist .title::before,.title::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 2rpx; background: rgba(0,0,0,.08); } */ .playlist .list view { position: relative; height: 90rpx; line-height: 90rpx; margin-left: 32rpx; font-size: 30rpx; color: #000; border-bottom: 1px solid rgba(0,0,0,.08); } .playlist .list .close { position: absolute; right:40rpx; top:50%; transform:translateY(-50%); width:32rpx; height:32rpx; } .playlist .list_close { width:100%; height:110rpx; line-height: 110rpx; text-align: center; border-top:1px solid rgba(0,0,0,.08); } ================================================ FILE: pages/rank/rank.js ================================================ //rank.js const app = getApp() const util = require('../../utils/util.js') Page({ data: { rank: [] }, onLoad: function() { wx.showLoading({ title: '加载中', }); wx.showShareMenu(); // wx.request({ // url: '排行榜API', // data: {}, // success: res => { var data = { "code": 0, "subcode": 0, "message": "", "default": 0, "data": { "topList": [{ "id": 4, "listenCount": 19800000, "picUrl": "http://y.gtimg.cn/music/photo_new/T003R300x300M000002UMwvi2ArZqt.jpg", "songList": [{ "singername": "马良", "songname": "往后余生" }, { "singername": "谭维维", "songname": "晚婚" }, { "singername": "韩寒", "songname": "奉献" }], "topTitle": "巅峰榜·流行指数", "type": 0 }, { "id": 26, "listenCount": 20000000, "picUrl": "http://y.gtimg.cn/music/photo_new/T003R300x300M000000twWI9013HkE.jpg", "songList": [{ "singername": "张学友", "songname": "烦恼歌" }, { "singername": "胡夏/郁可唯", "songname": "知否知否" }, { "singername": "G.E.M. 邓紫棋", "songname": "光年之外" }], "topTitle": "巅峰榜·热歌", "type": 0 }, { "id": 27, "listenCount": 16000000, "picUrl": "http://y.gtimg.cn/music/photo_new/T003R300x300M000001vuHHC1KusDA.jpg", "songList": [{ "singername": "张杰", "songname": "时间的远方" }, { "singername": "杨宗纬", "songname": "星" }, { "singername": "韩寒", "songname": "奉献" }], "topTitle": "巅峰榜·新歌", "type": 0 }, { "id": 58, "listenCount": 5639020, "picUrl": "http://y.gtimg.cn/music/photo_new/T003R300x300M000003V1F2d3cYvdN.jpg", "songList": [{ "singername": "王嘉尔/ICE", "songname": "Red" }, { "singername": "G.E.M. 邓紫棋/艾热", "songname": "光年之外 (热爱版)" }, { "singername": "小青龙", "songname": "潇洒每一天" }], "topTitle": "说唱榜", "type": 0 }, { "id": 28, "listenCount": 16000000, "picUrl": "http://y.gtimg.cn/music/photo_new/T003R300x300M000000JQoDV2XeV9P.jpg", "songList": [{ "singername": "曲肖冰", "songname": "天亮以前说再见" }, { "singername": "花姐", "songname": "狂浪" }, { "singername": "刘珂矣", "songname": "半壶纱" }], "topTitle": "巅峰榜·网络歌曲", "type": 0 }, { "id": 5, "listenCount": 3485480, "picUrl": "http://y.gtimg.cn/music/photo_new/T003R300x300M000001zMoTN4QBVWj.jpg", "songList": [{ "singername": "胡夏/郁可唯", "songname": "知否知否" }, { "singername": "张杰", "songname": "时间的远方" }, { "singername": "郁可唯", "songname": "知否知否 (女声版)" }], "topTitle": "巅峰榜·内地", "type": 0 }, { "id": 6, "listenCount": 1517820, "picUrl": "http://y.gtimg.cn/music/photo_new/T003R300x300M000002UItCc37aNxu.jpg", "songList": [{ "singername": "杨宗纬", "songname": "星" }, { "singername": "阿信", "songname": "一半人生" }, { "singername": "G.E.M. 邓紫棋", "songname": "岩石里的花" }], "topTitle": "巅峰榜·港台", "type": 0 }, { "id": 3, "listenCount": 9300000, "picUrl": "http://y.gtimg.cn/music/photo_new/T003R300x300M000000F1Kaw1UbOri.jpg", "songList": [{ "singername": "Westlife", "songname": "Hello My Love" }, { "singername": "Ariana Grande", "songname": "7 rings (Explicit)" }, { "singername": "Galantis/OneRepublic", "songname": "Bones" }], "topTitle": "巅峰榜·欧美", "type": 0 }, { "id": 16, "listenCount": 4530780, "picUrl": "http://y.gtimg.cn/music/photo_new/T003R300x300M000001Eb9x31z2mOO.jpg", "songList": [{ "singername": "ITZY", "songname": "달라달라 (DALLA DALLA)" }, { "singername": "화사 (华莎)", "songname": "멍청이 (TWIT)" }, { "singername": "로시 (Rothy)", "songname": "레인보우 (Rainbow)" }], "topTitle": "巅峰榜·韩国", "type": 0 }, { "id": 29, "listenCount": 1960000, "picUrl": "http://y.gtimg.cn/music/photo_new/T003R300x300M000000X0tfU105Xa3.jpg", "songList": [{ "singername": "摩登兄弟", "songname": "宁愿" }, { "singername": "韩寒", "songname": "奉献" }, { "singername": "周笔畅", "songname": "去流浪" }], "topTitle": "巅峰榜·影视金曲", "type": 0 }, { "id": 17, "listenCount": 1495456, "picUrl": "http://y.gtimg.cn/music/photo_new/T003R300x300M000000B6izj4I0MD3.jpg", "songList": [{ "singername": "あいみょん", "songname": "あした世界が終わるとしても (即便明天世界终结)" }, { "singername": "女王蜂 (じょおうばち)", "songname": "火炎" }, { "singername": "RADWIMPS (ラッドウィンプス)", "songname": "PAPARAZZI (English Version)" }], "topTitle": "巅峰榜·日本", "type": 0 }, { "id": 201, "listenCount": 156846, "picUrl": "http://y.gtimg.cn/music/photo_new/T003R300x300M000001BJIeN4b2v95.jpg", "songList": [{ "singername": "蔡徐坤", "songname": "Wait Wait Wait" }, { "singername": "周笔畅", "songname": "去流浪 (《流浪地球》电影推广曲)" }, { "singername": "ITZY", "songname": "달라달라 (DALLA DALLA)" }], "topTitle": "巅峰榜·MV", "type": 0 }, { "id": 52, "listenCount": 867895, "picUrl": "http://y.gtimg.cn/music/photo_new/T003R300x300M000000KIAVP3s8Oun.jpg", "songList": [{ "singername": "陈硕子", "songname": "你早就该忘了她" }, { "singername": "一只白", "songname": "零食、恋爱和想你" }, { "singername": "司徒赫伦", "songname": "阿里" }], "topTitle": "巅峰榜·腾讯音乐人原创榜", "type": 0 }, { "id": 36, "listenCount": 2499300, "picUrl": "http://y.gtimg.cn/music/photo_new/T003R300x300M000004bhA5d4QVHL3.jpg", "songList": [{ "singername": "大天使 icey", "songname": "知否知否" }, { "singername": "朴爱源", "songname": "不为谁而作的歌" }, { "singername": "麓七", "songname": "光年之外" }], "topTitle": "巅峰榜·K歌金曲", "type": 0 }] } }, code = data.code, data = data.data, list = data.topList; if (code == 0) { this.setData({ rank: list }); wx.hideLoading(); } // }, // fail: req => { // wx.showToast({ // icon:'none', // title: '哎呀！数据出错了，别急，程序猿正在加急修改中', // }) // } // }) }, goTonext(e) { var id = e.currentTarget.dataset.id; //跳转详情榜单页面 wx.navigateTo({ url: '../top/top?disstid=' + id, }) } }) ================================================ FILE: pages/rank/rank.json ================================================ { "navigationBarTitleText": "HMusic" } ================================================ FILE: pages/rank/rank.wxml ================================================ {{list.listenCount/10000}}万 {{index+1}} {{songlist.songname}}-{{songlist.singername}} ================================================ FILE: pages/rank/rank.wxss ================================================ .rank { padding-bottom: 40rpx; } .list { position: relative; display: flex; margin: 0 40rpx; padding-top: 40rpx; height: 200rpx; } .list image.picUrl { -webkit-box-flex: 0; -ms-flex: 0 0 200rpx; flex: 0 0 w00rpx; width: 200rpx; height: 200rpx; } .list image.radio_icon { position: absolute; width:40rpx; height:40rpx; left:14rpx; bottom:10rpx; } .list .listNum { position:absolute; left:70rpx; bottom:10rpx; color:#fff; font-size:12px; } .list .songList { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 40rpx; height: 200rpx; overflow: hidden; background: #fff; color: hsla(0,0%,100%,.3); font-size: 12px; } .list .songList .song { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; line-height: 52rpx; color:#000; } ================================================ FILE: pages/search/search.js ================================================ const app = getApp(); Page({ data: {}, onLoad: function() { wx.hideLoading(); wx.showShareMenu(); this.getStorage(); var key = wx.getStorageSync('hotkey'), expirationTime = wx.getStorageSync('expirationTime'), //过期时间一天 time = Date.parse(new Date()); if (!expirationTime) { expirationTime = time; } if (expirationTime > time) { this.setData({ list: key }) } else { wx.request({ url: '关键字API', data: {}, success: res => { var code = res.data.code, data = res.data.data, list = data.hotkey; if (code == 0) { var timestamp = Date.parse(new Date()); var expiration = timestamp + 86400; //过期时间一天 this.setData({ list: list }); wx.setStorage({ key: 'hotkey', data: list, }); wx.setStorage({ key: 'expirationTime', data: expiration, }) } }, fail: req => { wx.showToast({ icon: 'none', title: '哎呀！数据出错了，别急，程序猿正在加急修改中', }) } }) } }, getStorage() { var logs = wx.getStorageSync('yqq_search_history').split(','); //获取搜索记录缓存 if (logs[0] == '') { this.setData({ keys: [], haveKeys: false }); } else { this.setData({ keys: logs, haveKeys: true }); } }, inputFocus(e) { //输入框获取焦点 if (!this.data.havaResult) { this.setData({ isHide: true, hotHide: true, isCancel: true, inputShowed: true }); this.getStorage(); } }, clearKeys: function() { //清空搜索记录 this.setData({ keys: [], haveKeys: false }); wx.setStorageSync('yqq_search_history', ''); }, cancel: function() { //取消 this.setData({ isHide: false, sInput: '', isNull: true, hotHide: false, isCancel: false, havaResult: false, searchResult: [], isLoadAll: false, inputShowed: false }) }, clearKey: function(e) { //删除某一个记录 var key = e.target.dataset.key, data = this.data.keys; for (var i = 0; i < data.length; i++) { if (key == data[i]) { data.splice(i, 1); this.setData({ keys: data }) } } wx.setStorageSync('yqq_search_history', this.data.keys); }, searchKey(e) { //点击完成按钮时触发 var val = e.detail.value; // console.log(val.trim().length); if (val.trim().length == 0) { wx.showToast({ icon: 'none', title: '不能查询空值哦', }) } else { this.setData({ searchResult:[] }); this.searchKeyword(val, 1); } }, searchInput(e) { //输入的时候触发 var val = e.detail.value; if (val.length == 0) { this.setData({ isNull: true }) } else { this.setData({ isNull: false }) } }, clearInput() { //清空输入框 this.setData({ sInput: '', isNull: true, searchResult:[] }) }, searchThisKey(e) { //点击热门搜索值 var key = e.target.dataset.key.replace(/\s+/g, ""); this.setData({ sInput: key, hotHide: true, isNull: false, haveKeys: false, havaResult: true, isCancel: true, inputShowed: true, sInput: key, searchResult:[] }) this.searchKeyword(key, 1); }, in_array(v, arr) { var output = true; for (var i in arr) { if (v == arr[i]) { output = false; return output; } } output = true; return output; }, searchKeyword: function(key, p) { //调用搜索查询接口 wx.showLoading({ title: '加载中', }); var logs = this.data.keys; var is_true = this.in_array(key, logs); if (is_true) { logs.push(key); wx.setStorageSync('yqq_search_history', logs.join(',')); } wx.request({ url: '搜索API', dataType: 'json', success: res => { wx.hideLoading(); var code = res.data.code, subcode = res.data.subcode; if (subcode == '-10001') { wx.showToast({ icon: 'none', title: '哎呀，接口出错了，暂时不能搜索咯，很抱歉', }) } else { var song = res.data.data.song, curpage = song.curpage, curnum = song.curnum, totalnum = song.totalnum, list = this.data.searchResult, singer = res.data.data.zhida; var c = list.concat(song.list); if (curpage * curnum >= totalnum) { this.setData({ searchResult: c, isLoadAll: true, canGetsearch: false, isHide: false, havaResult: true, singer: singer }) } else { this.setData({ searchResult: c, isLoadAll: false, canGetsearch: true, isHide: false, havaResult: true, singer: singer }) } } } }) }, scroll: function(e) { var p = this.data.p, sInput = this.data.sInput; if (this.data.canGetsearch) { p = p + 1; this.searchKeyword(sInput, p); this.setData({ canGetsearch: false, p: p }) } }, goToplay: function(e) { //跳到播放页 var id = e.currentTarget.dataset.id, name = e.currentTarget.dataset.name, song_id = wx.getStorageSync('song_id'); // console.log(song_id); if (song_id == '') { var songid = [], mname = []; songid.push(id); mname.push(name); wx.setStorage({ key: 'song_id', data: songid, }); wx.setStorage({ key: 'music_name', data: mname, }); wx.setStorage({ key: 'num', data: 0, }) app.globalData.shouldPlay = true; // app.globalData.unload = true; } else { if (song_id.indexOf(id) != '-1') { var num = song_id.indexOf(id); wx.setStorage({ key: 'num', data: num, }); } else { var num = wx.getStorageSync('num'), musicName = wx.getStorageSync('music_name'); num++; song_id.splice(num, 0, id); musicName.splice(num, 0, name); wx.setStorage({ key: 'song_id', data: song_id, }); wx.setStorage({ key: 'music_name', data: musicName, }); wx.setStorage({ key: 'num', data: num, }) app.globalData.shouldPlay = true; // app.globalData.unload = true; } } wx.switchTab({ url: '../playSong/playSong', }) }, goToSinger(e) { var id = e.currentTarget.dataset.singermid; wx.navigateTo({ url: '../singer/singer?disstid=' + id, }) } }) ================================================ FILE: pages/search/search.json ================================================ { "navigationBarTitleText": "HMusic" } ================================================ FILE: pages/search/search.wxml ================================================ 取消 热门搜索 {{item.k}} {{item}} 清除搜索记录 {{singer.singername}} 单曲:{{singer.songnum}} 专辑:{{singer.albumnum}} {{item.songname}} {{item.singer[0].name}} 已加载全部 ================================================ FILE: pages/search/search.wxss ================================================ page { background-color: #fff; } .page__bd { position: fixed; top:0; width:100%; background: #f4f4f4; /* padding: 20rpx; */ display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-align: center; z-index:1; } .weui-search-bar { width:100%; } .weui-search-bar__cancel-btn { color:#000; font-size:24rpx; } .weui-search-bar__input { color:#000; } /* 自己写的搜索框 */ .search-box-wrapper { position: fixed; top:0; width:95%; background: #f4f4f4; padding: 20rpx; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-align: center; z-index:1; } .search-box { position: relative; border-radius: 3px; background: #fff; height: 40rpx; line-height: 40rpx; padding: 16rpx 24rpx 16rpx 70rpx; -webkit-box-flex: 1; } .search-box .cc { position: absolute; top: 9px; right: 12px; width: 18px; height: 18px; background: #b1b1b1; text-indent: -9999px; border-radius: 99px; z-index:999; } .icon { position: absolute; top: 18rpx; left: 20rpx; width: 36rpx; height: 36rpx; background-repeat: no-repeat; background-size: cover; /* text-indent: -999px; */ } input { min-height: 40rpx; height: 40rpx; line-height: 40rpx; width: 100%; color: rgba(0,0,0,.3); border: none; -webkit-appearance: none; font-size: 14px; } .input-placeholder { font-size:14px; color: rgba(0,0,0,.3); } .cancel { padding-right: 20rpx; padding-left: 20rpx; font-size: 14px; height: 72rpx; line-height: 72rpx; } .hot_keys { background: #fff; padding: 30rpx 30rpx 20rpx 30rpx; margin-top:96rpx; } .record_keys { margin-top:96rpx; } .search_result { margin-top:96rpx; } .title { color: rgba(0,0,0,.6); margin-bottom: 16rpx; } .list { display: inline-block; padding: 10rpx 20rpx; margin: 0 40rpx 20rpx 0; border-radius: 12rpx; background: rgb(146, 144, 144); font-size: 14px; color: #fff; } .key_list { border-top: 1px solid #ededed; padding: 0 30rpx; position: relative; display: block; height: 88rpx; line-height: 88rpx; } .key_list .clock { position: absolute; left: 60rpx; top: 24rpx; width: 40rpx; height: 40rpx; text-indent: -999px; } .key_list .key_text { position: absolute; left: 140rpx; right: 100rpx; display: block; height: 88rpx; line-height: 88rpx; color: #000; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .key_list .close { position: absolute; right: 60rpx; top: 24rpx; width: 40rpx; height: 40rpx; } .clear { text-align: center; height: 88rpx; line-height: 88rpx; color:#47c88a; font-size:14px; } .search_page { position:relative; height: 110rpx; padding-left: 112rpx; overflow: hidden; } .search_page::after { content:""; position:absolute; height: 1px; top:0; left:0; right: 0; background:#e5e5e5; } .search_page .Micon { position: absolute; top: 36rpx; left: 36rpx; width: 44rpx; height: 40rpx; background-position: 0 0; } .search_page .media { position: absolute; top: 16rpx; left: 16rpx; width: 80rpx; height: 80rpx; border-radius: 80rpx; } .search_page .title { margin: 20rpx 0 2px; line-height: 36rpx; font-size: 16px; font-weight: normal; color: #000; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .search_page .name { color:#80808080; font-size:14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .search_result .loadAll { line-height: 80rpx; text-align: center; color: #808080; } ================================================ FILE: pages/share/share.js ================================================ const app = getApp(); Page({ data: {}, onLoad: function(options) { wx.hideLoading(); app.globalData.backgroundAudioManager.onPlay(() => { var that = this; that.updateTime(that); this.setData({ isPlay: true }); app.globalData.isPlay = true; }); app.globalData.backgroundAudioManager.onError((res) => { if (res.errCode == '10001') { wx.showToast({ icon: 'none', title: '由于系统错误导致歌曲播放失败', }) } else if (res.errCode == '10002') { wx.showToast({ icon: 'none', title: '由于网络错误导致歌曲播放失败', }) } else if (res.errCode == '10003') { wx.showToast({ icon: 'none', title: '哎呀！播放文件错误', }) } else if (res.errCode == '10004') { wx.showToast({ icon: 'none', title: '哎呀！播放格式错误', }) } else if (res.errCode == '-1') { wx.showToast({ icon: 'none', title: '哎呀！数据出错了，别急，程序猿正在加急修改中', }) } }); app.globalData.backgroundAudioManager.onEnded(() => { // var id = wx.getStorageSync('share_id'); // var this_id = id[0]; var background = wx.getStorageSync('backgrond'); app.globalData.backgroundAudioManager.title = background.title; app.globalData.backgroundAudioManager.singer = background.singer; app.globalData.backgroundAudioManager.src = background.src; app.globalData.backgroundAudioManager.coverImgUrl = background.coverImgUrl; app.globalData.backgroundAudioManager.play(); this.setData({ musicTime: 1, toView: 'A0', isPlay: true }); app.globalData.isPlay = true; wx.setStorage({ key: 'current', data: { toView: 'A0', musicTime: 1 }, }); var that = this; that.updateTime(that); // this.music_fcg(this_id); }); app.globalData.backgroundAudioManager.onPause(() => { this.setData({ isPlay: false }) app.globalData.isPlay = false; }); app.globalData.backgroundAudioManager.onStop(() => { app.globalData.startTime = 0; wx.setStorage({ key: 'current', data: { toView: 'A0', musicTime: 1 }, }); this.setData({ isPlay: false }); wx.setStorage({ key: 'share_id', data: '[]', }); app.globalData.isPlay = false; }); }, onShow() { this.setData({ isPlay: app.globalData.isPlay }) var startTime = app.globalData.startTime; app.globalData.shouldPlay = false; // console.log(startTime, app.globalData.changeMusic,this.data.isPlay); if (startTime > 0) { var background = wx.getStorageSync('backgrond'), // msg = wx.getStorageSync('msg'), msg = app.globalData.musicMsg, current = wx.getStorageSync('current'), changeMusic = app.globalData.changeMusic; if (changeMusic) { var song_id = wx.getStorageSync('share_id'), music_name = wx.getStorageSync('share_name'), this_id = song_id[0], sid = wx.getStorageSync('song_id'), mName = wx.getStorageSync('music_name'), num = wx.getStorageSync('num'); if (sid) { var index = sid.indexOf(this_id); if (index == -1) { sid.splice(parseInt(num + 1), 0, this_id); mName.splice(parseInt(num + 1), 0, music_name[0]); wx.setStorage({ key: 'num', data: parseInt(num + 1), }) } else { wx.setStorage({ key: 'num', data: index, }) } wx.setStorage({ key: 'song_id', data: sid, }); wx.setStorage({ key: 'music_name', data: mName, }) } else { wx.setStorage({ key: 'song_id', data: song_id, }); wx.setStorage({ key: 'music_name', data: music_name, }); wx.setStorage({ key: 'num', data: 0, }) } this.music_fcg(this_id); this.setData({ haveMusicStorage: true, MusicName: music_name, isPlay: true, toView: 'A0', musicTime: 1, time: 0 }); app.globalData.isPlay = true; wx.setStorage({ key: 'current', data: { toView: 'A0', musicTime: 1 }, }) } else { if (current.toView) { this.setData({ toView: current.toView, musicTime: current.musicTime }); } this.setData({ lyrics: app.globalData.lyrics, haveMusicStorage: true, audioSrc: background.src, time: startTime, track_info: msg.track_info, singer: msg.singer }); if (!this.data.isPlay) { app.globalData.backgroundAudioManager.title = background.title; app.globalData.backgroundAudioManager.singer = background.singer; app.globalData.backgroundAudioManager.src = background.src; app.globalData.backgroundAudioManager.startTime = startTime; app.globalData.backgroundAudioManager.coverImgUrl = background.coverImgUrl; app.globalData.backgroundAudioManager.play(); app.globalData.isPlay = true; this.setData({ isPlay: true }) } else { this.updateTime(this); } } } else { if (wx.getStorageSync('share_id').length == 0) { wx.showModal({ title: '提示', content: '暂时无法获取分享的歌曲，请移步推荐页哟', showCancel: false, success: function(res) { if (res.confirm) { wx.switchTab({ url: '../index/index', }) } } }); this.setData({ haveMusicStorage: false }); } else { // var id = app.globalData.labelid, // rid = app.globalData.radioId, // radioid = wx.getStorageSync('labelid'), // shouldPlay = app.globalData.shouldPlay, // index = wx.getStorageSync('num'); // if (shouldPlay) { var music_name = wx.getStorageSync('share_name'); var song_id = wx.getStorageSync('share_id'), this_id = song_id[0], sid = wx.getStorageSync('song_id'), mName = wx.getStorageSync('music_name'), num = wx.getStorageSync('num'); if (sid) { var index = sid.indexOf(this_id); if (index == -1) { sid.splice(parseInt(num + 1), 0, this_id); mName.splice(parseInt(num + 1), 0, music_name[0]); wx.setStorage({ key: 'num', data: parseInt(num + 1), }) } else { wx.setStorage({ key: 'num', data: index, }) } wx.setStorage({ key: 'song_id', data: sid, }); wx.setStorage({ key: 'music_name', data: mName, }); } else { wx.setStorage({ key: 'song_id', data: song_id, }); wx.setStorage({ key: 'music_name', data: music_name, }); wx.setStorage({ key: 'num', data: 0, }) } this.music_fcg(this_id); // this.setData({ // num: index // }) // app.globalData.labelid = radioid; // app.globalData.shouldPlay = false; // } else { // if (rid.indexOf(radioid) == -1) { // if (radioid != id) { // var song_id = wx.getStorageSync('share_id'), // this_id = song_id[0]; // this.music_fcg(this_id); // this.setData({ // num: 0 // }) // app.globalData.labelid = radioid; // } // } // } this.setData({ haveMusicStorage: true, MusicName: music_name }); } } }, music_fcg: function(this_id) { wx.showLoading({ title: '加载中', }) var musicu = this.data.musicu; musicu.detail.param.song_id = this_id; musicu.simsongs.param.songid = this_id; musicu.gedan.param.song_id = this_id; typeof this_id == 'string' ? musicu.video.param.songid = this_id.toString() : musicu.video.param.songid = this_id; //歌曲相关信息 wx.request({ url: '歌曲API', method: 'POST', data: JSON.stringify(musicu), success: res => { var detail = res.data.detail, gedan = res.data.gedan, simsongs = res.data.simsongs, songmid = detail.data.track_info.mid, info = detail.data.info, video = res.data.video.data.list, vids = [], lyric, mediaArray = [], haveLyric = false; //将歌词字符串转为数组，并去掉前五组数据 for (var i = 0; i < info.length; i++) { if (info[i].title == '歌词') { lyric = info[i].content[0].value.split('\n').slice(5); haveLyric = true; } } for (var i = 0; i < video.length; i++) { vids.push(video[i].vid); } if (vids.length > 0) { this.getVideoSrc(vids); } //将时间跟歌词分开 if (haveLyric) { for (var j = 0; j < lyric.length; j++) { var t = lyric[j].substring(lyric[j].indexOf('[') + 1, lyric[j].indexOf(']')), c = lyric[j].substring(lyric[j].indexOf("]") + 1, lyric[j].length); if (c != '') { mediaArray.push({ t: (parseInt(t.split(":")[0] * 60) + parseFloat(t.split(":")[1])).toFixed(1), c: c, id: 'A' + j }) } } } this.setData({ track_info: detail.data.track_info, gedan: gedan.data.vec_gedan, simsongs: simsongs.data.songInfoList, singer: detail.data.track_info.singer, songmid: songmid, lyrics: mediaArray, video: video }); app.globalData.musicMsg = { track_info: detail.data.track_info, gedan: gedan.data.vec_gedan, simsongs: simsongs.data.songInfoList, singer: detail.data.track_info.singer, songmid: songmid, video: video } // wx.setStorage({ // key: 'msg', // data: { // track_info: detail.data.track_info, // singer: detail.data.track_info.singer // }, // }) app.globalData.lyrics = mediaArray; var songUrl = this.data.pUrl, mid = songmid; songUrl.req_0.param.songmid.splice(0, 1, mid); //获取歌曲链接 wx.request({ url: '歌曲API', method: 'post', data: JSON.stringify(songUrl), success: res => { wx.hideLoading(); var pUrl = res.data.req_0.data.midurlinfo[0].purl; if (pUrl == '') { app.globalData.backgroundAudioManager.pause(); var that = this; that.setData({ audioSrc: '' }); wx.showModal({ title: '提示', content: '很抱歉，该歌曲暂不支持播放哦，咱们听下一首歌吧', success: function(res) { if (res.confirm) { that.nextAudio(); } } }) } else if (this.data.time == 0) { wx.setStorage({ key: 'backgrond', data: { title: detail.data.track_info.name, singer: detail.data.track_info.singer[0].name, src: pUrl, coverImgUrl: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000' + detail.data.track_info.album.mid + '.jpg?max_age=2592000' }, }); app.globalData.backgroundAudioManager.title = detail.data.track_info.name; app.globalData.backgroundAudioManager.singer = detail.data.track_info.singer[0].name; app.globalData.backgroundAudioManager.src = pUrl; app.globalData.backgroundAudioManager.coverImgUrl = 'https://y.gtimg.cn/music/photo_new/T002R300x300M000' + detail.data.track_info.album.mid + '.jpg?max_age=2592000' app.globalData.backgroundAudioManager.play(); this.setData({ audioSrc: pUrl, isPlay: true }); app.globalData.isPlay = true; app.globalData.musicMsg.audioSrc = pUrl; } }, error: req => { wx.showToast({ icon: 'none', title: '哎呀！数据出错了，别急，程序猿正在加急修改中', }) } }); }, error: req => { wx.showToast({ icon: 'none', title: '哎呀！数据出错了，别急，程序猿正在加急修改中', }) } }); //精彩评论 wx.request({ url: '评论API', data: {}, success: res => { var commentlist = res.data.hot_comment.commentlist, list = []; if (commentlist) { if (commentlist.length > 4) { list.push(commentlist[1]); list.push(commentlist[2]); list.push(commentlist[3]); } else { for (var i = 0; i < commentlist.length; i++) { list.push(commentlist[i]); } } for (var i = 0; i < list.length; i++) { list[i].time = app.timestampToTime(list[i].time); } this.setData({ commentlist: list, haveCommentlist: true }); app.globalData.musicMsg.commentlist = list; app.globalData.musicMsg.haveCommentlist = true; } else { this.setData({ haveCommentlist: false }); app.globalData.musicMsg.haveCommentlist = false; app.globalData.musicMsg.commentlist = ''; } }, error: req => { wx.showToast({ icon: 'none', title: '哎呀！数据出错了，别急，程序猿正在加急修改中', }) } }); }, audioPlay() { //音乐播放暂停 var isPlay = this.data.isPlay, src = this.data.audioSrc; if (isPlay) { app.globalData.backgroundAudioManager.pause(); this.setData({ isPlay: false }) app.globalData.isPlay = false; } else if (isPlay == false && src != '') { app.globalData.backgroundAudioManager.play(); this.setData({ isPlay: true }); app.globalData.isPlay = true; } else { var that = this; wx.showModal({ title: '提示', content: '很抱歉，该歌曲需要vip哦，咱们听下一首歌吧', success: function(res) { if (res.confirm) { that.nextAudio(); } } }) } }, updateTime: function(that) { //播放时更新时间 app.globalData.backgroundAudioManager.onTimeUpdate((res) => { var duration = app.globalData.backgroundAudioManager.duration, currentTime = app.globalData.backgroundAudioManager.currentTime.toFixed(1), time = this.data.lyrics, musicTime = this.data.musicTime; app.globalData.startTime = app.globalData.backgroundAudioManager.currentTime; for (var i = musicTime; i < time.length; i++) { if (parseInt(currentTime) > parseInt(time[i].t)) { if (this.data.toView != time[i].id) { this.setData({ toView: time[i].id, musicTime: musicTime + 1 }); wx.setStorage({ key: 'current', data: { toView: time[i].id, musicTime: musicTime + 1 }, }) } return; } } }) }, goIndex(){ wx.switchTab({ url: '../../pages/index/index', }) } }) ================================================ FILE: pages/share/share.json ================================================ { "navigationBarTitleText": "HMusic" } ================================================ FILE: pages/share/share.wxml ================================================ {{track_info.title}} {{index > 0 ? ' / ' : ''}}{{item.name}} {{lyric.c}} ================================================ FILE: pages/share/share.wxss ================================================ page { background: #fff; } .main { position: relative; /* padding-bottom: 30rpx; */ overflow: hidden; } .main_bd { position: relative; z-index: 4; } .song_name { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; margin-top: 40rpx; font-size:18px; font-weight: 300; } .song_name .song_name__text { max-width: 222rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 18px; font-weight: 400; color: #000; } .song_name .icon_playlist { position: relative; display: block; width: 36rpx; height: 36rpx; margin: 0 -44rpx 0 8rpx; } .icon_playlist::after { content: ""; position: absolute; top: -100%; left: -100%; width: 300%; height: 300%; } .singer_name { margin: 0 40rpx 30rpx; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; color:grey; } .singer_name .item_name { display: inline-block; } .song_info_bd { position: relative; /* height: 300rpx; */ height:80%; } .song_info_bd .album_cover { position: absolute; top: 0; left: 50%; z-index: 2; width: 468rpx; height: 468rpx; margin-left: -234rpx; box-shadow: 0 1rpx 4px rgba(0,0,0,.2); display: none; } .album_cover__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .lyric { position: absolute; top: 0; left: 0; z-index: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; -webkit-box-align: center; width: 100%; height: 100%; } .lyric .lyric__bd { width: 100%; /* height: 300rpx; */ height:100%; overflow: hidden; -webkit-mask: -webkit-linear-gradient(top,rgba(0,0,0,0),#fff 25%,#fff 75%,rgba(0,0,0,0)); } .lyric__para { line-height: 2; margin: 0 40rpx; text-align: center; overflow: hidden; white-space: normal; text-overflow: ellipsis; font-size: 15px; /* color: #31c27c; */ } /* .opt { position: relative; height:180rpx; } .opt__item { position: absolute; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; width:80rpx; height:80rpx; margin: 0 40rpx; border: solid 1px rgba(0,0,0,.2); border-radius: 100%; top:50%; left:45%; transform:translate(-50%,-50%); } .opt__icon { display: block; width: 44rpx; height: 44rpx; fill: #000; } */ .opt { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; height: 180rpx; } .opt__item { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; width:76rpx; height:76rpx; margin: 0 40rpx; /* border: solid 1px rgba(0,0,0,.2); */ border-radius: 100%; } .opt__icon { display: block; width: 64rpx; height: 64rpx; fill: #000; } .bg { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height:750rpx; } .bg_img { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; opacity: .06; -webkit-transform: scale(1.2); } ================================================ FILE: pages/singer/singer.js ================================================ const app = getApp() Page({ data: {}, onLoad: function (option) { wx.showLoading({ title: '加载中', }) let disstid = option.disstid; this.setData({ disstid: disstid }); this.getSinger(disstid, 0); wx.showShareMenu(); }, getSinger(dissitd, begin) { wx.request({ url: '歌手详情API', data: {}, success: (res) => { var dataList = this.data.list, data = res.data.data, songids = this.data.songids, songName = this.data.songName, list = data.list; if (parseInt(data.total - begin)< 15) { this.setData({ havaMusic: false }) } else { this.setData({ havaMusic: true }) } if (dataList.list) { dataList.list = dataList.list.concat(list); } else { dataList = data; } data.SingerDesc = data.SingerDesc.replace(/ /g, ' '); data.SingerDesc = data.SingerDesc.replace(/´/g, "'"); data.SingerDesc = data.SingerDesc.replace(/
/g, "\n"); for (var i = 0; i < list.length; i++) { songids.push(parseInt(list[i].musicData.songid)); songName.push(list[i].musicData.songname); } this.setData({ list: dataList, songids: songids, songName: songName, begin: begin }); wx.hideLoading(); }, error: req => { wx.showToast({ icon: 'none', title: '哎呀！数据出错了，别急，程序猿正在加急修改中', }); } }) }, getMoreMusic: function () { var disstid = this.data.disstid, begin = this.data.begin; begin = begin + 15; this.getSinger(disstid, begin); }, playAll() { var songids = this.data.songids, songName = this.data.songName; wx.showLoading({ title: '加载中', }) wx.setStorage({ key: 'song_id', data: songids }); wx.setStorage({ key: 'music_name', data: songName, }); wx.setStorage({ key: 'num', data: 0, }); app.globalData.shouldPlay = true; // app.globalData.unload = false; wx.switchTab({ url: '../playSong/playSong', }) }, musicPlay(e){ var songids = this.data.songids, songName = this.data.songName, num = e.currentTarget.dataset.num; wx.showLoading({ title: '加载中', }) wx.setStorage({ key: 'song_id', data: songids }); wx.setStorage({ key: 'music_name', data: songName, }); wx.setStorage({ key: 'num', data: num, }); wx.setStorage({ key: 'labelid', data: '', }); app.globalData.shouldPlay = true; // app.globalData.unload = false; wx.switchTab({ url: '../playSong/playSong', }) } }) ================================================ FILE: pages/singer/singer.json ================================================ { "navigationBarTitleText": "HMusic" } ================================================ FILE: pages/singer/singer.wxml ================================================ {{list.singer_name}} 粉丝: {{list.fans}}人 {{list.SingerDesc}} 播放全部 歌单 共{{list.total}}首 {{item.musicData.songname}} {{list.singer_name}}{{item.musicData.albumdesc}} 点击加载更多歌曲 歌手简介 {{list.SingerDesc}} ================================================ FILE: pages/singer/singer.wxss ================================================ page { background: #fff; color:#777; } .info_box { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 480rpx; overflow: hidden; color: #fff; background: #fff; } .info_box__bd { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; background: rgba(0,0,0,.5); } .album { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; -webkit-box-sizing: border-box; width: 100%; margin-top: 34rpx; padding: 0 32rpx; overflow: hidden; } .album__media { position: relative; width: 250rpx; margin-right: 20rpx; overflow: hidden; } .album__cover { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; } .album__media::after { content: ""; display: block; padding-top: 100%; } .album__bd { position: relative; -webkit-box-flex: 1; } .album__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 94rpx; line-height: 1.3; overflow: hidden; font-size: 18px; font-weight: 300; } .fans_number { margin-top:16rpx; font-size:28rpx; } .author { display: -webkit-box; -webkit-box-align: center; margin-top: 16rpx; overflow: hidden; } .author__avatar { display: block; width: 48rpx; height: 48rpx; margin-right: 16rpx; border-radius: 48rpx; } .author__bd { -webkit-box-flex: 1; } .author__name { display: block; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; color: #fff; } .album__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 72rpx; overflow: hidden; margin-top: 16rpx; font-size: 12px; } .opt_box { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; height: 196rpx; padding: 0 32rpx; -webkit-transition: 1s ease-in-out; } .btn_play_all { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; min-width: 260rpx; padding: 0 40rpx; height: 80rpx; overflow: hidden; text-align: center; font-size: 16px; color: #fff; border-radius: 40rpx; background: #31c27c; } .btn_play_all::before { content: ""; display: block; height: 0; width: 0; margin-right: -6rpx; border-color: transparent transparent transparent #fff; border-width: 14rpx 22rpx; border-style: solid; border-radius: 4rpx; } .info_box__bg { position: absolute; top: 0; left: 0; z-index: 3; width: 100%; height: 100%; object-fit: cover; -webkit-transform: scale(1.1) translateZ(0); -webkit-filter: blur(36px); } .wrap { /* position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; padding-bottom: 0; */ overflow: hidden; } .main { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; padding-top: 480rpx; padding-bottom: 100rpx; overflow: hidden; will-change: transform; -webkit-transform: translateZ(0); } .count_box { position: relative; display: -webkit-box; -webkit-box-align: center; height: 108rpx; margin: 0 32rpx -20rpx; } .count_box__desc { font-size: 14px; } .count_box__number { margin-left: 10rpx; } .qui_list { overflow: hidden; } .qui_list__item { position: relative; display: -webkit-box; } .qui_list__bd { position: relative; -webkit-box-flex: 1; display: -webkit-box; -webkit-box-align: center; padding: 20rpx 32rpx; overflow: hidden; } .qui_list__box { -webkit-box-flex: 1; display: -webkit-box; -webkit-box-orient: vertical; } .qui_list__tit { font-size: 16px; color: #000; display: -webkit-box; -webkit-box-align: center; overflow: hidden; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; } .qui_list__desc{ display: -webkit-box; -webkit-box-align: center; overflow: hidden; font-size:12px; } .qui_list__txt { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size:16px; } .check_more { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; height: 64rpx; margin-bottom: 30rpx; font-size: 28rpx; } .qui_tit { position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; -webkit-box-align: center; height: 110rpx; padding: 0 80rpx; overflow: hidden; text-align: center; } .intro { position: relative; margin: 0 32rpx 40rpx; overflow: hidden; text-align: justify; word-wrap: break-word; font-size: 14px; } ================================================ FILE: pages/top/top.js ================================================ const app = getApp() Page({ data: {}, onLoad: function (option) { wx.showLoading({ title: '加载中', }) let disstid = option.disstid; this.setData({ disstid: disstid }); this.getSinger(disstid); wx.showShareMenu(); }, getSinger(dissitd) { wx.request({ url: '歌单API', data: {}, success: (res) => { var dataList = this.data.list, data = res.data, songids = this.data.songids, songName = this.data.songName, list = data.songlist; data.topinfo.info = data.topinfo.info.replace(/ /g, ' '); data.topinfo.info = data.topinfo.info.replace(/´/g, "'"); data.topinfo.info = data.topinfo.info.replace(/
/g, "\n"); for (var i = 0; i < list.length; i++) { songids.push(parseInt(list[i].data.songid)); songName.push(list[i].data.songname); } if (data.day_of_year == '') { data.date = data.date.split('_')[1]; } dataList = data; this.setData({ list: dataList, songids: songids, songName: songName }); // this.MusicFcg(); wx.hideLoading(); }, error: req => { wx.showToast({ icon: 'none', title: '哎呀！数据出错了，别急，程序猿正在加急修改中', }); } }) }, playAll() { var songids = this.data.songids, songName = this.data.songName; wx.showLoading({ title: '加载中', }) wx.setStorage({ key: 'song_id', data: songids }); wx.setStorage({ key: 'music_name', data: songName, }); wx.setStorage({ key: 'num', data: 0, }); app.globalData.shouldPlay = true; // app.globalData.unload = true; wx.switchTab({ url: '../playSong/playSong', }) }, musicPlay(e) { var songids = this.data.songids, songName = this.data.songName, num = e.currentTarget.dataset.num; wx.showLoading({ title: '加载中', }) wx.setStorage({ key: 'song_id', data: songids }); wx.setStorage({ key: 'music_name', data: songName, }); wx.setStorage({ key: 'num', data: num, }); wx.setStorage({ key: 'labelid', data: '', }); app.globalData.shouldPlay = true; // app.globalData.unload = true; wx.switchTab({ url: '../playSong/playSong', }) } }) ================================================ FILE: pages/top/top.json ================================================ { "navigationBarTitleText": "HMusic" } ================================================ FILE: pages/top/top.wxml ================================================ {{list.topinfo.ListName}} 第{{list.day_of_year}}天 第{{list.date}}周 {{list.topinfo.info}} 播放全部 排行榜 共{{list.cur_song_num}}首 {{index + 1}} {{item.data.songname}} {{singerNum > 0 ? ' / ' : ''}}{{singer.name}} · {{item.data.albumdesc}} 简介 {{list.topinfo.info}} ================================================ FILE: pages/top/top.wxss ================================================ page { background: #fff; color:#777; } .info_box { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 480rpx; overflow: hidden; color: #fff; background: #fff; } .info_box__bd { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; background: rgba(0,0,0,.5); } .album { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; -webkit-box-sizing: border-box; width: 100%; margin-top: 34rpx; padding: 0 32rpx; overflow: hidden; } .album__media { position: relative; width: 250rpx; margin-right: 20rpx; overflow: hidden; } .album__cover { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; } .album__media::after { content: ""; display: block; padding-top: 100%; } .album__bd { position: relative; -webkit-box-flex: 1; } .album__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 94rpx; line-height: 1.3; overflow: hidden; font-size: 18px; font-weight: 300; } .fans_number { margin-top:16rpx; font-size:28rpx; } .author { display: -webkit-box; -webkit-box-align: center; margin-top: 16rpx; overflow: hidden; } .author__avatar { display: block; width: 48rpx; height: 48rpx; margin-right: 16rpx; border-radius: 48rpx; } .author__bd { -webkit-box-flex: 1; } .author__name { display: block; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; color: #fff; } .album__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 72rpx; overflow: hidden; margin-top: 16rpx; font-size: 12px; } .opt_box { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; height: 196rpx; padding: 0 32rpx; -webkit-transition: 1s ease-in-out; } .btn_play_all { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; min-width: 260rpx; padding: 0 40rpx; height: 80rpx; overflow: hidden; text-align: center; font-size: 16px; color: #fff; border-radius: 40rpx; background: #31c27c; } .btn_play_all::before { content: ""; display: block; height: 0; width: 0; margin-right: -6rpx; border-color: transparent transparent transparent #fff; border-width: 14rpx 22rpx; border-style: solid; border-radius: 4rpx; } .info_box__bg { position: absolute; top: 0; left: 0; z-index: 3; width: 100%; height: 100%; object-fit: cover; -webkit-transform: scale(1.1) translateZ(0); -webkit-filter: blur(36px); } .wrap { /* position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; padding-bottom: 0; */ overflow: hidden; } .main { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; padding-top: 480rpx; padding-bottom: 100rpx; overflow: hidden; will-change: transform; -webkit-transform: translateZ(0); } .count_box { position: relative; display: -webkit-box; -webkit-box-align: center; height: 108rpx; margin: 0 32rpx -20rpx; } .count_box__desc { font-size: 14px; } .count_box__number { margin-left: 10rpx; } .qui_list { overflow: hidden; } .qui_list__item { position: relative; display: -webkit-box; } .qui_list__order { display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; -webkit-box-align: center; width: 90rpx; margin-right: -32rpx; font-size: 32rpx; } .qui_list__bd { position: relative; -webkit-box-flex: 1; display: -webkit-box; -webkit-box-align: center; padding: 20rpx 32rpx; overflow: hidden; } .qui_list__box { -webkit-box-flex: 1; display: -webkit-box; -webkit-box-orient: vertical; } .qui_list__tit { font-size: 16px; color: #000; display: -webkit-box; -webkit-box-align: center; overflow: hidden; max-width: 94%; white-space: nowrap; text-overflow: ellipsis; } .qui_list__desc{ display: -webkit-box; -webkit-box-align: center; overflow: hidden; font-size:12px; } .qui_list__txt { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size:16px; } .check_more { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; height: 64rpx; margin-bottom: 30rpx; font-size: 28rpx; } .qui_tit { position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; -webkit-box-align: center; height: 110rpx; padding: 0 80rpx; overflow: hidden; text-align: center; } .intro { position: relative; margin: 0 32rpx 40rpx; overflow: hidden; text-align: justify; word-wrap: break-word; font-size: 14px; } ================================================ FILE: project.config.json ================================================ { "description": "项目配置文件", "packOptions": { "ignore": [] }, "setting": { "urlCheck": true, "es6": true, "postcss": true, "minified": true, "newFeature": true, "autoAudits": false }, "compileType": "miniprogram", "libVersion": "2.5.1", "appid": "wxbc620d9c9d303f95", "projectname": "weChatApp-HMusic", "debugOptions": { "hidedInDevtools": [] }, "isGameTourist": false, "condition": { "search": { "current": -1, "list": [] }, "conversation": { "current": -1, "list": [] }, "game": { "currentL": -1, "list": [] }, "miniprogram": { "current": -1, "list": [] } } } ================================================ FILE: utils/util.js ================================================ const formatTime = date => { const year = date.getFullYear() const month = date.getMonth() + 1 const day = date.getDate() const hour = date.getHours() const minute = date.getMinutes() const second = date.getSeconds() return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') } const formatNumber = n => { n = n.toString() return n[1] ? n : '0' + n } module.exports = { formatTime: formatTime } ================================================ FILE: weui.wxss ================================================ /*! * WeUI v1.1.1 (https://github.com/weui/weui-wxss) * Copyright 2017 Tencent, Inc. * Licensed under the MIT license */ page{line-height:1.6;font-family:-apple-system-font,Helvetica Neue,sans-serif}icon{vertical-align:middle}.weui-cells{position:relative;margin-top:1.17647059em;background-color:#fff;line-height:1.41176471;font-size:17px}.weui-cells:before{top:0;border-top:1rpx solid #d9d9d9}.weui-cells:after,.weui-cells:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#d9d9d9}.weui-cells:after{bottom:0;border-bottom:1rpx solid #d9d9d9}.weui-cells__title{margin-top:.77em;margin-bottom:.3em;padding-left:15px;padding-right:15px;color:#999;font-size:14px}.weui-cells_after-title{margin-top:0}.weui-cells__tips{margin-top:.3em;color:#999;padding-left:15px;padding-right:15px;font-size:14px}.weui-cell{padding:10px 15px;position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-cell:before{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #d9d9d9;color:#d9d9d9;left:15px}.weui-cell:first-child:before{display:none}.weui-cell_active{background-color:#ececec}.weui-cell_primary{-webkit-box-align:start;-webkit-align-items:flex-start;align-items:flex-start}.weui-cell__bd{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-cell__ft{text-align:right;color:#999}.weui-cell_access{color:inherit}.weui-cell__ft_in-access{padding-right:13px;position:relative}.weui-cell__ft_in-access:after{content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;-webkit-transform:matrix(.71,.71,-.71,.71,0,0);transform:matrix(.71,.71,-.71,.71,0,0);position:relative;top:-2px;position:absolute;top:50%;margin-top:-4px;right:2px}.weui-cell_link{color:#586c94;font-size:14px}.weui-cell_link:active{background-color:#ececec}.weui-cell_link:first-child:before{display:block}.weui-icon-radio{margin-left:3.2px;margin-right:3.2px}.weui-icon-checkbox_circle,.weui-icon-checkbox_success{margin-left:4.6px;margin-right:4.6px}.weui-check__label:active{background-color:#ececec}.weui-check{position:absolute;left:-9999px}.weui-check__hd_in-checkbox{padding-right:.35em}.weui-cell__ft_in-radio{padding-left:.35em}.weui-cell_input{padding-top:0;padding-bottom:0}.weui-label{width:105px;word-wrap:break-word;word-break:break-all}.weui-input{height:2.58823529em;min-height:2.58823529em;line-height:2.58823529em}.weui-toptips{position:fixed;-webkit-transform:translateZ(0);transform:translateZ(0);top:0;left:0;right:0;padding:5px;font-size:14px;text-align:center;color:#fff;z-index:5000;word-wrap:break-word;word-break:break-all}.weui-toptips_warn{background-color:#e64340}.weui-textarea{display:block;width:100%}.weui-textarea-counter{color:#b2b2b2;text-align:right}.weui-cell_warn,.weui-textarea-counter_warn{color:#e64340}.weui-form-preview{position:relative;background-color:#fff}.weui-form-preview:before{top:0;border-top:1rpx solid #d9d9d9}.weui-form-preview:after,.weui-form-preview:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#d9d9d9}.weui-form-preview:after{bottom:0;border-bottom:1rpx solid #d9d9d9}.weui-form-preview__value{font-size:14px}.weui-form-preview__value_in-hd{font-size:26px}.weui-form-preview__hd{position:relative;padding:10px 15px;text-align:right;line-height:2.5em}.weui-form-preview__hd:after{content:" ";position:absolute;left:0;bottom:0;right:0;height:1px;border-bottom:1rpx solid #d9d9d9;color:#d9d9d9;left:15px}.weui-form-preview__bd{padding:10px 15px;font-size:.9em;text-align:right;color:#999;line-height:2}.weui-form-preview__ft{position:relative;line-height:50px;display:-webkit-box;display:-webkit-flex;display:flex}.weui-form-preview__ft:after{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #d5d5d6;color:#d5d5d6}.weui-form-preview__item{overflow:hidden}.weui-form-preview__label{float:left;margin-right:1em;min-width:4em;color:#999;text-align:justify;text-align-last:justify}.weui-form-preview__value{display:block;overflow:hidden;word-break:normal;word-wrap:break-word}.weui-form-preview__btn{position:relative;display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;color:#3cc51f;text-align:center}.weui-form-preview__btn:after{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1rpx solid #d5d5d6;color:#d5d5d6}.weui-form-preview__btn:first-child:after{display:none}.weui-form-preview__btn_active{background-color:#eee}.weui-form-preview__btn_default{color:#999}.weui-form-preview__btn_primary{color:#0bb20c}.weui-cell_select{padding:0}.weui-select{position:relative;padding-left:15px;padding-right:30px;height:2.58823529em;min-height:2.58823529em;line-height:2.58823529em;border-right:1rpx solid #d9d9d9}.weui-select:before{content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;-webkit-transform:matrix(.71,.71,-.71,.71,0,0);transform:matrix(.71,.71,-.71,.71,0,0);position:relative;top:-2px;position:absolute;top:50%;right:15px;margin-top:-4px}.weui-select_in-select-after{padding-left:0}.weui-cell__bd_in-select-before,.weui-cell__hd_in-select-after{padding-left:15px}.weui-cell_vcode{padding-right:0}.weui-vcode-btn,.weui-vcode-img{margin-left:5px;height:2.58823529em;vertical-align:middle}.weui-vcode-btn{display:inline-block;padding:0 .6em 0 .7em;border-left:1px solid #e5e5e5;line-height:2.58823529em;font-size:17px;color:#3cc51f;white-space:nowrap}.weui-vcode-btn:active{color:#52a341}.weui-cell_switch{padding-top:6px;padding-bottom:6px}.weui-uploader__hd{display:-webkit-box;display:-webkit-flex;display:flex;padding-bottom:10px;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-uploader__title{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-uploader__info{color:#b2b2b2}.weui-uploader__bd{margin-bottom:-4px;margin-right:-9px;overflow:hidden}.weui-uploader__file{float:left;margin-right:9px;margin-bottom:9px}.weui-uploader__img{display:block;width:79px;height:79px}.weui-uploader__file_status{position:relative}.weui-uploader__file_status:before{content:" ";position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.5)}.weui-uploader__file-content{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#fff}.weui-uploader__input-box{float:left;position:relative;margin-right:9px;margin-bottom:9px;width:77px;height:77px;border:1px solid #d9d9d9}.weui-uploader__input-box:after,.weui-uploader__input-box:before{content:" ";position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#d9d9d9}.weui-uploader__input-box:before{width:2px;height:39.5px}.weui-uploader__input-box:after{width:39.5px;height:2px}.weui-uploader__input-box:active{border-color:#999}.weui-uploader__input-box:active:after,.weui-uploader__input-box:active:before{background-color:#999}.weui-uploader__input{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;opacity:0}.weui-article{padding:20px 15px;font-size:15px}.weui-article__section{margin-bottom:1.5em}.weui-article__h1{font-size:18px;font-weight:400;margin-bottom:.9em}.weui-article__h2{font-size:16px;font-weight:400;margin-bottom:.34em}.weui-article__h3{font-weight:400;font-size:15px;margin-bottom:.34em}.weui-article__p{margin:0 0 .8em}.weui-msg{padding-top:36px;text-align:center}.weui-msg__link{display:inline;color:#586c94}.weui-msg__icon-area{margin-bottom:30px}.weui-msg__text-area{margin-bottom:25px;padding:0 20px}.weui-msg__title{margin-bottom:5px;font-weight:400;font-size:20px}.weui-msg__desc{font-size:14px;color:#999}.weui-msg__opr-area{margin-bottom:25px}.weui-msg__extra-area{margin-bottom:15px;font-size:14px;color:#999}@media screen and (min-height:438px){.weui-msg__extra-area{position:fixed;left:0;bottom:0;width:100%;text-align:center}}.weui-flex{display:-webkit-box;display:-webkit-flex;display:flex}.weui-flex__item{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-btn{margin-top:15px}.weui-btn:first-child{margin-top:0}.weui-btn-area{margin:1.17647059em 15px .3em}.weui-agree{display:block;padding:.5em 15px;font-size:13px}.weui-agree__text{color:#999}.weui-agree__link{display:inline;color:#586c94}.weui-agree__checkbox{position:absolute;left:-9999px}.weui-agree__checkbox-icon{position:relative;top:2px;display:inline-block;border:1px solid #d1d1d1;background-color:#fff;border-radius:3px;width:11px;height:11px}.weui-agree__checkbox-icon-check{position:absolute;top:1px;left:1px}.weui-footer{color:#999;font-size:14px;text-align:center}.weui-footer_fixed-bottom{position:fixed;bottom:.52em;left:0;right:0}.weui-footer__links{font-size:0}.weui-footer__link{display:inline-block;vertical-align:top;margin:0 .62em;position:relative;font-size:14px;color:#586c94}.weui-footer__link:before{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1rpx solid #c7c7c7;color:#c7c7c7;left:-.65em;top:.36em;bottom:.36em}.weui-footer__link:first-child:before{display:none}.weui-footer__text{padding:0 .34em;font-size:12px}.weui-grids{border-top:1rpx solid #d9d9d9;border-left:1rpx solid #d9d9d9;overflow:hidden}.weui-grid{position:relative;float:left;padding:20px 10px;width:33.33333333%;box-sizing:border-box;border-right:1rpx solid #d9d9d9;border-bottom:1rpx solid #d9d9d9}.weui-grid_active{background-color:#ececec}.weui-grid__icon{display:block;width:28px;height:28px;margin:0 auto}.weui-grid__label{margin-top:5px;display:block;text-align:center;color:#000;font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.weui-loading{margin:0 5px;width:20px;height:20px;display:inline-block;vertical-align:middle;-webkit-animation:a 1s steps(12) infinite;animation:a 1s steps(12) infinite;background:transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;background-size:100%}.weui-loading.weui-loading_transparent{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect xmlns='http://www.w3.org/2000/svg' width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.56)' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.5)' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.43)' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.38)' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.32)' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.28)' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.25)' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.2)' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.17)' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.14)' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.1)' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.03)' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E")}@-webkit-keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.weui-badge{display:inline-block;padding:.15em .4em;min-width:8px;border-radius:18px;background-color:#e64340;color:#fff;line-height:1.2;text-align:center;font-size:12px;vertical-align:middle}.weui-badge_dot{padding:.4em;min-width:0}.weui-loadmore{width:65%;margin:1.5em auto;line-height:1.6em;font-size:14px;text-align:center}.weui-loadmore__tips{display:inline-block;vertical-align:middle}.weui-loadmore_line{border-top:1px solid #e5e5e5;margin-top:2.4em}.weui-loadmore__tips_in-line{position:relative;top:-.9em;padding:0 .55em;background-color:#fff;color:#999}.weui-loadmore__tips_in-dot{position:relative;padding:0 .16em;width:4px;height:1.6em}.weui-loadmore__tips_in-dot:before{content:" ";position:absolute;top:50%;left:50%;margin-top:-1px;margin-left:-2px;width:4px;height:4px;border-radius:50%;background-color:#e5e5e5}.weui-panel{background-color:#fff;margin-top:10px;position:relative;overflow:hidden}.weui-panel:first-child{margin-top:0}.weui-panel:before{top:0;border-top:1rpx solid #e5e5e5}.weui-panel:after,.weui-panel:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#e5e5e5}.weui-panel:after{bottom:0;border-bottom:1rpx solid #e5e5e5}.weui-panel__hd{padding:14px 15px 10px;color:#999;font-size:13px;position:relative}.weui-panel__hd:after{content:" ";position:absolute;left:0;bottom:0;right:0;height:1px;border-bottom:1rpx solid #e5e5e5;color:#e5e5e5;left:15px}.weui-media-box{padding:15px;position:relative}.weui-media-box:before{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #e5e5e5;color:#e5e5e5;left:15px}.weui-media-box:first-child:before{display:none}.weui-media-box__title{font-weight:400;font-size:17px;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;word-wrap:break-word;word-break:break-all}.weui-media-box__desc{color:#999;font-size:13px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.weui-media-box__info{margin-top:15px;padding-bottom:5px;font-size:13px;color:#cecece;line-height:1em;list-style:none;overflow:hidden}.weui-media-box__info__meta{float:left;padding-right:1em}.weui-media-box__info__meta_extra{padding-left:1em;border-left:1px solid #cecece}.weui-media-box__title_in-text{margin-bottom:8px}.weui-media-box_appmsg{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-media-box__thumb{width:100%;height:100%;vertical-align:top}.weui-media-box__hd_in-appmsg{margin-right:.8em;width:60px;height:60px;line-height:60px;text-align:center}.weui-media-box__bd_in-appmsg{-webkit-box-flex:1;-webkit-flex:1;flex:1;min-width:0}.weui-media-box_small-appmsg{padding:0}.weui-cells_in-small-appmsg{margin-top:0}.weui-cells_in-small-appmsg:before{display:none}.weui-progress{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-progress__bar{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-progress__opr{margin-left:15px;font-size:0}.weui-navbar{display:-webkit-box;display:-webkit-flex;display:flex;position:absolute;z-index:500;top:0;width:100%;border-bottom:1rpx solid #ccc}.weui-navbar__item{position:relative;display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;padding:13px 0;text-align:center;font-size:0}.weui-navbar__item.weui-bar__item_on{color:#1aad19}.weui-navbar__slider{position:absolute;content:" ";left:0;bottom:0;width:6em;height:3px;background-color:#1aad19;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.weui-navbar__title{display:inline-block;font-size:15px;max-width:8em;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.weui-tab{position:relative;height:100%}.weui-tab__panel{box-sizing:border-box;height:100%;padding-top:50px;overflow:auto;-webkit-overflow-scrolling:touch}.weui-search-bar{position:relative;padding:8px 10px;display:-webkit-box;display:-webkit-flex;display:flex;box-sizing:border-box;background-color:#efeff4;border-top:1rpx solid #d7d6dc;border-bottom:1rpx solid #d7d6dc}.weui-icon-search{margin-right:8px;font-size:inherit}.weui-icon-search_in-box{position:absolute;left:10px;top:7px}.weui-search-bar__text{display:inline-block;font-size:14px;vertical-align:middle}.weui-search-bar__form{position:relative;-webkit-box-flex:1;-webkit-flex:auto;flex:auto;border-radius:5px;background:#fff;border:1rpx solid #e6e6ea}.weui-search-bar__box{position:relative;padding-left:30px;padding-right:30px;width:100%;box-sizing:border-box;z-index:1}.weui-search-bar__input{height:28px;line-height:28px;font-size:14px}.weui-icon-clear{position:absolute;top:0;right:0;padding:7px 8px;font-size:0}.weui-search-bar__label{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;border-radius:3px;text-align:center;color:#9b9b9b;background:#fff;line-height:28px}.weui-search-bar__cancel-btn{margin-left:10px;line-height:28px;color:#09bb07;white-space:nowrap}