這篇文章主要介紹小程序怎么構(gòu)建骨架屏，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),昆明企業(yè)網(wǎng)站建設(shè),昆明品牌網(wǎng)站建設(shè),網(wǎng)站定制,昆明網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,昆明網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

首屏

一般情況下，在首屏數(shù)據(jù)未拿到之前，為了提升用戶的體驗(yàn)，會(huì)在頁(yè)面上展示一個(gè)loading的圖層，類似下面這個(gè)

其中除了菊花圖以外網(wǎng)上還流傳這各種各樣的loading動(dòng)畫，在PC端上幾乎要統(tǒng)一江湖了，不過(guò)最近在移動(dòng)端上面看到不同于菊花圖的加載方式，就是這篇文章需要分享的Skeleton Screen，中文稱之為"骨架屏"

概念

A skeleton screen is essentially a blank version of a page into which information is gradually loaded.

在H5中，骨架屏其實(shí)已經(jīng)不是什么新奇的概念了，網(wǎng)上也有各種方案生成對(duì)應(yīng)的骨架屏，包括我們經(jīng)常使用的知乎、餓了么、美團(tuán)等APP都有應(yīng)用骨架屏這個(gè)概念

方案

先從H5生成骨架屏方案開(kāi)始說(shuō)起，總的來(lái)說(shuō)H5生成骨架屏的方案有2種

1.完全靠手寫HTML和CSS方式給每個(gè)頁(yè)面定制一套骨架屏

2.利用預(yù)渲染的方式生成靜態(tài)骨架屏

第一套方案，毫無(wú)疑問(wèn)是最簡(jiǎn)單最直白的方式，缺點(diǎn)也很明顯，假如頁(yè)面布局有修改的話，那么除了修改業(yè)務(wù)代碼之外還需要額外修改骨架屏，增加了維護(hù)的成本。

第二套方案，一定程度上改善了第一套方案帶來(lái)的維護(hù)成本增加的缺點(diǎn)，主要還是使用工具預(yù)渲染頁(yè)面，獲取到DOM節(jié)點(diǎn)和樣式，保留頁(yè)面結(jié)構(gòu)，覆蓋樣式，生成灰色塊蓋在原有文本、圖片或者是canvas等節(jié)點(diǎn)上面，最后將生成的HTML和CSS打包出來(lái)，就是一個(gè)帶有骨架屏的頁(yè)面。最后再利用webpack工具將生成的骨架屏插入到HTML里面，詳細(xì)的話可以看看餓了么的分享，這里就不多描述了。

調(diào)研了下H5生成骨架屏的方案，對(duì)于小程序生成骨架屏的方案也有了一個(gè)大致的想法，主要有2個(gè)難點(diǎn)需要實(shí)現(xiàn)

1.預(yù)渲染

2.獲取節(jié)點(diǎn)

預(yù)渲染

再說(shuō)回餓了么提供的骨架屏的方案，使用 puppeteer 渲染頁(yè)面（或者使用服務(wù)端渲染，vue或者react都有提供相應(yīng)的方案），拿到DOM節(jié)點(diǎn)和樣式，這里有一點(diǎn)需要注意的是，頁(yè)面的渲染是需要初始化的數(shù)據(jù)，數(shù)據(jù)的來(lái)源可以是初始化的data（vue）或者mock數(shù)據(jù)，當(dāng)然小程序是無(wú)法直接使用 puppeteer 來(lái)做預(yù)渲染（有另外的方案可以實(shí)現(xiàn)），需要利用小程序初始化的 data + template 渲染之后得到一個(gè)初始化結(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 >
<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 >
aaaaaaaaaaa
</view>
</view>

有了上面的 data + template 之后，就有了一個(gè)初始化的頁(yè)面結(jié)構(gòu)，接下來(lái)就需要拿到節(jié)點(diǎn)信息

節(jié)點(diǎn)

小程序基礎(chǔ)庫(kù)1.4.0之后小程序基礎(chǔ)庫(kù)提供了一組新的API，可用于獲取節(jié)點(diǎn)信息，具體API戳這里。
跟H5方式一樣，根據(jù)class或者id獲取節(jié)點(diǎn)信息，不同的是只能獲取到當(dāng)前的節(jié)點(diǎn)信息，無(wú)法獲取到其父或者子節(jié)點(diǎn)信息，所以只能手動(dòng)給需要渲染骨架屏的節(jié)點(diǎn)添加相應(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 >
<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 >
aaaaaaaaaaa
</view>
</view>

約定2個(gè)特殊的class作為獲取節(jié)點(diǎn)信息的標(biāo)記skeleton-rect和skeleton-radius，在頁(yè)面中獲取相應(yīng)的top、left、width、height進(jìn)行骨架屏的繪制

結(jié)果

具體的調(diào)用方式和源碼，請(qǐng)看 github ，最后求start

總結(jié)

上文有說(shuō)到小程序也可以使用 page-skeleton-webpack-plugin 方式一樣生成骨架屏，最重要的一點(diǎn)就是需要將小程序跑在chrome上面，后面的流程就一樣了，至于怎么將小程序跑在chrome上面呢？可以利用 wept ，缺點(diǎn)就是目前作者已經(jīng)停止維護(hù)這個(gè)工具了，不支持新版小程序的API。

說(shuō)回來(lái)我這個(gè)生成骨架屏的方案，其實(shí)跟 page-skeleton-webpack-plugin 有點(diǎn)相似，不同的是，page-skeleton-webpack-plugin 采用離線渲染的方式生成靜態(tài)骨架屏插入路由中，而我采用運(yùn)行時(shí)先渲染頁(yè)面默認(rèn)結(jié)構(gòu)，然后根據(jù)默認(rèn)結(jié)構(gòu)再繪制骨架屏。從性能角度出發(fā)確實(shí)不如 page-skeleton-webpack-plugin，但是也差不了多少了，主要還是小程序并沒(méi)有提供類似服務(wù)端渲染的方案。目前從使用上來(lái)講，還是有點(diǎn)小麻煩，需要默認(rèn)數(shù)據(jù)撐開(kāi)頁(yè)面結(jié)構(gòu)，需要給相應(yīng)的節(jié)點(diǎn)添加class，后面有時(shí)間再研究下有沒(méi)有更好的方案吧~~~

以上是“小程序怎么構(gòu)建骨架屏”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前文章：小程序怎么構(gòu)建骨架屏
當(dāng)前路徑：http://aaarwkj.com/article40/jejoho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、定制網(wǎng)站、全網(wǎng)營(yíng)銷推廣、網(wǎng)站維護(hù)、響應(yīng)式網(wǎng)站、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)