做者：jayzouvue
https://segmentfault.com/a/1190000015876164react
首屏
通常狀況下，在首屏數據未拿到以前，爲了提高用戶的體驗，會在頁面上展現一個loading的圖層，相似下面這個：webpack
其中除了菊花圖之外網上還流傳這各類各樣的loading動畫，在PC端上幾乎要統一江湖了，不過最近在移動端上面看到不一樣於菊花圖的加載方式，就是這篇文章須要分享的Skeleton Screen，中文稱之爲"骨架屏"git
概念
A skeleton screen is essentially a blank version of a page into which information is gradually loaded.github
在H5中，骨架屏其實已經不是什麼新奇的概念了，網上也有各類方案生成對應的骨架屏，包括咱們常用的知乎、餓了麼、美團等APP都有應用骨架屏這個概念。web
圖片來源網絡，侵刪：chrome
方案
先從H5生成骨架屏方案開始提及，總的來講H5生成骨架屏的方案有2種：canvas
一、徹底靠手寫HTML和CSS方式給每一個頁面定製一套骨架屏小程序
二、利用預渲染的方式生成靜態骨架屏segmentfault
第一套方案，毫無疑問是最簡單最直白的方式，缺點也很明顯，假如頁面佈局有修改的話，那麼除了修改業務代碼以外還須要額外修改骨架屏，增長了維護的成本。
第二套方案，必定程度上改善了第一套方案帶來的維護成本增長的缺點，主要仍是使用工具預渲染頁面，獲取到DOM節點和樣式，保留頁面結構，覆蓋樣式，生成灰色塊蓋在原有文本、圖片或者是canvas等節點上面，最後將生成的HTML和CSS打包出來，就是一個帶有骨架屏的頁面。最後再利用webpack工具將生成的骨架屏插入到HTML裏面，詳細的話能夠看看餓了麼的分享，這裏就很少描述了。
調研了下H5生成骨架屏的方案，對於小程序生成骨架屏的方案也有了一個大體的想法，主要有2個難點須要實現：
一、預渲染
二、獲取節點
預渲染
再說回餓了麼提供的骨架屏的方案，使用 puppeteer （https://github.com/GoogleChrome/puppeteer）渲染頁面（或者使用服務端渲染，vue或者react都有提供相應的方案），拿到DOM節點和樣式，這裏有一點須要注意的是，頁面的渲染是須要初始化的數據，數據的來源能夠是初始化的data（vue）或者mock數據，固然小程序是沒法直接使用 puppeteer 來作預渲染（有另外的方案能夠實現），須要利用小程序初始化的 data + template 渲染以後獲得一個初始化結構做爲骨架屏的結構。
//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 以後，就有了一個初始化的頁面結構，接下來就須要拿到節點信息。
節點
小程序基礎庫1.4.0以後小程序基礎庫提供了一組新的API，可用於獲取節點信息，具體API戳這裏。
跟H5方式同樣，根據class或者id獲取節點信息，不一樣的是隻能獲取到當前的節點信息，沒法獲取到其父或者子節點信息，因此只能手動給須要渲染骨架屏的節點添加相應的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做爲獲取節點信息的標記 skeleton-rect和 skeleton-radius，在頁面中獲取相應的 top、 left、 width、 height進行骨架屏的繪製。
結果
具體的調用方式和源碼，請看 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，後面有時間再研究下有沒有更好的方案吧~~~
感興趣的小夥伴，能夠關注公衆號【grain先森】，回覆關鍵詞 「小程序」，獲取更多資料，更多關鍵詞玩法期待你的探索~
本文同步分享在 博客「grain先森」（JianShu）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。