日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

這篇文章給大家分享的是有關(guān)微信小程序怎么實(shí)現(xiàn)一個(gè)音樂(lè)播放器的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的鎮(zhèn)安網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

推薦頁(yè)
完成標(biāo)題欄后我們開(kāi)始編寫(xiě)推薦頁(yè)，即mainView=1時(shí)所要顯示的頁(yè)面。
根據(jù)圖10-2所示，推薦頁(yè)由上方的輪播組件（banner）以及下方的電臺(tái)列表兩部分構(gòu)成。
為了完成這個(gè)頁(yè)面，我們先來(lái)看看網(wǎng)絡(luò)請(qǐng)求返回的數(shù)據(jù)格式。
這里使用開(kāi)源數(shù)據(jù)：
http://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg
參照API接口章節(jié)里的內(nèi)容，我們?cè)趕ervices文件夾下創(chuàng)建music.js文件，在里面開(kāi)始編寫(xiě)網(wǎng)絡(luò)請(qǐng)求代碼：

// 獲取首頁(yè)的音樂(lè)數(shù)據(jù)
function getRecommendMusic(callback){
    //請(qǐng)求所需數(shù)據(jù)
    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',
            //數(shù)據(jù)
            data: data,
            //表示返回類(lèi)型為JSON
            header: {
                'Content-Type': 'application/json'
            },
            success: function (res) {
                if (res.statusCode == 200) {
                    callback(res.data)
                } else {
                }
            }
        });
}
module.exports = {
  getRecommendMusic:getRecommendMusic
}
復(fù)制代碼
通過(guò)這個(gè)請(qǐng)求，返回json格式的數(shù)據(jù)樣式為：
{
    "code": 0,
    "data": {
        "slider": [
            {
                "linkUrl": "/tupian/20230522/index.html
                "picUrl": "/tupian/20230522/404.html
                "id": 8642
            },
            {
                "linkUrl": "http://y.qq.com/live/zhibo/0214liwen.html",
                "picUrl": "/tupian/20230522/404.html
                "id": 8645
            },
            {
                "linkUrl": "/tupian/20230522/preview.html",
                "picUrl": "/tupian/20230522/404.html
                "id": 8653
            },
            {
                "linkUrl": "/tupian/20230522/index.html
                "picUrl": "/tupian/20230522/404.html
                "id": 8609
            },
            {
                "linkUrl": "/tupian/20230522/album.html
                "picUrl": "/tupian/20230522/404.html
                "id": 8607
            }
        ],
        "radioList": [
            {
                "picUrl": "/tupian/20230522/404.html
                "Ftitle": "熱歌",
                "radioid": 199
            },
            {
                "picUrl": "/tupian/20230522/404.html
                "Ftitle": "一人一首招牌歌",
                "radioid": 307
            }
        ],
        "songList": []
    }
}

這里code為我們請(qǐng)求是否成功的標(biāo)示，當(dāng)它等于0時(shí)，表示請(qǐng)求成功。data里就是我們需要的數(shù)據(jù)，里面包含3個(gè)部分，我們需要使用的為前兩個(gè)，即slider部分——為我們的輪播組件提供數(shù)據(jù)，以及radioList部分——為電臺(tái)列表提供數(shù)據(jù)。 這兩部分會(huì)分別以數(shù)組格式保存，通過(guò)名稱(chēng)來(lái)獲取相應(yīng)數(shù)據(jù)。
有了數(shù)據(jù)之后，我們開(kāi)始編寫(xiě)顯示數(shù)據(jù)的組件：

  
    
      
        
      
    
  
  
    電臺(tái)
    
      
        
          
          {{item.Ftitle}}
        
      
    
  

復(fù)制代碼
最外層使用view組件包裹，當(dāng)currentView!=1時(shí)隱藏。
輪播組件使用swiper組件來(lái)完成，設(shè)置是否顯示指示點(diǎn)，是否自動(dòng)播放，切換間隔以及滑動(dòng)時(shí)間4個(gè)屬性。每個(gè)swiper-item為圖片，使用item.picUrl從slider里獲取數(shù)據(jù)。
電臺(tái)部分使用列表格式，數(shù)據(jù)保存在radioList內(nèi)。每個(gè)item包涵兩個(gè)部分：圖片和標(biāo)題，以item.picUrl和item.Ftitle保存，此外還要保存每個(gè)item的ID（item.radioid)用于頁(yè)面跳轉(zhuǎn)。點(diǎn)擊的響應(yīng)事件定義為radioTap。
至此我們需要的數(shù)據(jù)有：indicatorDots，autoplay，interval，duration，slider，radioList。我們把這些加入到index.js中的data里吧。
//引用網(wǎng)絡(luò)請(qǐng)求文件
var MusicService = require('../../services/music');
//獲取應(yīng)用實(shí)例
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寫(xiě)好后，我們?cè)趏nLoad里調(diào)用我們寫(xiě)好的網(wǎng)絡(luò)請(qǐng)求函數(shù)，傳入的參數(shù)（that.initPageData)即當(dāng)請(qǐng)求成功后需要執(zhí)行的函數(shù)，在這個(gè)函數(shù)里我們?yōu)閿?shù)組radioList和slider賦值。

initPageData: function (data) {
        var self = this;
        //請(qǐng)求成功再賦值，需要判斷code是否為0
        if (data.code == 0) {
            self.setData({
                slider: data.data.slider,
                radioList: data.data.radioList,
            })
        }
    },
復(fù)制代碼
到此為止我們的頁(yè)面應(yīng)該可以顯示數(shù)據(jù)了，最后一步我們要給寫(xiě)好的view添加點(diǎn)擊事件radioTap，讓用戶點(diǎn)擊后跳轉(zhuǎn)到play（音樂(lè)播放）頁(yè)面。
radioTap: function (e) {
        var dataSet = e.currentTarget.dataset;
        ...
    },

在跳轉(zhuǎn)的時(shí)候，我們需要通過(guò)已經(jīng)獲得的radioid向網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)，返回歌曲列表，并且在播放頁(yè)面加載這個(gè)列表，這一部分就留到音樂(lè)播放頁(yè)再完成吧。

感謝各位的閱讀！關(guān)于“微信小程序怎么實(shí)現(xiàn)一個(gè)音樂(lè)播放器”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

文章標(biāo)題：微信小程序怎么實(shí)現(xiàn)一個(gè)音樂(lè)播放器-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://www.dlmjj.cn/article/csjopo.html