微信小程序如何实现一个音乐播放器

本篇内容主要讲解“微信小程序如何实现一个音乐播放器”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序如何实现一个音乐播放器”吧!

创新互联公司是一家专注于网站建设、成都做网站与策划设计,汉阳网站建设哪家好?创新互联公司做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:汉阳等地区。汉阳做网站价格咨询:18982081108

推荐页
完成标题栏后我们开始编写推荐页,即mainView=1时所要显示的页面。
根据图10-2所示,推荐页由上方的轮播组件(banner)以及下方的电台列表两部分构成。
为了完成这个页面,我们先来看看网络请求返回的数据格式。
这里使用开源数据:
http://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg
我们在services文件夹下创建music.js文件,在里面开始编写网络请求代码:

// 获取首页的音乐数据
function getRecommendMusic(callback){
    //请求所需数据
    var data = {
            g_tk: 5381,
            uin: 0,
            format: 'json',
            inCharset: 'utf-8',
            outCharset: 'utf-8',
            notice: 0,
            platform: 'h6',
            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": "/upload/otherpic73/143566.jpg",
                "id": 8642
            },
            {
                "linkUrl": "http://y.qq.com/live/zhibo/0214liwen.html",
                "picUrl": "/upload/otherpic73/143568.jpg",
                "id": 8645
            },
            {
                "linkUrl": "http://v.qq.com/live/p/topic/22876/preview.html",
                "picUrl": "/upload/otherpic73/143569.jpg",
                "id": 8653
            },
            {
                "linkUrl": "http://y.qq.com/m/act/singer/index.html?ADTAG=shoujijiao",
                "picUrl": "/upload/otherpic73/143571.jpg",
                "id": 8609
            },
            {
                "linkUrl": "http://y.qq.com/w/album.html?albummid=0035hOHV0uUWA9",
                "picUrl": "/upload/otherpic73/143573.jpg",
                "id": 8607
            }
        ],
        "radioList": [
            {
                "picUrl": "/upload/otherpic73/143574.jpg",
                "Ftitle": "热歌",
                "radioid": 199
            },
            {
                "picUrl": "/upload/otherpic73/143575.jpg",
                "Ftitle": "一人一首招牌歌",
                "radioid": 307
            }
        ],
        "songList": []
    }
}


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


  
    
      
        
      
    
  
  
    电台
    
      
        
          
          {{item.Ftitle}}
        
      
    
  

复制代码
最外层使用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向网络请求数据,返回歌曲列表,并且在播放页面加载这个列表,这一部分就留到音乐播放页再完成吧。

到此,相信大家对“微信小程序如何实现一个音乐播放器”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


当前题目:微信小程序如何实现一个音乐播放器
网页路径:http://scyanting.com/article/pigpch.html