热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

微信小程序开发案例之音乐播放器

微信小程序,小程序社区,weixin,微信小程序小白项目开发案例之音乐播放器——推荐页,
推荐页
完成标题栏后我们开始编写推荐页,即mainView=1时所要显示的页面。
根据图10-2所示,推荐页由上方的轮播组件(banner)以及下方的电台列表两部分构成。
为了完成这个页面,我们先来看看网络请求返回的数据格式。
这里使用开源数据:
http://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg
参照API接口章节里的内容,我们在services文件夹下创建music.js文件,在里面开始编写网络请求代码:

// 获取首页的音乐数据
function getRecommendMusic(callback){
    //请求所需数据
    var data = {
            g_tk: 5381,
            uin: 0,
            format: 'json',
            inCharset: 'utf-8',
            outCharset: 'utf-8',
            notice: 0,
            platform: 'h5',
            needNewCode: 1,
            _: Date.now()
        };
        wx.request({
            //地址
            url: 'http://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',
            //数据
            data: data,
            //表示返回类型为JSON
            header: {
                'Content-Type': 'application/json'
            },
            success: function (res) {
                if (res.statusCode == 200) {
                    callback(res.data)
                } else {
                }
            }
        });
}
module.exports = {
  getRecommendMusic:getRecommendMusic
}

通过这个请求,返回json格式的数据样式为:
{
    "code": 0,
    "data": {
        "slider": [
            {
                "linkUrl": "http://share.y.qq.com/l?g=2766&id=1842365&g_f=shoujijiaodian",
                "picUrl": "http://y.gtimg.cn/music/photo_new/T003R720x288M000002QUG1D0iCyQM.jpg",
                "id": 8642
            },
            {
                "linkUrl": "http://y.qq.com/live/zhibo/0214liwen.html",
                "picUrl": "http://y.gtimg.cn/music/photo_new/T003R720x288M000003KFpsf1mPzlY.jpg",
                "id": 8645
            },
            {
                "linkUrl": "http://v.qq.com/live/p/topic/22876/preview.html",
                "picUrl": "http://y.gtimg.cn/music/photo_new/T003R720x288M000000ZZAWw1KsyoJ.jpg",
                "id": 8653
            },
            {
                "linkUrl": "http://y.qq.com/m/act/singer/index.html?ADTAG=shoujijiao",
                "picUrl": "http://y.gtimg.cn/music/photo_new/T003R720x288M000001MG8W3200tuD.jpg",
                "id": 8609
            },
            {
                "linkUrl": "http://y.qq.com/w/album.html?albummid=0035hOHV0uUWA9",
                "picUrl": "http://y.gtimg.cn/music/photo_new/T003R720x288M000000cfVE83KCkmz.jpg",
                "id": 8607
            }
        ],
        "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": []
    }
}


这里code为我们请求是否成功的标示,当它等于0时,表示请求成功。data里就是我们需要的数据,里面包含3个部分,我们需要使用的为前两个,即slider部分——为我们的轮播组件提供数据,以及radioList部分——为电台列表提供数据。 这两部分会分别以数组格式保存,通过名称来获取相应数据。
有了数据之后,我们开始编写显示数据的组件:



最外层使用view组件包裹,当currentView!=1时隐藏。
轮播组件使用swiper组件来完成,设置是否显示指示点,是否自动播放,切换间隔以及滑动时间4个属性。每个swiper-item为图片,使用item.picUrl从slider里获取数据。
电台部分使用列表格式,数据保存在radioList内。每个item包涵两个部分:图片和标题,以item.picUrl和item.Ftitle保存,此外还要保存每个item的ID(item.radioid)用于页面跳转。点击的响应事件定义为radioTap。
至此我们需要的数据有:indicatorDots,autoplay,interval,duration,slider,radioList。我们把这些加入到index.js中的data里吧。
//引用网络请求文件
var MusicService = require('../../services/music');
//获取应用实例
var app = getApp()
Page({
    data: {
        indicatorDots: true,
        autoplay: true,
        interval: 5000,
        duration: 1000,
        radioList: [],
        slider: [],
        mainView: 1,
    },
    onLoad: function () {
        var that = this;
        MusicService.getRecommendMusic(that.initPageData);
    },
})

data写好后,我们在onLoad里调用我们写好的网络请求函数,传入的参数(that.initPageData)即当请求成功后需要执行的函数,在这个函数里我们为数组radioList和slider赋值。

