1、網(wǎng)上找到一個(gè)大神的方案
https://github.com/jayZOU/skeleton
但是有幾個(gè)比較大的缺陷：
1、生成的骨架屏是一個(gè)整體，不能做到局部漸進(jìn)渲染替換；
2、只能做出小的矩形和圓形的效果，不能做出頁面樓層分離的效果，也就是還原不太漂亮（不過可以通過自己修改大神的代碼，逐步完善）；
3、它是一個(gè)組件，會(huì)在拿到頁面模板后才開始生成骨架屏，所以有很大的性能問題，不能在一進(jìn)頁面就顯示出來，數(shù)據(jù)請(qǐng)求很慢的情況下才會(huì)有比較好的作用和效果，不然根本看不到骨架屏??。
4、業(yè)務(wù)代碼侵入性較強(qiáng)，需要給業(yè)務(wù)代碼添加class區(qū)分是矩形還是圓形，（完美的最好是根據(jù)模板的標(biāo)簽和內(nèi)容節(jié)點(diǎn)來自動(dòng)判斷是什么形狀的陰影）；
2、后來無意中發(fā)現(xiàn)小程序開發(fā)工具有一個(gè)生成骨架屏的功能
缺陷：
1、自動(dòng)化程度太低；
2、代碼增加小程序體積；
3、對(duì)于一些節(jié)點(diǎn)的生成很不準(zhǔn)確，頁面骨架還原效果不咋地：
生成骨架屏的按鈕在這里：
最終先使用開發(fā)工具生成 的方案吧！
3、后續(xù)會(huì)研究如何做成一個(gè)：非侵入式，漸進(jìn)渲染，參考imageloader加載器，的骨架屏。
參考文章：https://www.geek-share.com/detail/2776148638.html
4、另附：你需要了解的前端骨架屏注入實(shí)踐
https://www.sohu.com/a/328224496_463987
通過這篇文章，可以了解：為什么要使用骨架屏？骨架屏的幾種方案？
5、總結(jié)：
最棒的結(jié)果當(dāng)然是頁面有多個(gè)局部骨架，漸進(jìn)式的渲染，并且頁面圖片能做到懶加載效果（微信小程序的image標(biāo)簽的lazy-load并不是我們期待的懶加載效果）
6、 后來發(fā)現(xiàn)了京東的骨架屏方案，下文節(jié)選于：凹凸實(shí)驗(yàn)室：京喜小程序的高性能打造之路
一方面，我們可以從降低網(wǎng)絡(luò)請(qǐng)求時(shí)延、減少關(guān)鍵渲染的節(jié)點(diǎn)數(shù)這兩個(gè)角度出發(fā)，縮短完成 FMP（首次有效繪制）的時(shí)間。另一方面，我們也需要從用戶感知的角度優(yōu)化加載體驗(yàn)。
“白屏” 的加載體驗(yàn)對(duì)于首次訪問的用戶來說是難以接受的，我們可以使用尺寸穩(wěn)定的骨架屏，來輔助實(shí)現(xiàn)真實(shí)模塊占位和瞬間加載。
骨架屏目前在業(yè)界被廣泛應(yīng)用，京喜首頁選擇使用灰色豆腐塊作為骨架屏的主元素，大致勾勒出各模塊主體內(nèi)容的樣式布局。由于微信小程序不支持 SSR（服務(wù)端渲染），使動(dòng)態(tài)渲染骨架屏的方案難以實(shí)現(xiàn)，因此京喜首頁的骨架屏是通過 WXSS 樣式靜態(tài)渲染的。
有趣的是，京喜首頁的骨架屏方案經(jīng)歷了 “統(tǒng)一管理” 和 “（組件）獨(dú)立管理” 兩個(gè)階段。出于避免對(duì)組件的侵入性考慮，最初的骨架屏是由一個(gè)完整的骨架屏組件統(tǒng)一管理的：
<!-- index.wxml -->
<skeleton wx:if="{{isLoading}}"></skeleton>
<block wx:else>
頁面主體
</block>
但這種做法的維護(hù)成本比較高，每次頁面主體模塊更新迭代，都需要在骨架屏組件中的對(duì)應(yīng)節(jié)點(diǎn)同步更新（譬如某個(gè)模塊的尺寸被調(diào)整）。除此之外，感官上從骨架屏到真實(shí)模塊的切換是跳躍式的，這是因?yàn)楣羌芷两M件和頁面主體節(jié)點(diǎn)之間的關(guān)系是整體條件互斥的，只有當(dāng)頁面主體數(shù)據(jù) Ready（或渲染完畢）時(shí)才會(huì)把骨架屏組件銷毀，渲染（或展示）主體內(nèi)容。
為了使用戶感知體驗(yàn)更加絲滑，我們把骨架屏元素拆分放到各個(gè)業(yè)務(wù)組件中，骨架屏元素的顯示/隱藏邏輯由業(yè)務(wù)組件內(nèi)部獨(dú)立管理，這就可以輕松實(shí)現(xiàn) “誰跑得快，誰先出來” 的并行加載效果。除此之外，骨架屏元素與業(yè)務(wù)組件共用一套 WXML 節(jié)點(diǎn)，且相關(guān)樣式由公共的 sass 模塊集中管理，業(yè)務(wù)組件只需要在適當(dāng)?shù)墓?jié)點(diǎn)掛上 skeleton 和 skeleton__block 樣式塊即可，極大地降低了維護(hù)成本。
<!-- banner.wxml -->
<view class="{{isLoading ? 'banner--skeleton' : ''}}">
<view class="banner_wrapper"></view>
</view>
// banner.scss
.banner--skeleton {
@include skeleton;
.banner_wrapper {
@include skeleton__block;
}
}
[圖片上傳失敗...(image-26fccc-1591845908496)]
上面的 gif 在壓縮過程有些小問題，大家可以直接訪問【京喜】小程序體驗(yàn)骨架屏效果。
