小程式構建骨架屏的探索
（點選上方公眾號，可快速關注）
作者：jayzou
https://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方式給每個頁面定製一套骨架屏
利用預渲染的方式生成靜態骨架屏
第一套方案，毫無疑問是最簡單最直白的方式，缺點也很明顯，假如頁面佈局有修改的話，那麼除了修改業務程式碼之外還需要額外修改骨架屏，增加了維護的成本。
第二套方案，一定程度上改善了第一套方案帶來的維護成本增加的缺點，主要還是使用工具預渲染頁面，獲取到DOM節點和樣式，保留頁面結構，覆蓋樣式，生成灰色塊蓋在原有文字、圖片或者是canvas等節點上面，最後將生成的HTML和CSS打包出來，就是一個帶有骨架屏的頁面。最後再利用webpack工具將生成的骨架屏插入到HTML裡面，詳細的話可以看看餓了麼的分享，這裡就不多描述了。
調研了下H5生成骨架屏的方案，對於小程式生成骨架屏的方案也有了一個大致的想法，主要有2個難點需要實現：
預渲染
獲取節點
預渲染
再說回餓了麼提供的骨架屏的方案，使用 puppeteer （https://github.com/GoogleChrome/puppeteer）渲染頁面（或者使用服務端渲染，vue或者react都有提供相應的方案），拿到DOM節點和樣式，這裡有一點需要注意的是，頁面的渲染是需要初始化的資料，資料的來源可以是初始化的data（vue）或者mock資料，當然小程式是無法直接使用 puppeteer 來做預渲染（有另外的方案可以實現），需要利用小程式初始化的 data + template 渲染之後得到一個初始化結構作為骨架屏的結構。
//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},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：
<viewclass="container"><viewclass="userinfo"><block><imageclass="userinfo-avatar skeleton-radius"src="{{userInfo.avatarUrl}}"mode="cover"></image><textclass="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text></block></view><viewstyle="margin: 20px0"><viewwx:for="{{lists}}"class="lists"><icontype="success"size="20"class="list skeleton-radius"/><textclass="skeleton-rect">{{item}}</text></view></view><viewclass="usermotto"><textclass="user-motto skeleton-rect">{{motto}}</text></view><viewstyle="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，後面有時間再研究下有沒有更好的方案吧~~~
【關於投稿】
如果大家有原創好文投稿，請直接給公號傳送留言。
① 留言格式：
【投稿】+《 文章標題》+ 文章連結
② 示例：
【投稿】《不要自稱是程式設計師，我十多年的 IT 職場總結》：http://blog.jobbole.com/94148/
③ 最後請附上您的個人簡介哈~
覺得本文對你有幫助？請分享給更多人
關注「前端大全」，提升前端技能