先規(guī)劃好頁(yè)面功能。
底部tabbar我分了3個(gè)嗓奢，一個(gè)是發(fā)現(xiàn)(首頁(yè))讼撒，一個(gè)是播放(只放播放頁(yè)),一個(gè)是我的(用來(lái)存儲(chǔ)個(gè)人播放歷史，歌單)
至于每日推薦、歌單根盒、排行榜钳幅、電臺(tái)、MV這些都是放在“發(fā)現(xiàn)“內(nèi)部炎滞。
搜索
點(diǎn)擊搜索框敢艰，跳轉(zhuǎn)至搜索頁(yè)面，為什么要單獨(dú)有一個(gè)搜索頁(yè)面册赛？當(dāng)我們搜索歌曲的時(shí)候钠导，如果就在當(dāng)前頁(yè)面，那么搜索結(jié)果要么蓋在當(dāng)前頁(yè)面上森瘪，要么將其他內(nèi)容擠下去辈双。這樣的交互效果并不好。
跳轉(zhuǎn)至搜索頁(yè)面柜砾，這里就涉及到跳轉(zhuǎn)事件。
這里將幾個(gè)跳轉(zhuǎn)事件以及他們的區(qū)別列一下：
wx.navigate :保留當(dāng)前頁(yè)面换衬，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面痰驱。但是不能跳到 tabbar 頁(yè)面。使用
wx.navigateBack可以返回到原頁(yè)面瞳浦。小程序中頁(yè)面棧最多十層,可以基本滿(mǎn)足頁(yè)面之間跳轉(zhuǎn)需求担映。
（1）直觀(guān)上來(lái)講就是跳到第二個(gè)頁(yè)面時(shí)，左上角有返回按鈕叫潦。
（2）頁(yè)面跳走后會(huì)調(diào)用onHide方法蝇完。即第一個(gè)頁(yè)面并沒(méi)有被關(guān)閉，只是被隱藏起來(lái)了矗蕊。wx.redirectTo :關(guān)閉當(dāng)前頁(yè)面短蜕，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。但是不允許跳轉(zhuǎn)到 tabbar 頁(yè)面傻咖。當(dāng)層級(jí)關(guān)系超過(guò)10層時(shí)朋魔，頁(yè)面跳轉(zhuǎn)采用這個(gè)。
（1）直觀(guān)上來(lái)講是跳到第二個(gè)頁(yè)面時(shí)卿操，左上角是沒(méi)有返回按鈕的警检。
（2）頁(yè)面跳走后會(huì)調(diào)用onUnload方法，即第一個(gè)頁(yè)面被關(guān)閉和銷(xiāo)毀了害淤。-
wx.switchTab: 需要跳轉(zhuǎn)到tabbar頁(yè)面扇雕，需要用 wx.switchTab
(比如這里從第二步到第三步：我的①-->播放歷史②-->返回"我的"頁(yè)③)
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)的視圖容器镶奉，在頁(yè)面中可以拖拽滑動(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)簽組件之后，開(kāi)始寫(xiě)menu欄目移国。
首頁(yè)父頁(yè)面剩下的部分
menu下方是滾動(dòng)區(qū)域吱瘩，里面暫時(shí)放推薦歌單，和新歌放送兩個(gè)模塊迹缀。同時(shí)有個(gè)回到頂部按鈕使碾，方便用戶(hù)回到頂部選擇(原本右側(cè)是有一個(gè)回到頂部按鈕，但是轉(zhuǎn)念一想祝懂，滾動(dòng)區(qū)域只有歌單票摇，若想去其它功能頁(yè)面，只需要點(diǎn)擊menu處的按鈕即可砚蓬，故刪除回到頂部功能)
再看“推薦歌單”與“新歌放送”兩個(gè)部分矢门，這兩塊的布局樣式為一致，如果是vue項(xiàng)目灰蛙，此處是共用一個(gè)組件祟剔，但是小程序除了自定義組件還有一個(gè)模板功能。
組件 & 模板
具體的就不多說(shuō)了摩梧，模板可以看這里物延，自定義組件看這里。這里說(shuō)一下區(qū)別仅父。
| 區(qū)別 | template模板 | Component組件 |
|---|---|---|
| 功能 | 主要是展示叛薯，方法在調(diào)用的頁(yè)面中定義，比如說(shuō)首頁(yè)調(diào)用了這個(gè)模板笙纤，那么這個(gè)模板需要用到的方法就要在首頁(yè)中定義 | 有自己的業(yè)務(wù)邏輯耗溜，相當(dāng)于一個(gè)獨(dú)立的頁(yè)面。 |
| 目錄結(jié)構(gòu) | 單獨(dú)創(chuàng)建template目錄省容，此目錄下再分開(kāi)管理各模板强霎，每個(gè)模板只包含wxml、wxss文件蓉冈，兩者命名相同 | 單獨(dú)創(chuàng)建component目錄城舞，創(chuàng)建子目錄，然后再新建Component(此步驟可在微信開(kāi)發(fā)者工具里新建) ,組件由4個(gè)文件構(gòu)成寞酿，js與json配置有自己的規(guī)范[1] |
| 模板文件 | 一個(gè)template.wxml中能寫(xiě)多個(gè)模板家夺，用name區(qū)分 | 與一般wxml一樣寫(xiě)法 |
| 樣式文件 | 有自己的樣式 | 也有自己的樣式 |
| 頁(yè)面引用 | 兩種方式引用，1.import導(dǎo)入伐弹，然后使用is屬性（這里就要用到前面的name名稱(chēng)了）拉馋，聲明需要使用的模板，再將模板所需要的data傳入 2. include引入，這種引入方式是將除了<template/> <wxs/> 外的整個(gè)代碼引入 |
需要在json文件進(jìn)行配置煌茴，在需要引入的模板文件直接使用就行了[2]随闺，樣式文件也要通過(guò)@import導(dǎo)入 |
這里我選擇首頁(yè)的歌單部分做成組件，然后引入在首頁(yè)引入這個(gè)組件蔓腐，為什么要這樣矩乐？因?yàn)槊咳胀扑]、歌單回论、大部分都是這種相同的dom結(jié)構(gòu)散罕，如果用模板。我在每個(gè)頁(yè)面都要在寫(xiě)一套js傀蓉，所以封裝成組件是最好的選擇欧漱。
上一張圖看下效果：
【Tips】
- 之前做原型的時(shí)候漏掉了，每一塊默認(rèn)展示最多6個(gè)葬燎，右上角有一個(gè)more去歌單廣場(chǎng)
- 歌單的組件內(nèi)部做了一個(gè)判斷误甚，如果是video，則樣式為一行兩個(gè)谱净，并且寬度增加靶草； 還有一個(gè)判斷就是，判斷是否是歌曲岳遥，是歌曲則中間出現(xiàn)一個(gè)播放圖，表示點(diǎn)擊該項(xiàng)直接去播放頁(yè)裕寨，否則跳往該歌單浩蓉。
- 左上角的每日推薦中間放了一個(gè)當(dāng)前日期，表示今日的推薦歌曲~
