先規(guī)劃好頁面功能。
底部tabbar我分了3個(gè)，一個(gè)是發(fā)現(xiàn)(首頁)，一個(gè)是播放(只放播放頁),一個(gè)是我的(用來存儲(chǔ)個(gè)人播放歷史，歌單)
至于每日推薦、歌單、排行榜、電臺(tái)、MV這些都是放在“發(fā)現(xiàn)“內(nèi)部。
搜索
點(diǎn)擊搜索框，跳轉(zhuǎn)至搜索頁面，為什么要單獨(dú)有一個(gè)搜索頁面？當(dāng)我們搜索歌曲的時(shí)候，如果就在當(dāng)前頁面，那么搜索結(jié)果要么蓋在當(dāng)前頁面上，要么將其他內(nèi)容擠下去。這樣的交互效果并不好。
跳轉(zhuǎn)至搜索頁面，這里就涉及到跳轉(zhuǎn)事件。
這里將幾個(gè)跳轉(zhuǎn)事件以及他們的區(qū)別列一下：
wx.navigate :保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。但是不能跳到 tabbar 頁面。使用
wx.navigateBack可以返回到原頁面。小程序中頁面棧最多十層,可以基本滿足頁面之間跳轉(zhuǎn)需求。
（1）直觀上來講就是跳到第二個(gè)頁面時(shí)，左上角有返回按鈕。
（2）頁面跳走后會(huì)調(diào)用onHide方法。即第一個(gè)頁面并沒有被關(guān)閉，只是被隱藏起來了。wx.redirectTo :關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。但是不允許跳轉(zhuǎn)到 tabbar 頁面。當(dāng)層級(jí)關(guān)系超過10層時(shí)，頁面跳轉(zhuǎn)采用這個(gè)。
（1）直觀上來講是跳到第二個(gè)頁面時(shí)，左上角是沒有返回按鈕的。
（2）頁面跳走后會(huì)調(diào)用onUnload方法，即第一個(gè)頁面被關(guān)閉和銷毀了。-
wx.switchTab: 需要跳轉(zhuǎn)到tabbar頁面，需要用 wx.switchTab
(比如這里從第二步到第三步：我的①-->播放歷史②-->返回"我的"頁③)
tabbar 三個(gè)跳轉(zhuǎn)的使用方法一致，均為：
// wx.navigateTo
wx.navigateTo({
url: '../xxxx/xxxx'
})
// wx.redirectTo
wx.redirectTo({
url: '../xxx/xxx'
})
// wx.switchTab
wx.switchTab({
url: '../xx/xx'
})
這里采用的是wx.navigateTo
menu欄目
搭建dom結(jié)構(gòu)的時(shí)候，特地去查了一下wxml和html標(biāo)簽的對(duì)應(yīng)關(guān)系
| html | wxml |
|---|---|
<div></div> |
<view></view><scroll-view></scroll-view>滾動(dòng)視圖<movable-view></movable-view>可移動(dòng)的視圖容器，在頁面中可以拖拽滑動(dòng),必須在movable-area組件中，并且必須是直接子節(jié)點(diǎn)，否則不能移動(dòng)。 |
<h1></h1>...<h6></h6><p></p><span></span>
|
<view></view><text></text>:不是塊級(jí)元素 |
<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>
確定好用什么標(biāo)簽組件之后，開始寫menu欄目。
首頁父頁面剩下的部分
menu下方是滾動(dòng)區(qū)域，里面暫時(shí)放推薦歌單，和新歌放送兩個(gè)模塊。同時(shí)有個(gè)回到頂部按鈕，方便用戶回到頂部選擇(原本右側(cè)是有一個(gè)回到頂部按鈕，但是轉(zhuǎn)念一想，滾動(dòng)區(qū)域只有歌單，若想去其它功能頁面，只需要點(diǎn)擊menu處的按鈕即可，故刪除回到頂部功能)
再看“推薦歌單”與“新歌放送”兩個(gè)部分，這兩塊的布局樣式為一致，如果是vue項(xiàng)目，此處是共用一個(gè)組件，但是小程序除了自定義組件還有一個(gè)模板功能。
| 區(qū)別 | template模板 | Component組件 |
|---|---|---|
| 功能 | 主要是展示，方法在調(diào)用的頁面中定義，比如說首頁調(diào)用了這個(gè)模板，那么這個(gè)模板需要用到的方法就要在首頁中定義 | 有自己的業(yè)務(wù)邏輯，相當(dāng)于一個(gè)獨(dú)立的頁面。 |
| 目錄結(jié)構(gòu) | 單獨(dú)創(chuàng)建template目錄，此目錄下再分開管理各模板，每個(gè)模板只包含wxml、wxss文件，兩者命名相同 | 單獨(dú)創(chuàng)建component目錄，創(chuàng)建子目錄，然后再新建Component(此步驟可在微信開發(fā)者工具里新建) ,組件由4個(gè)文件構(gòu)成，js與json配置有自己的規(guī)范[1] |
| 模板文件 | 一個(gè)template.wxml中能寫多個(gè)模板，用name區(qū)分 | 與一般wxml一樣寫法 |
| 樣式文件 | 有自己的樣式 | 也有自己的樣式 |
| 頁面引用 | 兩種方式引用，1.import導(dǎo)入，然后使用is屬性（這里就要用到前面的name名稱了），聲明需要使用的模板，再將模板所需要的data傳入 2. include引入，這種引入方式是將除了<template/> <wxs/> 外的整個(gè)代碼引入 |
需要在json文件進(jìn)行配置，在需要引入的模板文件直接使用就行了[2]，樣式文件也要通過@import導(dǎo)入 |
這里我選擇首頁的歌單部分做成組件，然后引入在首頁引入這個(gè)組件，為什么要這樣？因?yàn)槊咳胀扑]、歌單、大部分都是這種相同的dom結(jié)構(gòu)，如果用模板。我在每個(gè)頁面都要在寫一套js，所以封裝成組件是最好的選擇。
上一張圖看下效果：
【Tips】
- 之前做原型的時(shí)候漏掉了，每一塊默認(rèn)展示最多6個(gè)，右上角有一個(gè)more去歌單廣場(chǎng)
- 歌單的組件內(nèi)部做了一個(gè)判斷，如果是video，則樣式為一行兩個(gè)，并且寬度增加； 還有一個(gè)判斷就是，判斷是否是歌曲，是歌曲則中間出現(xiàn)一個(gè)播放圖，表示點(diǎn)擊該項(xiàng)直接去播放頁，否則跳往該歌單。
- 左上角的每日推薦中間放了一個(gè)當(dāng)前日期，表示今日的推薦歌曲~
