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

峨眉山ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

首屏

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

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

概念

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

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

方案

先從H5生成骨架屏方案開始說起，總的來說H5生成骨架屏的方案有2種

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

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

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

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

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

1.預渲染

2.獲取節(jié)點

預渲染

再說回餓了么提供的骨架屏的方案，使用 puppeteer 渲染頁面（或者使用服務端渲染，vue或者react都有提供相應的方案），拿到DOM節(jié)點和樣式，這里有一點需要注意的是，頁面的渲染是需要初始化的數(shù)據(jù)，數(shù)據(jù)的來源可以是初始化的data（vue）或者mock數(shù)據(jù)，當然小程序是無法直接使用 puppeteer 來做預渲染（有另外的方案可以實現(xiàn)），需要利用小程序初始化的 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 >
<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 之后，就有了一個初始化的頁面結構，接下來就需要拿到節(jié)點信息

節(jié)點

小程序基礎庫1.4.0之后小程序基礎庫提供了一組新的API，可用于獲取節(jié)點信息，具體API戳這里。
跟H5方式一樣，根據(jù)class或者id獲取節(jié)點信息，不同的是只能獲取到當前的節(jié)點信息，無法獲取到其父或者子節(jié)點信息，所以只能手動給需要渲染骨架屏的節(jié)點添加相應的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個特殊的class作為獲取節(jié)點信息的標記skeleton-rect和skeleton-radius，在頁面中獲取相應的top、left、width、height進行骨架屏的繪制

結果

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

總結

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

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

以上是“小程序怎么構建骨架屏”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)頁題目：小程序怎么構建骨架屏-創(chuàng)新互聯(lián)
分享URL：http://aaarwkj.com/article12/dopogc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、品牌網(wǎng)站建設、營銷型網(wǎng)站建設、網(wǎng)站建設、自適應網(wǎng)站、虛擬主機

廣告

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