---

theme: cyanosis

持續創作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰」的第1天，點選檢視活動詳情

微信小程式骨架屏的應用與實現步驟

什麼是骨架屏

骨架屏是作為一種首次渲染載入優化的一種方法

我們開啟一個應用後，應用會通過ajax來請求資料，而在這段空缺的時間，沒有資料，內容缺失，這對於使用者的感覺很不好，所以我們需要在這個時間段內通過骨架屏來填充這個空缺。

如上圖所示，一個是沒有內容，一個是骨架屏的填充，所以在載入的這一秒內給使用者以骨架屏形式的填充是很有必要的。

小程式骨架屏的實現

1. 生成頁面骨架

微信小程式開發者工具提供了生成骨架屏的工具，所以我們可以快速高效得實現載入骨架屏

點選三個點，生成骨架屏，即可在對應page檔案下生成兩個檔案，檔案中包括了骨架屏的使用方式。

2. 骨架屏的應用

工具生成的骨架屏檔案中包含了使用方式，下面我拿person目錄舉例。

1. 在person.wxml的頭部加入下面的程式碼（該程式碼在生成的檔案中的註釋有提示） wxml <import src="person.skeleton.wxml"/> <template is="skeleton" wx:if="{{loading}}" />
2. 在person.wxss的頭部引入下面的程式碼，當然在生成的檔案註釋裡也有相關提示 wxss @import "./person.skeleton.wxss";
3. 在請求的回撥函式中進行骨架屏的控制 js var set = setInterval(function () { clearInterval(set); that.setData({ loading: false, //停止骨架屏 }) }, 1000)

3. 使用注意

1. 頁面更改後可以骨架屏隨時更新，隨時替換，很方便。
2. 在使用的過程中經常會遇到元素被提前加載出的情況所以我們需要為真實的頁面元素使用wx:if來和骨架屏進行反向操作，可以避免元素載入後出現與骨架屏重疊的現象。 wxml <template is="skeleton" wx:if="{{loading}}" /> <Header customTitle="個人中心"></Header> <view class="head" wx:if="{{!isLogin&&!loading}}" bindtap="login"> <image src="../../images/{{season}}-people.png" class="head-img"></image> <view class="head-name">點選登入</view> </view>

4. 思考後的封裝

骨架屏載入函式，我們每個頁面都需要進行呼叫，在我寫完一座xx山後意思到了這件事情，出現了這種情況

好了，我們改過自新

1. 在utils檔案下封裝一個骨架屏載入方法 js const loadScreen = (that,time) => { var set = setInterval(function () { clearInterval(set); that.setData({ loading: false, //停止骨架屏 hidden:false }) }, time) }
2. 在使用頁面引入 js let util = require('../../utils/util.js')
3. 直接呼叫 js let that =this; util.loadScreen(that,1500)

最後

掘友們有更好的想法可以在評論區留言，我會改造我寫的xxx山