先规划好页面功能。
底部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】
- 之前做原型的时候漏掉了，每一块默认展示最多6个，右上角有一个more去歌单广场
- 歌单的组件内部做了一个判断，如果是video，则样式为一行两个，并且宽度增加； 还有一个判断就是，判断是否是歌曲，是歌曲则中间出现一个播放图，表示点击该项直接去播放页，否则跳往该歌单。
- 左上角的每日推荐中间放了一个当前日期，表示今日的推荐歌曲~
js文件
json文件
引入代码
网友评论