先规划好页面功能。

底部tabbar我分了3个，一个是发现(首页)，一个是播放(只放播放页),一个是我的(用来存储个人播放历史，歌单)
至于每日推荐、歌单、排行榜、电台、MV这些都是放在“发现“内部。

发现页面

搜索

点击搜索框，跳转至搜索页面，为什么要单独有一个搜索页面？当我们搜索歌曲的时候，如果就在当前页面，那么搜索结果要么盖在当前页面上，要么将其他内容挤下去。这样的交互效果并不好。

跳转至搜索页面，这里就涉及到跳转事件。
这里将几个跳转事件以及他们的区别列一下：

• wx.navigate :保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用wx.navigateBack可以返回到原页面。小程序中页面栈最多十层,可以基本满足页面之间跳转需求。
  （1）直观上来讲就是跳到第二个页面时，左上角有返回按钮。
  （2）页面跳走后会调用 onHide方法。即第一个页面并没有被关闭，只是被隐藏起来了。

• wx.redirectTo :关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。当层级关系超过10层时，页面跳转采用这个。
  （1）直观上来讲是跳到第二个页面时，左上角是没有返回按钮的。
  （2）页面跳走后会调用onUnload 方法，即第一个页面被关闭和销毁了。

• wx.switchTab: 需要跳转到tabbar页面，需要用 wx.switchTab
  (比如这里从第二步到第三步：我的①-->播放历史②-->返回"我的"页③)
  

  tabbar

• 三个跳转的使用方法一致，均为：

// wx.navigateTo
wx.navigateTo({
  url: '../xxxx/xxxx'
})

// wx.redirectTo
wx.redirectTo({
  url: '../xxx/xxx'
})

// wx.switchTab
wx.switchTab({
  url: '../xx/xx'
})

这里采用的是wx.navigateTo

大概就是这样

menu栏目

menu

搭建dom结构的时候，特地去查了一下wxml和html标签的对应关系

html	wxml
<div></div>	<view></view> <scroll-view></scroll-view>滚动视图 <movable-view></movable-view>可移动的视图容器，在页面中可以拖拽滑动,必须在movable-area组件中，并且必须是直接子节点，否则不能移动。
<h1></h1>...<h6></h6> <p></p><span></span>	<view></view> <text></text>:不是块级元素
<i class="icon">	<icon></icon>
<input type="text"> <input type="checkbox"> <input type="radio"> <input type="file"> <button></button>	<input/> <checkbox/> <radio/> <view bindtab="chooseImage"> <button bindtap="setDisabled"></button>
<a href="#"></a>	<navigator url="#" redirect></navigator >
<img src="">	<image src="" ></image >
...	...

小程序还新增了不少组件，例如<map></map>
确定好用什么标签组件之后，开始写menu栏目。

menu栏

首页父页面剩下的部分

menu下方是滚动区域，里面暂时放推荐歌单，和新歌放送两个模块。同时有个回到顶部按钮，方便用户回到顶部选择(原本右侧是有一个回到顶部按钮，但是转念一想，滚动区域只有歌单，若想去其它功能页面，只需要点击menu处的按钮即可，故删除回到顶部功能)

首页默认展示1 首页滚动时

再看“推荐歌单”与“新歌放送”两个部分，这两块的布局样式为一致，如果是vue项目，此处是共用一个组件，但是小程序除了自定义组件还有一个模板功能。

组件 & 模板
具体的就不多说了，模板可以看这里，自定义组件看这里。这里说一下区别。

区别	template模板	Component组件
功能	主要是展示，方法在调用的页面中定义，比如说首页调用了这个模板，那么这个模板需要用到的方法就要在首页中定义	有自己的业务逻辑，相当于一个独立的页面。
目录结构	单独创建template目录，此目录下再分开管理各模板，每个模板只包含wxml、wxss文件，两者命名相同	单独创建component目录，创建子目录，然后再新建Component(此步骤可在微信开发者工具里新建) ,组件由4个文件构成，js与json配置有自己的规范[1]
模板文件	一个template.wxml中能写多个模板，用name区分	与一般wxml一样写法
样式文件	有自己的样式	也有自己的样式
页面引用	两种方式引用，1.import导入，然后使用is属性（这里就要用到前面的name名称了），声明需要使用的模板，再将模板所需要的data传入 2.include引入，这种引入方式是将除了<template/> <wxs/> 外的整个代码引入	需要在json文件进行配置，在需要引入的模板文件直接使用就行了[2]，样式文件也要通过@import导入

这里我选择首页的歌单部分做成组件，然后引入在首页引入这个组件，为什么要这样？因为每日推荐、歌单、大部分都是这种相同的dom结构，如果用模板。我在每个页面都要在写一套js，所以封装成组件是最好的选择。

上一张图看下效果：

首页大致效果图

【Tips】

1. 之前做原型的时候漏掉了，每一块默认展示最多6个，右上角有一个more去歌单广场
   
2. 歌单的组件内部做了一个判断，如果是video，则样式为一行两个，并且宽度增加； 还有一个判断就是，判断是否是歌曲，是歌曲则中间出现一个播放图，表示点击该项直接去播放页，否则跳往该歌单。
3. 左上角的每日推荐中间放了一个当前日期，表示今日的推荐歌曲~

---

1. Component的js和json代码
   

   js文件
   json配置文件
   
   json文件 ↩

2. 引入组件的代码
   使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

   
   引入代码
   

   这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

   ↩