1、網(wǎng)上找到一個(gè)大神的方案
https://github.com/jayZOU/skeleton
但是有幾個(gè)比較大的缺陷：
1、生成的骨架屏是一個(gè)整體，不能做到局部漸進(jìn)渲染替換涨享；
2、只能做出小的矩形和圓形的效果仆百，不能做出頁(yè)面樓層分離的效果厕隧，也就是還原不太漂亮（不過(guò)可以通過(guò)自己修改大神的代碼，逐步完善）儒旬；
3栏账、它是一個(gè)組件帖族，會(huì)在拿到頁(yè)面模板后才開(kāi)始生成骨架屏栈源，所以有很大的性能問(wèn)題，不能在一進(jìn)頁(yè)面就顯示出來(lái)竖般，數(shù)據(jù)請(qǐng)求很慢的情況下才會(huì)有比較好的作用和效果甚垦，不然根本看不到骨架屏??。
4涣雕、業(yè)務(wù)代碼侵入性較強(qiáng)艰亮，需要給業(yè)務(wù)代碼添加class區(qū)分是矩形還是圓形，（完美的最好是根據(jù)模板的標(biāo)簽和內(nèi)容節(jié)點(diǎn)來(lái)自動(dòng)判斷是什么形狀的陰影）挣郭；
2迄埃、后來(lái)無(wú)意中發(fā)現(xiàn)小程序開(kāi)發(fā)工具有一個(gè)生成骨架屏的功能
缺陷：
1、自動(dòng)化程度太低兑障；
2侄非、代碼增加小程序體積蕉汪；
3、對(duì)于一些節(jié)點(diǎn)的生成很不準(zhǔn)確逞怨，頁(yè)面骨架還原效果不咋地：
生成骨架屏的按鈕在這里：
最終先使用開(kāi)發(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
通過(guò)這篇文章，可以了解：為什么要使用骨架屏鳞仙？骨架屏的幾種方案寇蚊？
5、總結(jié)：
最棒的結(jié)果當(dāng)然是頁(yè)面有多個(gè)局部骨架棍好，漸進(jìn)式的渲染仗岸，并且頁(yè)面圖片能做到懶加載效果（微信小程序的image標(biāo)簽的lazy-load并不是我們期待的懶加載效果）
6、 后來(lái)發(fā)現(xiàn)了京東的骨架屏方案借笙，下文節(jié)選于：凹凸實(shí)驗(yàn)室：京喜小程序的高性能打造之路
一方面扒怖，我們可以從降低網(wǎng)絡(luò)請(qǐng)求時(shí)延、減少關(guān)鍵渲染的節(jié)點(diǎn)數(shù)這兩個(gè)角度出發(fā)业稼，縮短完成 FMP（首次有效繪制）的時(shí)間盗痒。另一方面，我們也需要從用戶(hù)感知的角度優(yōu)化加載體驗(yàn)低散。
“白屏” 的加載體驗(yàn)對(duì)于首次訪(fǎng)問(wèn)的用戶(hù)來(lái)說(shuō)是難以接受的俯邓，我們可以使用尺寸穩(wěn)定的骨架屏，來(lái)輔助實(shí)現(xiàn)真實(shí)模塊占位和瞬間加載熔号。
骨架屏目前在業(yè)界被廣泛應(yīng)用稽鞭，京喜首頁(yè)選擇使用灰色豆腐塊作為骨架屏的主元素，大致勾勒出各模塊主體內(nèi)容的樣式布局引镊。由于微信小程序不支持 SSR（服務(wù)端渲染）朦蕴，使動(dòng)態(tài)渲染骨架屏的方案難以實(shí)現(xiàn)，因此京喜首頁(yè)的骨架屏是通過(guò) WXSS 樣式靜態(tài)渲染的弟头。
有趣的是吩抓，京喜首頁(yè)的骨架屏方案經(jīng)歷了 “統(tǒng)一管理” 和 “（組件）獨(dú)立管理” 兩個(gè)階段。出于避免對(duì)組件的侵入性考慮赴恨，最初的骨架屏是由一個(gè)完整的骨架屏組件統(tǒng)一管理的：
<!-- index.wxml -->
<skeleton wx:if="{{isLoading}}"></skeleton>
<block wx:else>
頁(yè)面主體
</block>
但這種做法的維護(hù)成本比較高疹娶，每次頁(yè)面主體模塊更新迭代，都需要在骨架屏組件中的對(duì)應(yīng)節(jié)點(diǎn)同步更新（譬如某個(gè)模塊的尺寸被調(diào)整）伦连。除此之外雨饺，感官上從骨架屏到真實(shí)模塊的切換是跳躍式的挣饥，這是因?yàn)楣羌芷两M件和頁(yè)面主體節(jié)點(diǎn)之間的關(guān)系是整體條件互斥的，只有當(dāng)頁(yè)面主體數(shù)據(jù) Ready（或渲染完畢）時(shí)才會(huì)把骨架屏組件銷(xiāo)毀沛膳，渲染（或展示）主體內(nèi)容扔枫。
為了使用戶(hù)感知體驗(yàn)更加絲滑，我們把骨架屏元素拆分放到各個(gè)業(yè)務(wù)組件中锹安，骨架屏元素的顯示/隱藏邏輯由業(yè)務(wù)組件內(nèi)部獨(dú)立管理短荐，這就可以輕松實(shí)現(xiàn) “誰(shuí)跑得快，誰(shuí)先出來(lái)” 的并行加載效果叹哭。除此之外忍宋，骨架屏元素與業(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 在壓縮過(guò)程有些小問(wèn)題超升，大家可以直接訪(fǎng)問(wèn)【京喜】小程序體驗(yàn)骨架屏效果入宦。