initPageData: function (data) {
        var self = this;
        //请求成功再赋值,需要判断code是否为0
        if (data.code == 0) {
            self.setData({
                slider: data.data.slider,
                radioList: data.data.radioList,
            })
        }
    },

到此为止我们的页面应该可以显示数据了,最后一步我们要给写好的view添加点击事件radioTap,让用户点击后跳转到play(音乐播放)页面。
radioTap: function (e) {
        var dataSet = e.currentTarget.dataset;
        ...
    },

在跳转的时候,我们需要通过已经获得的radioid向网络请求数据,返回歌曲列表,并且在播放页面加载这个列表,这一部分就留到音乐播放页再完成吧。

以上就是微信小程序开发案例之音乐播放器的详细内容,更多请关注其它相关文章!


推荐阅读
  • 小程序的授权和登陆
    小程序的授权和登陆 ... [详细]
  • 2022年2月 微信小程序 app.json 配置详解:启用调试模式
    本文将详细介绍如何在微信小程序的 app.json 文件中启用调试模式(debug),并通过实际案例展示其配置方法和应用场景。 ... [详细]
  • 周排行与月排行榜开发总结
    本文详细介绍了如何在PHP中实现周排行和月排行榜的开发,包括数据库设计、数据记录和查询方法。涉及的知识点包括MySQL的GROUP BY、WEEK和MONTH函数。 ... [详细]
  • 本文介绍了 Go 语言中的高性能、可扩展、轻量级 Web 框架 Echo。Echo 框架简单易用,仅需几行代码即可启动一个高性能 HTTP 服务。 ... [详细]
  • 2020年9月15日,Oracle正式发布了最新的JDK 15版本。本次更新带来了许多新特性,包括隐藏类、EdDSA签名算法、模式匹配、记录类、封闭类和文本块等。 ... [详细]
  • 如何发送微信语音口令红包
    微信不仅支持传统的文字口令红包,还新增了语音口令红包功能。用户可以通过语音口令来领取红包,增加了趣味性和互动性。本文将详细介绍如何发送微信语音口令红包。 ... [详细]
  • 近期,微信公众平台上的HTML5游戏引起了广泛讨论,预示着HTML5游戏将迎来新的发展机遇。磊友科技的赵霏,作为一名HTML5技术的倡导者,分享了他在微信平台上开发HTML5游戏的经验和见解。 ... [详细]
  • 微信小程序详解:概念、功能与优势
    微信公众平台近期向200位开发者发送了小程序的内测邀请。许多人对微信小程序的概念还不是很清楚。本文将详细介绍微信小程序的定义、功能及其独特优势。 ... [详细]
  • 对于众多创业公司而言,选择小程序或小视频的发展方向至关重要。本文将深入分析小程序和小视频的特点、优势及局限,帮助创业者做出更明智的选择。 ... [详细]
  • MySQL 5.7 学习指南:SQLyog 中的主键、列属性和数据类型
    本文介绍了 MySQL 5.7 中主键(Primary Key)和自增(Auto-Increment)的概念,以及如何在 SQLyog 中设置这些属性。同时,还探讨了数据类型的分类和选择,以及列属性的设置方法。 ... [详细]
  • HTML中span元素为何会脱离li元素对齐?
    在HTML布局中,有时会遇到span元素未能与li元素保持对齐的问题。本文将探讨这一现象的原因,并提供解决方案。 ... [详细]
  • C盘无法格式化的原因及解决方法
    本文探讨了C盘无法格式化的原因,并提供了详细的解决方案,帮助用户顺利进行系统维护。 ... [详细]
  • 第二十五天接口、多态
    1.java是面向对象的语言。设计模式:接口接口类是从java里衍生出来的,不是python原生支持的主要用于继承里多继承抽象类是python原生支持的主要用于继承里的单继承但是接 ... [详细]
  • Scrum立会报告+燃尽图(十月十七日总第八次):分配Alpha阶段任务
    此作业要求参见:https:edu.cnblogs.comcampusnenu2018fallhomework2246项目地址:https:git.co ... [详细]
  • 全面解析JavaScript代码注释技巧与标准规范
    在Web前端开发中,JavaScript代码的可读性和维护性至关重要。本文将详细介绍如何有效地使用注释来提高代码的可读性,并探讨JavaScript代码注释的最佳实践和标准规范。通过合理的注释,开发者可以更好地理解和维护复杂的代码逻辑,提升团队协作效率。 ... [详细]
author-avatar
气质未央若
这个家伙很懒,什么也没留下!
RankList | 热门文章