骨架屏在前端的應(yīng)用里很普及，不過(guò)大多都是在H5的應(yīng)用中，今天想談的是微信小程序中如何使用骨架屏，以及小程序骨架屏的實(shí)現(xiàn)原理，針對(duì)骨架屏項(xiàng)目還可以提個(gè)PR，封裝出來(lái)一個(gè)npm包形式的第三方，為前端社區(qū)做點(diǎn)小貢獻(xiàn)。
如何在微信小程序中使用骨架屏？一、安裝和引入1.安裝組件：
npm install --save miniprogram-skeleton2.引入skeleton自定義組件{
"usingComponents": {
"skeleton": "../miniprogram_npm/miniprogram-skeleton" }
}
小程序中npm的配置及使用：
在微信開(kāi)發(fā)者工具中，設(shè)置 —> 項(xiàng)目設(shè)置—> 勾選使用npm模塊。
在微信開(kāi)發(fā)者工具中，工具 —> 構(gòu)建npm，構(gòu)建完成會(huì)生成 miniprogram_npm 文件夾，項(xiàng)目用到的npm包都在這里。
按照頁(yè)面的使用路徑，從 miniprogram_npm 引入需要的包。
注意下小程序中npm的配置及使用比普通的npm包的使用多了一些配置，引出了 miniprogram_npm 的概念。
二、使用骨架屏組件1.在wxml頁(yè)面需要用到的地方使用，如下：
{
{
userInfo.nickName}
}
{
{
item}
}
{
{
motto}
}
aaaaaaaaaaa 2.在js頁(yè)面需要用到的地方使用，如下：
初始化默認(rèn)的數(shù)據(jù)，用于撐開(kāi)頁(yè)面結(jié)構(gòu)，讓骨架屏可以獲取到整體的頁(yè)面結(jié)構(gòu)。
//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) }
}
)在微信小程序中使用骨架屏比較簡(jiǎn)單的，注意骨架屏組件的基礎(chǔ)傳參，以及顯示和隱藏骨架屏的控制。
來(lái)看看骨架屏的實(shí)現(xiàn)原理源碼地址：
github.com/jayZOU/skel…作者是騰訊的一位大佬，是他作者的實(shí)現(xiàn)思路相對(duì)比較簡(jiǎn)單，所謂會(huì)者不難難者不會(huì)，了解了之后覺(jué)得聽(tīng)簡(jiǎn)單的。
實(shí)現(xiàn)思路是在網(wǎng)絡(luò)請(qǐng)求接口數(shù)據(jù)的這段時(shí)間，通過(guò)獲取到dom節(jié)點(diǎn)的大小填充底色，當(dāng)數(shù)據(jù)獲取到了，再將骨架屏隱藏。
在這個(gè)過(guò)程中有兩個(gè)點(diǎn)需要注意：
在小程序里如何獲取節(jié)點(diǎn)信息獲取到節(jié)點(diǎn)信息了，如何繪制骨架屏組件1. 在小程序里如何獲取節(jié)點(diǎn)信息利用微信小程序的 [selectorQuery](https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.html) 查找相關(guān)節(jié)點(diǎn)，提供了以下api:SelectorQuery SelectorQuery.in(Component component)將選擇器的選取范圍更改為自定義組件 component 內(nèi)。
（初始時(shí)，選擇器僅選取頁(yè)面范圍的節(jié)點(diǎn)，不會(huì)選取任何自定義組件中的節(jié)點(diǎn)）。
NodesRef SelectorQuery.select(string selector)在當(dāng)前頁(yè)面下選擇第一個(gè)匹配選擇器 selector 的節(jié)點(diǎn)。
返回一個(gè) NodesRef 對(duì)象實(shí)例，可以用于獲取節(jié)點(diǎn)信息。
NodesRef SelectorQuery.selectAll(string selector)在當(dāng)前頁(yè)面下選擇匹配選擇器 selector 的所有節(jié)點(diǎn)。
NodesRef SelectorQuery.selectViewport()選擇顯示區(qū)域。
可用于獲取顯示區(qū)域的尺寸、滾動(dòng)位置等信息NodesRef SelectorQuery.exec(function callback)執(zhí)行所有的請(qǐng)求。
請(qǐng)求結(jié)果按請(qǐng)求次序構(gòu)成數(shù)組，在callback的第一個(gè)參數(shù)中返回。
骨架屏組件期望能獲取匹配到的所有節(jié)點(diǎn)，作者使用的 SelectorQuery.selectAll() 2. 如何繪制骨架屏組件先繪制一個(gè)層級(jí)較高的頁(yè)面，填充背景色，再講獲取到的節(jié)點(diǎn)，圓節(jié)點(diǎn)、長(zhǎng)方形節(jié)點(diǎn)，用純灰色繪制。
通過(guò)絕對(duì)定位的方式繪制骨架屏。
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;
//繪制不帶樣式的節(jié)點(diǎn) 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);
}
);
}
, }
>>> 為微信小程序跨自定義組件的選擇器，用來(lái)獲取節(jié)點(diǎn)信息，具體細(xì)節(jié)請(qǐng)戳源碼。
給骨架屏組件提交個(gè)PR - 封裝為npm包我在使用的時(shí)候還是組件式的，把源碼下載下來(lái)，拷貝到項(xiàng)目里去，再使用，這種方式不是不行，就是不太方便。
我前段時(shí)間封了個(gè)微信小程序自定義table組件為npm，周下載量100+，就想著骨架屏也可以封裝成npm，使用起來(lái)多香。
于是你們就看到上面的npm的使用方式，我給這個(gè)項(xiàng)目提了 pull request，原作者 review 過(guò)代碼，改了一波合并了。
這讓我開(kāi)森了許久。
以后也想，多給開(kāi)源項(xiàng)目提些PR，給前端社區(qū)做些貢獻(xiàn)。
推薦教程：
《微信小程序》以上就是微信小程序中為什么不使用骨架屏，來(lái)提升用戶體驗(yàn)？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
微信小程序本文轉(zhuǎn)載于：
掘金社區(qū)，如有侵犯，請(qǐng)聯(lián)系[email protected]刪除
上一篇：
微信小程序必須買(mǎi)域名嗎
下一篇：
小程序如何設(shè)置類目相關(guān)文章相關(guān)視頻微信小程序如何開(kāi)發(fā)一款小游戲？（實(shí)戰(zhàn)教程）微信小程序刮刮卡的實(shí)現(xiàn)使用scss開(kāi)發(fā)微信小程序微信小程序中使用echarts微信小程序中為什么不使用骨架屏，來(lái)提升用戶體驗(yàn)？深入了解微信小程序(一)深入了解微信小程序(二)深入了解微信小程序(三) [溫州做小程序]