简单的仿网易云音乐小程序（一）

---

前言

今天我们开始学习简单的仿网易云音乐小程序，该小程序由Github提供，并具有网络请求和音乐播放等经典基础功能。

---

思维图

在上述的思维图中，每当点击歌曲列表中的歌曲时，均会跳转到音乐播放界面。

---

注意事项

由于该小程序使用到了网络请求功能，故需要在开发者工具中进行设置。如果不设置，会出现以下情况。

虚拟机调试

如果仅仅只是想在虚拟机上进行网络请求功能的调试，要解决上述问题很简单。

1. 打开开发者工具中右上角的详情页面。
   
2. 将本地设置中的红箭头指视处打勾
   

真机调试

当你想使用真机进行调试时，上述办法就行不通了，需要到微信小程序的官网上进行设置。

1. 登陆小程序官网，进入到管理页面，并点击开发选项卡。
   
2. 在开发页面中点开开发设置，找到服务器域名模块，添加上网络请求的地址即可。
   

---

主页面

搜索框

搜索框位于页面的顶部，当用户点击时，自动跳转到等待搜索页面。故很容易想到这是一个导航跳转功能。

<navigator class='topsearchLeft' url='../search/search'>
     <view class='iconfont icon-sousuo sousuo'></view>
     <text>搜索</text>
</navigator>

上述代码中，设置了一个导航组件，当点击该组件时，跳转到url对应的页面中。

歌单列表

歌单列表用到了我们之前尚未学习过的新只是，即导入wxml的模版文件。使用模版文件也很好理解，因为歌单列表会重复的使用，当将该页面独立为一个模版组件后，调用起来将会非常的方便，也省略了很多冗余的代码。

<!-- 从文件中导入模版wxml -->
<import src="./template/boutiqueItem" />
<view class='BoutiqueList'>
  <!-- block 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。 -->
  <!-- for循环遍历音乐数据 -->
  <block wx:for="{
    {musicList}}" wx:key="index">
    <!-- 将每一项数据输送给模版进行页面的渲染 -->
    <!-- 使用名字为ListItem的模版 -->
    <template is="ListItem" data="{
    {item}}" />
  </block>
</view>

这个模版在后续代码中均有使用，故我们在这进行学习

歌单模版

本小程序使用的歌单模版为一个单个的wxml文件，其他的wxml可以使用相对路径的方法对其进行调用。

模版文件存放在template文件夹下，WXML提供模板template，可以在模板中定义代码片段，然后在不同的地方调用。该模版内容没有特别新奇的地方，故没有特别添加上注释

<wxs src="../../../utils/filter.wxs" module="filter" />
<template name="ListItem">
  <!-- 这里的item是调用该template输出的data值 -->
  <view class='musicItem' bindtap='getdetail' data-id='{
    {item.id}}'>
    <view class='musicItem_left'>
      <image class='musicItemImg' src='{
    {item.coverImgUrl}}' alt='' lazy-load="true" mode="scaleToFill"></image>
      <view class='playCount_box'>
        <view class='iconfont icon-ttpod playCount_icon'></view>
        <!-- 使用wxs中的内容 -->
        <text class='playCount'>{
  {filter.over10000(item.playCount)}}