【照虎画猫】用小程序模仿B站APP--首页（1）

时间：2023-04-23 18:09:01 | 来源：网站运营

时间：2023-04-23 18:09:01 来源：网站运营

【照虎画猫】用小程序模仿B站APP--首页（1）：最近看了一下各大厂商的小程序，大多都是简略体验版，只保留了内容展示这一项功能，界面和体验都很一般。

但这并不代表他们做不出来，究其原因，只是把微信当作了引流的入口，想要通过小程序的简易功能体验来使用户下载APP进行深度体验。

既然如此，那我们自己来尝试一下，简单的用小程序模仿一下各大APP，并不需要100%还原，因为小程序和APP不同，很多功能其实我们没办法实现，只能尽量还原的同时来做一些改变。

那第一个APP我们就拿B站来试试水！

一 、分析首页界面

下面是B站首页截图

工具栏




分类栏（可滑动、可切换内容）




内容区（轮播图、大视频块、小视频块）

底部导航（自定义tab栏）

二 、规划小程序界面

工具栏：

我们选择自定义导航条，计算好顶部距离（我们要分类调整异形屏和非异形屏）

举个例子：iphone 8和iphone X

前者是一整块完整屏幕，我们只需要知道上方时间、电池占用的空间即可。

后者是异形屏，我们需要获取刘海等占据的高度。

iPhone 8 iPhonex

这里我们只需要通过wx.getSystemInfo()接口就可以获取到各部分的高度。

由于右上角的胶囊按钮无法修改，为了美观，我们删除掉游戏模块，并且让工具栏和胶囊处在同一中线上。

分类栏：

可滑动，我们可以想到scroll-view组件。

可切换内容，我们可以想到swiper组件。

所以，我们只需要让二者搭配即可实现可滑动切换内容的分类栏，具体实现原理我会放到技术点拆解篇里。

在APP中分类栏随着页面的上滑会固定在页面顶部，但是仍由于胶囊，我们无法让它固定，一旦上移至顶部那必然会和胶囊处于同一位置，无论是视觉还是体验都不好，所以我们打算将整个头部固定，工具栏不再进行上移隐藏。

内容栏：

内容区块我们首先要确定好swiper组件的高度，通过在js中计算不同机型的可用空间来动态的对swiper高度进行赋值，确保比例显示正常。

每次的内容刷新加载，我们可以把内容块分为上下两个部分，则有以下几种加载方式：

虽然样式多变，但好在有迹可循，单纯的模仿还是能够实现的。

这里我们暂时考虑提前将内容卡片插入页面，通过监听不同的行为方式来展示不同的内容形式。

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

即：初次加载为轮播图+10个内容块，下拉为8小+1大，上滑为一大+8小。

导航栏：

由于存在中间的发布按钮，所以我们只能选择自定义tab栏，但是这样做的后果是每次页面在初次加载的时候，tab栏会进行一次闪动。

看网上大佬说，是因为自定义tab栏是对每一个tab项进行监听，每次切换页面的时候会进行多次渲染，所以会出现闪动。

解决方法是把监听事件改为整体监听，并且将跳转信息存到全局变量中进行调用。或者干脆使用单页应用。

如果不介意的话，也没必要管这个，闪一次就闪嘛，又不是不能用，凑合凑合吧。

三 、实现效果

总结

首页的设计并不是很难，只要处理好胶囊和顶部的布局，做好内容自适应，剩下的就是往里填入内容了。

图片和图标没有完全一样的素材，只能先用类似的素材代替，之后再去自己做一套图标，现在先凑合用吧。

小程序的本质还是网页开发，它不能像APP那样拥有强大的硬件控制能力，很多我们想要的效果其实是无法实现的。

就比如右上角的胶囊，我们会觉得它很讨厌，但是就是没有办法去隐藏它。

毕竟小程序只是存在微信当中的一个组件，用户不可能通过上滑微信的方式来退出，同时又不能让开发者任意设置退出按钮，所以这个让开发者讨厌的胶囊就出现了。

关注我，学习小程序开发知识，我们下期再见！