微信小程序中不使用骨架屏來提升用戶體驗的原因

這篇文章主要介紹了微信小程序中不使用骨架屏來提升用戶體驗的原因，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

如何在微信小程序中使用骨架屏？

一、安裝和引入

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)
	}
})

在微信小程序中使用骨架屏比較簡單的，注意骨架屏組件的基礎傳參，以及顯示和隱藏骨架屏的控制。

來看看骨架屏的實現原理

作者的實現思路相對比較簡單，所謂會者不難難者不會，了解了之后覺得聽簡單的。實現思路是在網絡請求接口數據的這段時間，通過獲取到dom節點的大小填充底色，當數據獲取到了，再將骨架屏隱藏。

在這個過程中有兩個點需要注意：

• 在小程序里如何獲取節點信息

• 獲取到節點信息了，如何繪制骨架屏組件

1. 在小程序里如何獲取節點信息

利用微信小程序的 [selectorQuery](https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.html) 查找相關節點，提供了以下api:

• SelectorQuery SelectorQuery.in(Component component)將選擇器的選取范圍更改為自定義組件 component 內。（初始時，選擇器僅選取頁面范圍的節點，不會選取任何自定義組件中的節點）。

• NodesRef SelectorQuery.select(string selector)在當前頁面下選擇第一個匹配選擇器 selector 的節點。返回一個 NodesRef 對象實例，可以用于獲取節點信息。

• NodesRef SelectorQuery.selectAll(string selector)在當前頁面下選擇匹配選擇器 selector 的所有節點。

• NodesRef SelectorQuery.selectViewport()選擇顯示區域。可用于獲取顯示區域的尺寸、滾動位置等信息

• NodesRef SelectorQuery.exec(function callback)執行所有的請求。請求結果按請求次序構成數組，在callback的第一個參數中返回。

骨架屏組件期望能獲取匹配到的所有節點，作者使用的 SelectorQuery.selectAll()

2. 如何繪制骨架屏組件

先繪制一個層級較高的頁面，填充背景色，再講獲取到的節點，圓節點、長方形節點，用純灰色繪制。通過絕對定位的方式繪制骨架屏。

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，給前端社區做些貢獻。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“微信小程序中不使用骨架屏來提升用戶體驗的原因”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!