第一屏

通常情況下，在獲取第一個(gè)屏幕數(shù)據(jù)之前，為了提高用戶體驗(yàn)，頁面上會(huì)顯示一個(gè)加載層，類似于下面這個(gè):

其中除了菊花圖，各種加載動(dòng)畫也在網(wǎng)上流傳，幾乎統(tǒng)一了PC端的江湖。但是最近手機(jī)端不同于菊花圖的加載方式是本文需要分享的骷髏屏，中文叫“骷髏屏”。

概念

框架屏幕本質(zhì)上是一個(gè)頁面的空白版本，信息逐漸被加載到其中。

在H5，骨架屏不再是一個(gè)新奇的概念，網(wǎng)上也有各種方案生成相應(yīng)的骨架屏，包括在知乎、餓了么、美團(tuán)等應(yīng)用中的應(yīng)用。

圖片來源網(wǎng)絡(luò)，侵刪:

計(jì)劃

從H5生成骨架屏的方案出發(fā)，一般來說，H5生成骨架屏有兩種方案:

完全靠手寫HTML和CSS方式給每個(gè)頁面定制一套骨架屏利用預(yù)渲染的方式生成靜態(tài)骨架屏

第一種方案無疑是最簡單、最直接的方式，缺點(diǎn)也很明顯。如果修改頁面布局，除了業(yè)務(wù)代碼，還需要修改骨架屏幕，增加了維護(hù)成本。

第二種方案，在一定程度上改善了第一種方案帶來的維護(hù)成本增加的缺點(diǎn)，主要是使用工具對(duì)頁面進(jìn)行預(yù)渲染，獲取DOM節(jié)點(diǎn)和樣式，保留頁面結(jié)構(gòu)，覆蓋樣式，生成灰色塊覆蓋原文本、圖片或畫布節(jié)點(diǎn)，最后將生成的HTML和CSS打包，這是一個(gè)帶骨架屏幕的頁面。最后，使用webpack工具將生成的骨架屏幕插入到HTML中。有細(xì)節(jié)的話可以看看餓了么分享，這里就不描述了。

在考察了H5下生成骨架屏的方案后，我也有了一個(gè)小程序生成骨架屏的大致思路，主要要實(shí)現(xiàn)兩個(gè)難點(diǎn):

預(yù)渲染獲取節(jié)點(diǎn) 預(yù)渲染

先說餓的時(shí)候提供的骨架屏幕方案，用https://github.com/GoogleChrome/puppeteer渲染頁面(或者用服務(wù)器端渲染，vue或者react都有提供相應(yīng)的方案)，得到DOM節(jié)點(diǎn)和樣式。這里需要注意的是，頁面渲染是需要初始化的數(shù)據(jù)。數(shù)據(jù)源可以是初始化數(shù)據(jù)(vue)或模擬數(shù)據(jù)。當(dāng)然小程序不能直接使用木偶器進(jìn)行預(yù)渲染(還有其他方案可以實(shí)現(xiàn))，所以需要使用小程序初始化的數(shù)據(jù)+模板進(jìn)行渲染，得到一個(gè)初始化的結(jié)構(gòu)作為骨架屏幕結(jié)構(gòu)。

//index.jsPage({data: {motto: 'Hello World',userInfo: {avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/SYiaiba5faeraYBoQCWdsBX4hSjFKiawzhIpnXjejDtjmiaFqMqhIlRBqR7IVdbKE51npeF6X1cXxtDQD2bzehgqMA/132',nickName: 'jay'},lists: ['aslkdnoakjbsnfkajbfk','qwrwfhbfdvndgndghndeghsdfh','qweqwtefhfhgmjfgjdfghaefdhsdfgdfh',],showSkeleton: true},: function () {const that = this;setTimeout(() => {that.setData({showSkeleton: false})}, 3000)}})//index.wxml<view class="container"><view class="userinfo"><block><image class="userinfo-avatar skeleton-radius" src="{{userInfo.avatarUrl}}"mode="cover"></image><text class="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text></block></view><view style="margin: 20px 0"><view wx:for="{{lists}}" class="lists"><icon type="success" size="20" class="list skeleton-radius"/><text class="skeleton-rect">{{item}}</text></view></view><view class="usermotto"><text class="user-motto skeleton-rect">{{motto}}</text></view><view style="margin-top: 200px;">aaaaaaaaaaa</view></view>

有了上面的數(shù)據(jù)+模板，就有了一個(gè)初始化的頁面結(jié)構(gòu)，然后就需要得到節(jié)點(diǎn)信息了。

節(jié)點(diǎn)

1.4.0以后的小程序基礎(chǔ)庫提供了一套新的API，可以用來獲取節(jié)點(diǎn)信息。具體API在此蓋章。

與H5模式一樣，節(jié)點(diǎn)信息是根據(jù)類或id獲取的，但不同的是只能獲取當(dāng)前節(jié)點(diǎn)信息，而不能獲取父節(jié)點(diǎn)或子節(jié)點(diǎn)信息，因此只能將相應(yīng)的類或id手動(dòng)添加到需要渲染骨骼屏幕的節(jié)點(diǎn)中:

<view class="container"><view class="userinfo"><block><image class="userinfo-avatar skeleton-radius" src="{{userInfo.avatarUrl}}"mode="cover"></image><text class="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text></block></view><view style="margin: 20px 0"><view wx:for="{{lists}}" class="lists"><icon type="success" size="20" class="list skeleton-radius"/><text class="skeleton-rect">{{item}}</text></view></view><view class="usermotto"><text class="user-motto skeleton-rect">{{motto}}</text></view><view style="margin-top: 200px;">aaaaaaaaaaa</view></view>

指定兩個(gè)特殊類作為骨架矩形和骨架半徑的標(biāo)記來獲取節(jié)點(diǎn)信息，并在頁面中獲取相應(yīng)的頂部、左側(cè)、寬度和高度來繪制骨架屏幕。

結(jié)果

具體調(diào)用方法和源代碼請(qǐng)參考github(https://github.com/jayZOU/skeleton)，最后求啟動(dòng)。

總結(jié)

如上所述，小程序也可以像page-skeleton-web pack-plugin(https://github . com/ElemeFE/page-skeleton-web pack-plugin)一樣生成框架屏幕。最重要的一點(diǎn)是小程序需要在chrome上運(yùn)行，后面的過程也是一樣的。如何在chrome上運(yùn)行小程序？哭泣(https://github.com/chemzqm/wept)可以使用，但缺點(diǎn)是作者已經(jīng)停止維護(hù)這個(gè)工具，不支持新版本小程序的API。

另一方面，我生成骨架屏幕的方案類似于page-skeleton-webpack-plugin，不同的是page-skeleton-webpack-plugin通過離線渲染生成靜態(tài)骨架屏幕并插入到路由中，而我在運(yùn)行時(shí)使用頁面的默認(rèn)結(jié)構(gòu)進(jìn)行渲染，然后按照默認(rèn)結(jié)構(gòu)繪制骨架屏幕。從性能上看，不如頁面-骨架-webpack-plugin，但也差不了多少，主要是小程序沒有提供類似服務(wù)器端渲染的解決方案。目前使用中還是有點(diǎn)小麻煩。需要通過默認(rèn)數(shù)據(jù)展開頁面結(jié)構(gòu)，需要在相應(yīng)的節(jié)點(diǎn)上添加類。以后我們會(huì)有時(shí)間研究是否有更好的解決方案~ ~ ~