作者：jayzou
https://segmentfault.com/a/1190000015876164
首屏
一般情況下驼卖，在首屏數(shù)據(jù)未拿到之前码泞，為了提升用戶的體驗董朝，會在頁面上展示一個loading的圖層等舔，類似下面這個：
其中除了菊花圖以外網(wǎng)上還流傳這各種各樣的loading動畫眷柔，在PC端上幾乎要統(tǒng)一江湖了，不過最近在移動端上面看到不同于菊花圖的加載方式公你，就是這篇文章需要分享的Skeleton Screen踊淳，中文稱之為"骨架屏"
概念
A skeleton screen is essentially a blank version of a page into which information is gradually loaded.
在H5中，骨架屏其實已經(jīng)不是什么新奇的概念了陕靠，網(wǎng)上也有各種方案生成對應(yīng)的骨架屏迂尝，包括我們經(jīng)常使用的知乎、餓了么剪芥、美團等APP都有應(yīng)用骨架屏這個概念雹舀。
圖片來源網(wǎng)絡(luò)，侵刪：
方案
先從H5生成骨架屏方案開始說起粗俱，總的來說H5生成骨架屏的方案有2種：
1说榆、完全靠手寫HTML和CSS方式給每個頁面定制一套骨架屏
2、利用預(yù)渲染的方式生成靜態(tài)骨架屏
第一套方案寸认，毫無疑問是最簡單最直白的方式签财，缺點也很明顯，假如頁面布局有修改的話偏塞，那么除了修改業(yè)務(wù)代碼之外還需要額外修改骨架屏唱蒸，增加了維護的成本。
第二套方案灸叼，一定程度上改善了第一套方案帶來的維護成本增加的缺點神汹，主要還是使用工具預(yù)渲染頁面，獲取到DOM節(jié)點和樣式古今，保留頁面結(jié)構(gòu)屁魏，覆蓋樣式，生成灰色塊蓋在原有文本捉腥、圖片或者是canvas等節(jié)點上面氓拼，最后將生成的HTML和CSS打包出來，就是一個帶有骨架屏的頁面。最后再利用webpack工具將生成的骨架屏插入到HTML里面桃漾，詳細(xì)的話可以看看餓了么的分享坏匪，這里就不多描述了。
調(diào)研了下H5生成骨架屏的方案撬统，對于小程序生成骨架屏的方案也有了一個大致的想法适滓，主要有2個難點需要實現(xiàn)：
1、預(yù)渲染
2恋追、獲取節(jié)點
預(yù)渲染
再說回餓了么提供的骨架屏的方案凭迹，使用 puppeteer?（https://github.com/GoogleChrome/puppeteer）渲染頁面（或者使用服務(wù)端渲染，vue或者react都有提供相應(yīng)的方案）几于，拿到DOM節(jié)點和樣式蕊苗，這里有一點需要注意的是沿后，頁面的渲染是需要初始化的數(shù)據(jù)沿彭，數(shù)據(jù)的來源可以是初始化的data（vue）或者mock數(shù)據(jù)，當(dāng)然小程序是無法直接使用 puppeteer 來做預(yù)渲染（有另外的方案可以實現(xiàn)）尖滚，需要利用小程序初始化的 data + template 渲染之后得到一個初始化結(jié)構(gòu)作為骨架屏的結(jié)構(gòu)喉刘。
//index.js
Page({
? ?data: {
? ? ? ?motto: 'Hello World',
? ? ? ?userInfo: {
? ? ? ? ? ?avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/SYiaiba5faeraYBoQCWdsBX4hSjFKiawzhIpnXjejDtjmiaFqMqhIlRBqR7IVdbKE51npeF6X1cXxtDQD2bzehgqMA/132',
? ? ? ? ? ?nickName: 'jay'
? ? ? ?},
? ? ? ?lists: [
? ? ? ? ? ?'aslkdnoakjbsnfkajbfk',
? ? ? ? ? ?'qwrwfhbfdvndgndghndeghsdfh',
? ? ? ? ? ?'qweqwtefhfhgmjfgjdfghaefdhsdfgdfh',
? ? ? ?],
? ? ? ?showSkeleton: true
? ?},
? ?onLoad: 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>
有了上面的 data + template 之后，就有了一個初始化的頁面結(jié)構(gòu)漆弄，接下來就需要拿到節(jié)點信息睦裳。
節(jié)點
小程序基礎(chǔ)庫1.4.0之后小程序基礎(chǔ)庫提供了一組新的API，可用于獲取節(jié)點信息撼唾，具體API戳這里廉邑。
跟H5方式一樣，根據(jù)class或者id獲取節(jié)點信息倒谷，不同的是只能獲取到當(dāng)前的節(jié)點信息蛛蒙，無法獲取到其父或者子節(jié)點信息，所以只能手動給需要渲染骨架屏的節(jié)點添加相應(yīng)的class或者id：
<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>
約定2個特殊的class作為獲取節(jié)點信息的標(biāo)記 skeleton-rect和 skeleton-radius渤愁，在頁面中獲取相應(yīng)的 top牵祟、 left、 width抖格、 height進行骨架屏的繪制诺苹。
結(jié)果
具體的調(diào)用方式和源碼，請看 github?（https://github.com/jayZOU/skeleton）雹拄，最后求start收奔。
總結(jié)
上文有說到小程序也可以使用 page-skeleton-webpack-plugin?（https://github.com/ElemeFE/page-skeleton-webpack-plugin）方式一樣生成骨架屏，最重要的一點就是需要將小程序跑在chrome上面滓玖，后面的流程就一樣了筹淫，至于怎么將小程序跑在chrome上面呢？可以利用 wept?（https://github.com/chemzqm/wept），缺點就是目前作者已經(jīng)停止維護這個工具了损姜，不支持新版小程序的API饰剥。
說回來我這個生成骨架屏的方案，其實跟 page-skeleton-webpack-plugin 有點相似摧阅，不同的是汰蓉，page-skeleton-webpack-plugin 采用離線渲染的方式生成靜態(tài)骨架屏插入路由中，而我采用運行時先渲染頁面默認(rèn)結(jié)構(gòu)棒卷，然后根據(jù)默認(rèn)結(jié)構(gòu)再繪制骨架屏顾孽。從性能角度出發(fā)確實不如 page-skeleton-webpack-plugin，但是也差不了多少了比规，主要還是小程序并沒有提供類似服務(wù)端渲染的方案若厚。目前從使用上來講，還是有點小麻煩蜒什，需要默認(rèn)數(shù)據(jù)撐開頁面結(jié)構(gòu)测秸，需要給相應(yīng)的節(jié)點添加class，后面有時間再研究下有沒有更好的方案吧~~~
感興趣的小伙伴灾常，可以關(guān)注公眾號【grain先森】霎冯，回復(fù)關(guān)鍵詞 “小程序”，獲取更多資料钞瀑，更多關(guān)鍵詞玩法期待你的探索~
