微信小程序如何實現(xiàn)一個音樂播放器-創(chuàng)新互聯(lián)

本篇內(nèi)容主要講解“微信小程序如何實現(xiàn)一個音樂播放器”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“微信小程序如何實現(xiàn)一個音樂播放器”吧!

創(chuàng)新互聯(lián)公司從2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站設(shè)計、成都做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元宏偉做網(wǎng)站,已為上家服務(wù),為宏偉各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

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

// 獲取首頁的音樂數(shù)據(jù)
function getRecommendMusic(callback){
    //請求所需數(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,
            //表示返回類型為JSON
            header: {
                'Content-Type': 'application/json'
            },
            success: function (res) {
                if (res.statusCode == 200) {
                    callback(res.data)
                } else {
                }
            }
        });
}
module.exports = {
  getRecommendMusic:getRecommendMusic
}
復(fù)制代碼
通過這個請求，返回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為我們請求是否成功的標(biāo)示，當(dāng)它等于0時，表示請求成功。data里就是我們需要的數(shù)據(jù)，里面包含3個部分，我們需要使用的為前兩個，即slider部分——為我們的輪播組件提供數(shù)據(jù)，以及radioList部分——為電臺列表提供數(shù)據(jù)。這兩部分會分別以數(shù)組格式保存，通過名稱來獲取相應(yīng)數(shù)據(jù)。
有了數(shù)據(jù)之后，我們開始編寫顯示數(shù)據(jù)的組件：

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

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

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

到此，相信大家對“微信小程序如何實現(xiàn)一個音樂播放器”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)建站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

新聞名稱：微信小程序如何實現(xiàn)一個音樂播放器-創(chuàng)新互聯(lián)
本文地址：http://bm7419.com/article10/hshdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、電子商務(wù)、關(guān)鍵詞優(yōu)化、網(wǎng)站改版、搜索引擎優(yōu)化、虛擬主機(jī)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容