Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to realize a music player by WeChat Mini Programs". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how WeChat Mini Programs realizes a music player".

Recommendation page

After completing the title bar, we begin to write the recommendation page, which is the page to display when mainView=1.

As shown in figure 10-2, the recommendation page consists of a broadcast component (banner) at the top and a radio list below.

To complete this page, let's first look at the format of the data returned by the network request.

Open source data is used here:

Http://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg

We create the music.js file under the services folder, where we begin to write the network request code:

/ / get the music data of the home page function getRecommendMusic (callback) {/ / request the required data var data = {g_tk: 5381, uin: 0, format: 'json', inCharset:' utf-8', outCharset: 'utf-8', notice: 0, platform:' h6pm, needNewCode: 1 _: Date.now ()} Wx.request ({/ / address url: 'http://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg', / / data data: data, / / indicates that the return type is JSON header: {' Content-Type': 'application/json'} Success: function (res) {if (res.statusCode = = 200) {callback (res.data)} else {}) } module.exports = {getRecommendMusic:getRecommendMusic} copy the code through this request The data style returned in json format is: {"code": 0, "data": {"slider": [{"linkUrl": "http://share.y.qq.com/l?g=2766&id=1842365&g_f=shoujijiaodian"," picUrl ":" https://cache.yisu.com/upload/ask_collection/20210725/111/143566.jpg", " "id": 8642}, {"linkUrl": "http://y.qq.com/live/zhibo/0214liwen.html"," picUrl ":" https://cache.yisu.com/upload/ask_collection/20210725/111/143568.jpg", "id": 8645} {"linkUrl": "http://v.qq.com/live/p/topic/22876/preview.html"," picUrl ":" https://cache.yisu.com/upload/ask_collection/20210725/111/143569.jpg", "id": 8653} {"linkUrl": "http://y.qq.com/m/act/singer/index.html?ADTAG=shoujijiao"," picUrl ":" https://cache.yisu.com/upload/ask_collection/20210725/111/143571.jpg", "id": 8609} {"linkUrl": "http://y.qq.com/w/album.html?albummid=0035hOHV0uUWA9"," picUrl ":" https://cache.yisu.com/upload/ask_collection/20210725/111/143573.jpg", "id": 8607}] "radioList": [{"picUrl": "https://cache.yisu.com/upload/ask_collection/20210725/111/143574.jpg"," Ftitle ":" Hot Song "," radioid ": 199} {"picUrl": "https://cache.yisu.com/upload/ask_collection/20210725/111/143575.jpg"," Ftitle ":" one signature song "," radioid ": 307}]," songList ": []}}

Here code indicates whether the request is successful or not. When it is equal to 0, the request is successful. Data is the data we need, and it contains three parts, and what we need to use is the first two, the slider part-- which provides data for our carousel component, and the radioList part-- to provide data for the radio list. These two parts are saved in an array format, and the corresponding data is obtained by name.

Once we have the data, we begin to write components that display the data:

The outermost layer of the radio {{item.Ftitle}} copy code is wrapped with the view component and is hidden when currentViewbacks = 1. The carousel component uses the swiper component to set whether to display the indication point, whether to play automatically, the switching interval and the sliding time. Each swiper-item is a picture, and use item.picUrl to get data from slider. The radio part uses the list format, and the data is saved in radioList. Each item contains two parts: the picture and title, saved in item.picUrl and item.Ftitle, and the ID (item.radioid) of each item for page jump. The clicked response event is defined as radioTap. The data we need so far is: indicatorDots,autoplay,interval,duration,slider,radioList. Let's add these to the data in index.js. / / reference the network request file var MusicService = require ('.. /.. / services/music') / / get application instance 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);},})

After the data is written, we call the network request function we wrote in onLoad. The passed parameter (that.initPageData) is the function that needs to be executed when the request is successful. In this function, we assign values to the array radioList and slider.

InitPageData: function (data) {var self = this / / if the request is successful, you need to determine whether the code is 0 if (data.code = = 0) {self.setData ({slider: data.data.slider, radioList: data.data.radioList,})}}. After copying the code, our page should be able to display the data. In the last step, we need to add a click event radioTap to the written view to allow the user to click and jump to the play (music playback) page. RadioTap: function (e) {var dataSet = e.currentTarget.dataset;...}

When we jump, we need to request data from the network through the radioid we have obtained, return the song list, and load the list on the playback page. Save this part for the music playback page.

At this point, I believe you have a deeper understanding of "how to achieve a music player by WeChat Mini Programs". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.