為什麼微信小程式中不使用骨架屏，來提升使用者體驗？

骨架屏在前端的應用裡很普及，不過大多都是在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 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，給前端社群做些貢獻。

推薦教學：《微信小程式》

以上是為什麼微信小程式中不使用骨架屏，來提升使用者體驗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！