小程序構建骨架屏的探索

作者：jayzouhttps://segmentfault.com/a/1190000015876164

首屏

一般情況下，在首屏數據未拿到之前，為了提升用戶的體驗，會在頁面上展示一個loading的圖層，類似下面這個：

其中除了菊花圖以外網上還流傳這各種各樣的loading動畫，在PC端上幾乎要統一江湖了，不過最近在移動端上面看到不同於菊花圖的載入方式，就是這篇文章需要分享的Skeleton Screen，中文稱之為"骨架屏"

概念

A skeleton screen is essentially a blank version of a page into which information is gradually loaded.

在H5中，骨架屏其實已經不是什麼新奇的概念了，網上也有各種方案生成對應的骨架屏，包括我們經常使用的知乎、餓了么、美團等APP都有應用骨架屏這個概念。

圖片來源網路，侵刪：

方案

先從H5生成骨架屏方案開始說起，總的來說H5生成骨架屏的方案有2種：

完全靠手寫HTML和CSS方式給每個頁面定製一套骨架屏

利用預渲染的方式生成靜態骨架屏

第一套方案，毫無疑問是最簡單最直白的方式，缺點也很明顯，假如頁面布局有修改的話，那麼除了修改業務代碼之外還需要額外修改骨架屏，增加了維護的成本。

調研了下H5生成骨架屏的方案，對於小程序生成骨架屏的方案也有了一個大致的想法，主要有2個難點需要實現：

預渲染

獲取節點

預渲染

再說回餓了么提供的骨架屏的方案，使用 puppeteer（https://github.com/GoogleChrome/puppeteer）渲染頁面（或者使用服務端渲染，vue或者react都有提供相應的方案），拿到DOM節點和樣式，這裡有一點需要注意的是，頁面的渲染是需要初始化的數據，數據的來源可以是初始化的data（vue）或者mock數據，當然小程序是無法直接使用 puppeteer 來做預渲染（有另外的方案可以實現），需要利用小程序初始化的 data + template 渲染之後得到一個初始化結構作為骨架屏的結構。

有了上面的 data + template 之後，就有了一個初始化的頁面結構，接下來就需要拿到節點信息。

節點

跟H5方式一樣，根據class或者id獲取節點信息，不同的是只能獲取到當前的節點信息，無法獲取到其父或者子節點信息，所以只能手動給需要渲染骨架屏的節點添加相應的class或者id：

約定2個特殊的class作為獲取節點信息的標記 和 ，在頁面中獲取相應的 、 、 、 進行骨架屏的繪製。

結果

GIF

具體的調用方式和源碼，請看 github （https://github.com/jayZOU/skeleton），最後求start。

總結

上文有說到小程序也可以使用 page-skeleton-webpack-plugin （https://github.com/ElemeFE/page-skeleton-webpack-plugin）方式一樣生成骨架屏，最重要的一點就是需要將小程序跑在chrome上面，後面的流程就一樣了，至於怎麼將小程序跑在chrome上面呢？可以利用 wept （https://github.com/chemzqm/wept），缺點就是目前作者已經停止維護這個工具了，不支持新版小程序的API。

說回來我這個生成骨架屏的方案，其實跟 page-skeleton-webpack-plugin 有點相似，不同的是，page-skeleton-webpack-plugin 採用離線渲染的方式生成靜態骨架屏插入路由中，而我採用運行時先渲染頁面默認結構，然後根據默認結構再繪製骨架屏。從性能角度出發確實不如 page-skeleton-webpack-plugin，但是也差不了多少了，主要還是小程序並沒有提供類似服務端渲染的方案。目前從使用上來講，還是有點小麻煩，需要默認數據撐開頁面結構，需要給相應的節點添加class，後面有時間再研究下有沒有更好的方案吧~~~

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！