溫州宜山鎮(zhèn)微信小程序中為什么不使用骨架屏,來提升用戶體驗?

閱讀 23517  ·  發(fā)布日期 2020-08-24 17:26  ·  溫州優(yōu)光網(wǎng)絡(luò)科技有限公司|建站|APP小程序制作|做網(wǎng)站SEO推廣優(yōu)化
【摘要】 骨架屏在前端的應(yīng)用里很普及,不過大多都是在H5的應(yīng)用中,今天想談的是微信小程序中如何使用骨架屏,以及小程序骨架屏的實現(xiàn)原理,針對骨架屏項目還可以提個PR,封裝出來一個npm包形式的第三方,為前端社區(qū)做點小貢獻(xiàn)。如何在微信小程序中使用骨架屏?一、安裝和引入1.安裝組件:npm install --save minipro... 【溫州小程序開發(fā),溫州微信公眾號,平陽做網(wǎng)站,平陽網(wǎng)站建設(shè)公司,平陽小程序商城制作,昆陽萬全做網(wǎng)站,鰲江水頭小程序,蕭江騰蛟微信公眾號,山門順溪南雁海西南麂鳳臥麻步懷溪網(wǎng)絡(luò)網(wǎng)店服務(wù),政采云網(wǎng)店管理服務(wù)】...

微信小程序中為什么不使用骨架屏,來提升用戶體驗?

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