本篇內(nèi)容主要講解“微信小程序如何實(shí)現(xiàn)一個(gè)音樂(lè)播放器”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“微信小程序如何實(shí)現(xiàn)一個(gè)音樂(lè)播放器”吧!
創(chuàng)新互聯(lián)公司從2013年創(chuàng)立,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命,1280元宏偉做網(wǎng)站,已為上家服務(wù),為宏偉各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220推薦頁(yè)
完成標(biāo)題欄后我們開(kāi)始編寫推薦頁(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
我們?cè)趕ervices文件夾下創(chuàng)建music.js文件,在里面開(kāi)始編寫網(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, //表示返回類型為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ò)名稱來(lái)獲取相應(yīng)數(shù)據(jù)。
有了數(shù)據(jù)之后,我們開(kāi)始編寫顯示數(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">電臺(tái)</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時(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寫好后,我們?cè)趏nLoad里調(diào)用我們寫好的網(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ù)了,最后一步我們要給寫好的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è)再完成吧。
到此,相信大家對(duì)“微信小程序如何實(shí)現(xiàn)一個(gè)音樂(lè)播放器”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是創(chuàng)新互聯(lián)建站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
新聞名稱:微信小程序如何實(shí)現(xiàn)一個(gè)音樂(lè)播放器-創(chuàng)新互聯(lián)
本文地址:http://muchs.cn/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)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容