preface

As a front-end xiaobai, has learned a month, for loop in the micro channel small program in the use of the common but; How do I get data from an official API and put it into different loops without repeating it? Let’s look at a small example to get a feel for it.

Primary interface analysis

Interface analysis

First of all, let’s take a look at one of the interfaces of netease Cloud Music:

This interface is relatively easy to do, mainly divided into two blocks, let’s start with the middle: the left side corresponds to the image of the chart, the right side is the song of the chart, and then each line is the same style, using the for loop to do it is very easy. Then let’s look at some of the other list areas: they are all three in a row with the top picture and the bottom text. This can also be done using a loop.

The data analysis

Here to share the API link: http://neteasecloudmusicapi.zhaoboy.com/toplist/detail (how to invoke the API we also use, or learn from the article of other bosses)

Then we look at the obtained data and analyze it:We can see from the first picturelistSeveral pieces of information are retrieved, and each piece of informationupdateFrequencyWhen should the list be updated,coverImgUrlFor the pictures that should be on the list, there is anothertracksAnd that’s what we need (see the next picture)You can see that the information contained in Tracks is the playlist, which is the data that we use in our official chartAs you can see from the figure in Chapter 3, we start with the number 4tracksIn the original screen I just showed you, only the official list requires this information. The other lists do not. So out of the number of pieces of data we loop, we need to put the first four into the official list, and the rest into the other list,The for loopNext time we’re going to loop through all the data we’ve got, and it’s going to look the same. This interface is a loop with the same data in two different styles, which you’re sure you want to add an if judgment, so let’s see how we can do that.

Code implementation

wxml

<view class="body-view"> <loading hidden="{{hidden}}"> Loading... </loading> </view> <view class="wrapper"> <! -- Upper part: <view class="ranking"> <text class="ranking-name"> </text> <view class="rankingbox"> <view class="rankinglist" wx:for="{{rank}}" wx:key="index"> <image class="ranking-img" src="{{item.img}}" /> <view class="updatetime">{{item.date}}</view> <view class="rankinglist-name">{{item.listname}}</view> </view> </view> </view> <! -- Middle part: Official ranking container --> <view class="officiallist"> <text class="ranking-name"> </text> <view class="officiallistbox"> <view class="official-list" wx:for="{{list}}" wx:key="index"> <view wx:if="{{index <= 3}}"> <image class="ranking-img" src="{{item.coverImgUrl}}" /> <view class="updatetime">{{item.updateFrequency}}</view> <view class="ranking-des"> <block  wx:for="{{item.tracks}}" wx:key="index"> <view class="songlist"> <text class="songname">{{index+1}}.</text> <text class="songname">{{item.first}}</text> - <text class="songname">{{item.second}}</text> </view> </block> </view> </view> </view> </view> </view> <! -- The next part: <view class="otherranking"> <text class="otherranking-name"> <block class="otherrankinglist" wx:for="{{list}}" wx:key="index"> <view class="other" wx:if="{{index > 3}}"> <image class="ranking-img" src="{{item.coverImgUrl}}" /> <view class="updatetime">{{item.updateFrequency}}</view> <view class="rankinglist-name">{{item.name}}</view> </view> </block> </view> </view> </view>Copy the code

wxss

