微信小程序怎么实现音乐排行榜


今天小编给大家分享一下微信小程序怎么实现音乐排行榜的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
  排行页我们先在services/music.js里添加网络请求函数:
function getTopMusic(callback){ var data = { format: ‘json’, g_tk: 5381, uin: 0, inCharset: ‘utf-8’, outCharset: ‘utf-8’, notice: 0, platform: ‘h6’, needNewCode: 1, _: Date.now() }; wx.request({ url: ‘http://c.y.qq.com/v8/fcg-bin/fcg_myqq_toplist.fcg’, data: data, header: { ‘Content-Type’: ‘application/json’ }, success: function (res) { if (res.statusCode == 200) { callback(res.data) } else {
} } });}
module.exports = {getRecommendMusic:getRecommendMusicgetTopMusic:getTopMusic}复制代码  这里返回的JSON格式数据为:{ “code”: 0, “subcode”: 0, “message”: “”, “default”: 0, “data”: { “topList”: [ { “id”: 4, “listenCount”: 20000000, “picUrl”: “https://cache.byun.com/upload/information/20220117/465/14207.jpg”, “songList”: [ { “singername”: “赵雷”, “songname”: “理想 (Live)” }, { “singername”: “薛之谦/欧阳娜娜”, “songname”: “小幸运 (Live)” }, { “singername”: “迪玛希Dimash”, “songname”: “秋意浓 (Live)” } ], “topTitle”: “巅峰榜流行指数”, “type”: 0 }, { “id”: 26, “listenCount”: 19900000, “picUrl”: “https://cache.byun.com/upload/information/20220117/465/14208.jpg”, “songList”: [ { “singername”: “李玉刚”, “songname”: “刚好遇见你” }, { “singername”: “周杰伦”, “songname”: “告白气球” }, { “singername”: “张杰”, “songname”: “三生三世” } ], “topTitle”: “巅峰榜热歌”, “type”: 0 }, ] }}复制代码  可以看到这里显示了两类排行榜:“巅峰榜流行指数”与“巅峰榜热歌”,篇幅原因省去了其他12类,所以实际返回的排行榜类别为14类,每一类包涵标题(“topTitle”),该类的图标图片地址(“picUrl”),以及前三位的歌曲列表(“songList”)。因此,我们最后要达成的页面应该为图所示。  同理上一节内容,我们新增topList数组,调用网络请求,使用回调函数为topList赋值。//引用网络请求文件var MusicService = require(‘../../services/music’);
//获取应用实例var app = getApp()Page({ data: { indicatorDots: true, autoplay: true, interval: 5000, duration: 1000, radioList: [], slider: [], mainView: 1, topList:[] }, onLoad: function () { var that = this; MusicService.getRecommendMusic(that.initPageData); MusicService.getTopMusic(that.initTopList); },

initTopList: function (data) { var self = this; if (data.code == 0) { self.setData({ topList: data.data.topList }) } },

})
复制代码  排行页主要由列表组成,所以使用wx:for为topList免费云主机域名每一项创建view,绑定每一项的id和点击事件topListTap。复制代码  列表的每一项由图片(数据源为picUrl)以及前三名歌曲列表(数据源为songList)组成。我们把这一部分加入到省略号位置。 复制代码  图片定义了属性aspectFit,即在保持纵横比的前提下,缩放图片,使图片在容器内都显示出来。    最后我们添加歌曲列表,每一项由文字(歌曲名-歌手)以及表示排名的图片组成。这个图片为本地图片,保存在resources/images下,名称为1.png,2.png,3.png。所以这部分最终的代码为: {{item.songname}}-{{item.singername}} 复制代码  需要的格式文件代码为:.top-view { background:#f7f7f7; padding:20rpx;}.top-item { display:-webkit-box; height:200rpx; margin-bottom:20rpx; background:#fff; overflow: hidden;}.top-item-img { display:block; position:relative; width:200rpx; height:200rpx;}.top-item-info { margin:0 10rpx 0 20rpx; flex-direction:column;}.top-item-list { white-space:nowrap;}.top-icon { margin-top:16rpx; width:40rpx; height:40rpx;}.top-item-text { margin-bottom: 10rpx; font-size:40rpx;}复制代码  页面完成后,在index.js里添加点击事件的代码:topListTap: function (e) { wx.navigateTo({ url: ‘../toplist/toplist’ }) },复制代码  这样在点击之后就进入了列表页面,但这样还不能完成我们的要求,因为这样列表页完全不知道我们点击了哪一类。为了让列表页获取这个信息,我们需要把类的id传过去,这就需要我们在app.js里添加一个全局变量。//app.jsApp({onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync(‘logs’) || [] logs.unshift(Date.now()) wx.setStorageSync(‘logs’, logs)},getUserInfo:function(cb){ var that = this if(this.globalData.userInfo){ typeof cb == “function” && cb(this.globalData.userInfo) }else{ //调用登录接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo typeof cb == “function” && cb(that.globalData.userInfo) } }) } }) }},//这里是我们添加的代码!!!setGlobalData: function (obj) { for(var n in obj) { this.globalData[n] = obj[n]; }},globalData:{ userInfo:null}})复制代码  这里定义了一个方法,让我们可以向globalData里添加数据,之后我们只需在点击事件里调用这个方法就可以了:topListTap: function (e) { var _dataSet = e.currentTarget.dataset; //获取点击的view的数据 app.setGlobalData({ //将数据里的id传给globaldata topListId: _dataSet.id }); wx.navigateTo({ url: ‘../toplist/toplist’ }) },以上就是“微信小程序怎么实现音乐排行榜”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注百云主机行业资讯频道。

相关推荐: Css的优势有哪些

小编给大家分享一下Css的优势有哪些,相信大部分人都还不怎么了解,因此免费云主机域名分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 表现与内容分离 增强了网页的表现力 网站显示风格趋于统一1.行内样式,最直接最简单的…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 01/09 10:05
下一篇 01/09 10:05

相关推荐