骨架屏在前端的應用裡很普及，不過大多都是在H5的應用中，今天想談的是微信小程式中如何使用骨架屏，以及小程式骨架屏的實作原理，針對骨架屏項目也可以提個PR，封裝出來一個npm套件形式的第三方，為前端社群做點小貢獻。
如何在微信小程式中使用骨架螢幕？
一、安裝與引入
#1.安裝元件：
npm install --save miniprogram-skeleton
2.引入skeleton自訂元件
{
"usingComponents": {
"skeleton": "../miniprogram_npm/miniprogram-skeleton"
}
}小程式中npm的設定及使用：
在微信開發者工具中，設定—> 項目設定—> 勾選使用npm模組。
在微信開發者工具中，工具 —> 建立npm，建置完成會產生 miniprogram_npm 資料夾，專案用到的npm套件都在這裡。
依照頁面的使用路徑，從 miniprogram_npm 引入需要的套件。
注意下小程式中npm的配置及使用比普通的npm套件的使用多了一些配置，引出了 miniprogram_npm 的概念。
二、使用骨架螢幕元件
#1.在wxml頁面需要用到的地方使用，如下：
<!--引入骨架屏模版 -->
<skeleton wx:if="{{showSkeleton}}"></skeleton>
<!--index.wxml-->
<!--给页面根节点class添加skeleton, 用于获取当前页面尺寸，没有的话就默认使用屏幕尺寸-->
<view class="container skeleton">
<view class="userinfo">
<block>
<!--skeleton-radius 绘制圆形-->
<image class="userinfo-avatar skeleton-radius" src="{{userInfo.avatarUrl}}"
mode="cover"></image>
<!--skeleton-rect 绘制矩形-->
<text class="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text>
</block>
</view>
<view style="margin: 20px 0">
<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 style="margin-top: 200px;">
aaaaaaaaaaa
</view>
</view>2.在js頁面需要用到的地方使用，如下：
初始化預設的數據，用於撐開頁面結構，讓骨架螢幕可以取得到整體的頁面結構。
//index.js
Page({
data: {
motto: 'Hello World',
userInfo: {
avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/SYiaiba5faeraYBoQCWdsBX4hSjFKiawzhIpnXjejDtjmiaFqMqhIlRBqR7IVdbKE51npeF6X1cXxtDQD2bzehgqMA/132',
nickName: 'jayzou'
},
lists: [
'aslkdnoakjbsnfkajbfk',
'qwrwfhbfdvndgndghndeghsdfh',
'qweqwtefhfhgmjfgjdfghaefdhsdfgdfh',
],
showSkeleton: true //骨架屏显示隐藏
},
onLoad: function () {
const that = this;
setTimeout(() => { //3S后隐藏骨架屏
that.setData({
showSkeleton: false
})
}, 3000)
}
})在微信小程式中使用骨架螢幕比較簡單的，注意骨架螢幕組件的基礎傳參，以及顯示和隱藏骨架螢幕的控制。
來看看骨架螢幕的實作原理
原始碼位址：github.com/jayZOU/skel…
作者是騰訊的一位大佬，是他
作者的實現思路相對比較簡單，所謂會者不難難者不會，了解了之後覺得聽簡單的。實現想法是在網路請求介面資料的這段時間，透過取得到dom節點的大小填充底色，當資料取得到了，再將骨架螢幕隱藏。
在這個過程中有兩個點要注意：
在小程式裡如何取得節點資訊
1. 在小程式裡如何取得節點資訊
利用微信小程式的 [selectorQuery](https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.html) 尋找相關節點，提供了以下api:
SelectorQuery.selectAll()
ready: function () {
const that = this;
//绘制背景
wx.createSelectorQuery().selectAll(`.${this.data.selector}`).boundingClientRect().exec(function(res){
that.setData({
'systemInfo.height': res[0][0].height + res[0][0].top
})
});
//绘制矩形
this.rectHandle();
//绘制圆形
this.radiusHandle();
},
methods: {
rectHandle: function () {
const that = this;
//绘制不带样式的节点
wx.createSelectorQuery().selectAll(`.${this.data.selector} >>> .${this.data.selector}-rect`).boundingClientRect().exec(function(res){
that.setData({
skeletonRectLists: res[0]
})
console.log(that.data);
});
},
radiusHandle: function () {
const that = this;
wx.createSelectorQuery().selectAll(`.${this.data.selector} >>> .${this.data.selector}-radius`).boundingClientRect().exec(function(res){
console.log(res);
that.setData({
skeletonCircleLists: res[0]
})
console.log(that.data);
});
},
}>>> 為微信小程式跨自訂元件的選擇器，用來取得節點信息，具體細節請戳給骨架螢幕元件提交個PR - 封裝為npm套件#我在使用的時候還是元件式的，把原始碼下載下來，拷貝到專案裡去，再使用，這種方式不是不行，就是不太方便。我前段時間封了個源碼。
微信小程式自訂table元件為npm，週下載量100 ，就想著骨架螢幕也可以封裝成npm，使用起來多香。
於是你們就看到上面的npm的使用方式，我給這個項目提了 pull request，原作者review 過程式碼，改了一波合併了。這讓我開森了許久。以後也想，多給開源專案提些PR，給前端社群做些貢獻。
推薦教學：《微信小程式》
以上是為什麼微信小程式中不使用骨架屏，來提升使用者體驗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