/* top part: list recommended wrapper */.wrapper {width: 100%; height: 100%; } .ranking { margin: 60rpx 0 0 40rpx; } .rankingbox { display: flex; flex-wrap: wrap; } .rankinglist { margin: 30rpx 30rpx 30rpx 0rpx; } .ranking-name { font-size: 35rpx; font-weight: 550; } .ranking-img { width: 204rpx; height: 204rpx; border-radius: 10rpx; } .updatetime { position: absolute; margin-top: -45rpx; margin-left: 15rpx; font-size: 18rpx; color: rgb(241, 241, 241); } .rankinglist-name { font-size: 20rpx; max-width: 180rpx; overflow: hidden; text-overflow: ellipsis; } .ranking-des { width: 530rpx; height: 150rpx; margin: 0rpx 20rpx 0 20rpx; float: right; position: absolute; margin-top: -200rpx; margin-left: 210rpx; display: flex; flex-direction: column; justify-content: space-around; flex: 1 1 0%; padding: 10px; Officiallist {margin: 60rpx 0 0rpx 40rpx; officiallist {margin: 60rpx 0 0rpx 40rpx; } .officiallistbox { margin: 30rpx 0 20rpx 0rpx; } .official-list { margin: 0rpx 0 15rpx 0rpx; } .songlist { max-width: 450rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .songname { font-size: 25rpx; } .otherranking { margin: 60rpx 0 0rpx 0rpx; } .otherrankingbox { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 10rpx 40rpx; margin: 30rpx 0 0rpx 0rpx; } .otherranking-name { margin-left: 40rpx; font-size: 35rpx; font-weight: 550; } .other { margin-bottom: 20rpx; }Copy the code

Js part

// const API = require('.. /.. /toplist/detail')
 const app = getApp();
Page({
  data: {
    hidden: false.// Whether the load is hidden
    list: [].rank: [{img: 'https://p2.music.126.net/c0iThrYPpnFVgFvU6JCVXQ==/109951164091703579.jpg'.date: 'Updated every Thursday'.listname: 'Cloud Music Hot Songs in Europe and America'}, {img: 'https://p2.music.126.net/WTpbsVfxeB6qDs_3_rnQtg==/109951163601178881.jpg'.date: 'Updated every Monday'.listname: 'iTunes list'}, {img: 'https://p2.music.126.net/Zb8AL5xdl9-_7WIyAhRLbw==/109951164091690485.jpg'.date: 'Updated daily'.listname: 'Cloud Music New Songs In Europe and America',}},/** * lifecycle function -- listens for page loading */
  onLoad: function (options) {
    wx.request({
      url:'http://neteasecloudmusicapi.zhaoboy.com/toplist/detail'.data: {},header: {  // Load effect
        "Content-Type": "application/json"
      },
      success: (res) = > {
        console.log(res)
        this.setData({
          list: res.data.list
        })
        if(this.data.list.length>0) {this.setData({
            hidden: true})}})},})Copy the code

Implementation effect share

As you can see in the code, we are checking by wx:ifindex <= 3 Data is placed inofficiallistIn this official list, whileindex > 3, is placed inotherrankingThe other list, it is indeed true, also has realized the function, but the logic is not strict, official data changes, and have to modify the code to change if the value of the judgment, change one have to change one (here say change is: when the API data change into 6 or article which data start tracks is empty, only then the originalindex > 3 If it doesn’t work, you have to manually change the value. And such if judgment still has some problems, the remaining data will be empty data output, will occupy a certain location, then need to modify the CSS, so that the layout is not affected, adding a certain amount of trouble. (Take a look at the display in debugging: below)

An optimization method

The paper

In fact, we can make a judgment in JS. In API, only tracks in the first few data have song list data, and tracks in the following data are empty, so we just need to start from tracks. To determine when tracks have data, put it in the official list, and when tracks are empty, put it in other lists. Let’s look at the code first (here we show the modified part of the code).

wxml

<! <view class="official-list" wx:for="{{officialList}}" wx:key="index"> <view> <image class="ranking-img" src="{{item.coverImgUrl}}" /> <view class="updatetime">{{item.updateFrequency}}</view> <view class="ranking-des"> <block Wx :for="{{item.tracks}}" wx:key="index"> </block> </view> </view>Copy the code

<! Wx :for="{{moreList}}" wx:key="index"> <view class="other"> <image class="ranking-img" src="{{item.coverImgUrl}}" /> <view class="updatetime">{{item.updateFrequency}}</view> <view class="rankinglist-name">{{item.name}}</view> </view> </block>Copy the code

js:

// Add two new empty arrays to data
  data: {
    officialList: []./ / added
    moreList: []./ / added
    list: [].rank: [
		// Add the previous data],},onLoad: function (options) {
    wx.request({
     // Here is the previous API call
      },
      // important: Check if there is data in tracks in the callback function and put it into the defined array
      success: (res) = > {
        const oList = res.data.list.filter(item= > item.tracks.length
        )
        console.log(oList)
        const mList =  res.data.list.filter( item= >! item.tracks.length )this.setData({
        // After judging the data, put them into the array of the official list and other lists defined previously
          officialList:oList,
          moreList:mList,
          list: res.data.list
        })
      }
    })
  },
})
Copy the code

Analysis of the

The modified willwx:ifIn data, we define two new empty arrays,officialList: [] 和moreList: []After successfully fetching API data, we define oneoList 和 mListAnd determine if tracks has data, and if it doesoListIf not, put it inmList; And then finally, respectivelyoList 和 mListIs passed to an arrayofficialList 和moreListTo achieve the effect we were looking for. When we finally debug, we can find that there are no more empty arrays looping out, and the data will automatically change according to the update of the official API data, see the figure

conclusion

Here we go through an interface example, from analysis to optimization, although it is only a logic optimization, but the code effect is still very significant. As small white we, from the beginning of the cut graph, do fake data to make the interface first, and then to call the introduction of real data. There are many ways to achieve a function. Stronger logical thinking and rigorous code style should also be what we pursue, which is also where we need to improve slowly. In general, it is to make ourselves better. Thank you for your appreciation, if you have any deficiencies or better ideas and suggestions are also welcome to point out oh!

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

An optimized example of a beginner front end using a for loop in a small program

preface

Primary interface analysis

Code implementation

An optimization method

conclusion

An optimized example of a beginner front end using a for loop in a small program

preface

Primary interface analysis

Code implementation

An optimization method

conclusion

Related Posts

What is rearrangement and redrawing

Brief introduction to Async and Generator

An article takes you through the HTML layout structure of a web page