app.json:

{
  "pages":[
    "pages/music1/music1",
    "pages/music2/music2",
    "pages/music3/music3",
    "pages/music4/music4",
    
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "-sharpfff",
    "navigationBarTitleText": "",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "color": "-sharp818181",
    "backgroundColor": "black",
    "selectedColor": "green",
    "list": [{
      "pagePath": "pages/music1/music1",
      "text": "",
      "iconPath": "image/music.jpg",
      "selectedIconPath": "/image/music-s.jpg"
    },{
      "pagePath": "pages/music2/music2",
      "iconPath": "/image/playing.jpg",
      "selectedIconPath": "/image/playing-s.jpg",
      "text": ""
    },{
      "pagePath": "pages/music4/music4",
      "iconPath": "/image/search.jpg",
      "selectedIconPath": "/image/search-s.jpg",
      "text": ""
    }]
  }
}

config.js

(function(module){
  var exports=module.exports={};
  var appid = 63888;
  var secert ="e628f91c466942bab3b7a5c838c742d8";
  var param="?showapi_appid="+appid+"&showapi_sign="+secert;
  var hotUrl="http://route.showapi.com/213-4"+param;
  var searchByNameUrl = "http://route.showapi.com/213-1"+param;
  var searchByIdUrl = "http://route.showapi.com/213-2"+param;

  module.exports={
    config:{
      hotUrl:hotUrl,
      searchByNameUrl:searchByNameUrl,
      searchByIdUrl: searchByIdUrl
    }
  }
})(module);

music1.wxml

<view class="container">
  <view class="rank-list">
    <block wx:for="{{ranks}}" wx:key="{{item.type}}">
      <view class="rank-item">
        <navigator url="/pages/music3/music3?type={{item.type}}" class="text">{{item.text}}</navigator>
        <view class="arrow"></view>
      </view>
    </block>
  </view>
</view>

music1.js

// pages/music1/music1.js
Page({

  /**
   * 
   */
  data: {
    ranks:[
      { type: 26, text: "" },
      { type: 23, text: "" },
      { type: 18, text: "" },
      { type: 19, text: "" },
      { type: 5, text: "" },
      { type: 6, text: "" },
      { type: 16, text: "" },
      { type: 17, text: "" },
      { type: 3, text: "" },
    ]
  },

})

music2.wxml

<!--pages/music2/music2.wxml-->
<view class="playing container">
    <view class="thumbnail">
        <image src="{{song.albumpic_big}}" />
    </view>
    <view class="detail">
        <view class="title">{{song.songname}}</view>
        <view class="author">{{song.singername}}</view>
        <view class="action">
            <view class="act-toggle" bindtap="playToggle">
                <image src="/image/{{isPlaying ? "pause" : "play"}}.jpg" />
            </view>
        </view>
    </view>
</view>

music2.js

var config = require("../../config.js"); //

// pages/music2/music2.js
Page({

  /**
   * 
   */
  data: {
    song: {},  //
    isPlaying: false, //
  },

  /**
   * --
   */
  onLoad: function (options) {
    var self = this;
    var songid = options.songid; //()

    if (songid === undefined) { //ID
      var curSong = wx.getStorageSync("curSong") || {}; //

      if (curSong === undefined) { //
        var song = { songname: "" }; //
        this.setData({
          song: song
        })

      } else {
        this.setData({
          song: curSong
        });
      }

    } else {
      var songlist = wx.getStorageSync("songlist") || []; //
      //songid
      for (var i = 0; i < songlist.length; iPP) {
        if (songlist[i].songid == songid) {  //        
          this.setData({
            song: songlist[i]   //
          });
          break;
        }
      }
      //
      wx.setStorageSync("curSong", this.data.song);
    }
  },
  playToggle: function () {
    var self = this;
    //
    if (this.data.song.songname == "") {
      return;
    }

    if (this.data.isPlaying) { //
      wx.stopBackgroundAudio(); //

    } else {//

      //
      wx.playBackgroundAudio({
        dataUrl: this.data.song.url || this.data.song.m4a,
        success: function (res) { }
      })
    }

    //
    this.setData({
      isPlaying: !this.data.isPlaying
    });
  },

})

music3.wxml

<!--pages/music3/music3.wxml-->
<scroll-view scroll-y="true">
  <view class="board">
    <image src="{{board}}"></image>
  </view>

  <view class="songlist">
    <block wx:for="{{songlist}}" wx:key="song_id">
      <view class="songitem">
        <navigator url="/pages/music2/music2?songid={{item.songid}}" class="song-play"><image src="image/playing.jpg"></image></navigator>
        <navigator url="/pages/music2/music2?songid={{item.songid}}" class="song-detail">
          <view class="song-title">{{item.songname}}</view>
          <view class="song-subtitle">{{item.singername}}-{{item.seconds}}</view>
        </navigator>
      </view>
    </block>
  </view>
  <loading hidden="{{!loading}}">
  ....
  </loading>
</scroll-view>

music3.js

var condig=require("../../config.js");
var formatSeconds=function(value){
  var time=parseFloat(value);
  var m=Math.floor(time/60);
  var s=time-m*60;

  return [m,s].map(formatNumber).join(":");

  function formatNumber(n){
    n=n.toString()
    return n[1]?n:"+n"  
  }
}
// pages/music3/music3.js
Page({

  /**
   * 
   */
  data: {
    board:"",
    songlist:[],
    loading:false,
  },

  /**
   * --
   */
  onLoad: function (options) {
    var self=this;
    var topid=options.type;

    this.setData({
      loading:true
    })
    wx.request({
      url:config.config.hotUrl,
      data:{topid:topid},

      success:function(e){
        if(e.statusCode==200){
          var songlist=e.data.showapi_res_body.pagebean.songlist;
          for(var i=0;i<songlist.length;iPP)
          {
            songlist[i].secondds=formatSeconds(songlist[i].seconds);
          }
          self.setData({
            board:e.data.showapi_res_body.pagebean.songlist[0].albumpic_big,
            songlist:songlist,
            loading:false
          });
          wx.setStorageSync("songlist",songlist);
        }
      }
    });
  },

})

after compilation, as shown in the following figure:

:

Boss, take a look at it. Thank you