【照虎畫貓】用小程序模仿B站APP--首頁（1）

時(shí)間：2023-04-23 18:09:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-04-23 18:09:01 來源：網(wǎng)站運(yùn)營

【照虎畫貓】用小程序模仿B站APP--首頁（1）：最近看了一下各大廠商的小程序，大多都是簡(jiǎn)略體驗(yàn)版，只保留了內(nèi)容展示這一項(xiàng)功能，界面和體驗(yàn)都很一般。

但這并不代表他們做不出來，究其原因，只是把微信當(dāng)作了引流的入口，想要通過小程序的簡(jiǎn)易功能體驗(yàn)來使用戶下載APP進(jìn)行深度體驗(yàn)。

既然如此，那我們自己來嘗試一下，簡(jiǎn)單的用小程序模仿一下各大APP，并不需要100%還原，因?yàn)樾〕绦蚝虯PP不同，很多功能其實(shí)我們沒辦法實(shí)現(xiàn)，只能盡量還原的同時(shí)來做一些改變。

那第一個(gè)APP我們就拿B站來試試水！

一 、分析首頁界面

下面是B站首頁截圖

工具欄




分類欄（可滑動(dòng)、可切換內(nèi)容）




內(nèi)容區(qū)（輪播圖、大視頻塊、小視頻塊）

底部導(dǎo)航（自定義tab欄）

二 、規(guī)劃小程序界面

工具欄：

我們選擇自定義導(dǎo)航條，計(jì)算好頂部距離（我們要分類調(diào)整異形屏和非異形屏）

舉個(gè)例子：iphone 8和iphone X

前者是一整塊完整屏幕，我們只需要知道上方時(shí)間、電池占用的空間即可。

后者是異形屏，我們需要獲取劉海等占據(jù)的高度。

iPhone 8 iPhonex

這里我們只需要通過wx.getSystemInfo()接口就可以獲取到各部分的高度。

由于右上角的膠囊按鈕無法修改，為了美觀，我們刪除掉游戲模塊，并且讓工具欄和膠囊處在同一中線上。

分類欄：

可滑動(dòng)，我們可以想到scroll-view組件。

可切換內(nèi)容，我們可以想到swiper組件。

所以，我們只需要讓二者搭配即可實(shí)現(xiàn)可滑動(dòng)切換內(nèi)容的分類欄，具體實(shí)現(xiàn)原理我會(huì)放到技術(shù)點(diǎn)拆解篇里。

在APP中分類欄隨著頁面的上滑會(huì)固定在頁面頂部，但是仍由于膠囊，我們無法讓它固定，一旦上移至頂部那必然會(huì)和膠囊處于同一位置，無論是視覺還是體驗(yàn)都不好，所以我們打算將整個(gè)頭部固定，工具欄不再進(jìn)行上移隱藏。

內(nèi)容欄：

內(nèi)容區(qū)塊我們首先要確定好swiper組件的高度，通過在js中計(jì)算不同機(jī)型的可用空間來動(dòng)態(tài)的對(duì)swiper高度進(jìn)行賦值，確保比例顯示正常。

每次的內(nèi)容刷新加載，我們可以把內(nèi)容塊分為上下兩個(gè)部分，則有以下幾種加載方式：

雖然樣式多變，但好在有跡可循，單純的模仿還是能夠?qū)崿F(xiàn)的。

這里我們暫時(shí)考慮提前將內(nèi)容卡片插入頁面，通過監(jiān)聽不同的行為方式來展示不同的內(nèi)容形式。

或者我們干脆就只采取3+2+1的展示形式。

即：初次加載為輪播圖+10個(gè)內(nèi)容塊，下拉為8小+1大，上滑為一大+8小。

導(dǎo)航欄：

由于存在中間的發(fā)布按鈕，所以我們只能選擇自定義tab欄，但是這樣做的后果是每次頁面在初次加載的時(shí)候，tab欄會(huì)進(jìn)行一次閃動(dòng)。

看網(wǎng)上大佬說，是因?yàn)樽远xtab欄是對(duì)每一個(gè)tab項(xiàng)進(jìn)行監(jiān)聽，每次切換頁面的時(shí)候會(huì)進(jìn)行多次渲染，所以會(huì)出現(xiàn)閃動(dòng)。

解決方法是把監(jiān)聽事件改為整體監(jiān)聽，并且將跳轉(zhuǎn)信息存到全局變量中進(jìn)行調(diào)用?；蛘吒纱嗍褂脝雾搼?yīng)用。

如果不介意的話，也沒必要管這個(gè)，閃一次就閃嘛，又不是不能用，湊合湊合吧。

三 、實(shí)現(xiàn)效果

總結(jié)

首頁的設(shè)計(jì)并不是很難，只要處理好膠囊和頂部的布局，做好內(nèi)容自適應(yīng)，剩下的就是往里填入內(nèi)容了。

圖片和圖標(biāo)沒有完全一樣的素材，只能先用類似的素材代替，之后再去自己做一套圖標(biāo)，現(xiàn)在先湊合用吧。

小程序的本質(zhì)還是網(wǎng)頁開發(fā)，它不能像APP那樣擁有強(qiáng)大的硬件控制能力，很多我們想要的效果其實(shí)是無法實(shí)現(xiàn)的。

就比如右上角的膠囊，我們會(huì)覺得它很討厭，但是就是沒有辦法去隱藏它。

畢竟小程序只是存在微信當(dāng)中的一個(gè)組件，用戶不可能通過上滑微信的方式來退出，同時(shí)又不能讓開發(fā)者任意設(shè)置退出按鈕，所以這個(gè)讓開發(fā)者討厭的膠囊就出現(xiàn)了。

關(guān)注我，學(xué)習(xí)小程序開發(fā)知識(shí)，我們下期再見！