Warum verwenden wir in WeChat-Miniprogrammen nicht Skelettbildschirme, um die Benutzererfahrung zu verbessern?

Skelettbildschirme sind in Front-End-Anwendungen sehr beliebt, die meisten davon jedoch in H5-Anwendungen. Heute möchte ich über die Verwendung von Skelettbildschirmen in WeChat-Miniprogrammen und die Implementierungsprinzipien von Skelettbildschirmen in Miniprogrammen sprechen. Für Skeleton-Screen-Projekte können Sie auch eine PR einreichen und diese als Drittpartei in Form eines npm-Pakets verpacken, um einen kleinen Beitrag zur Front-End-Community zu leisten.

Wie verwende ich den Skelettbildschirm im WeChat-Miniprogramm?

---

1. Installation und Einführung

1. Komponenten installieren:

npm install --save miniprogram-skeleton

2. Einführung der benutzerdefinierten Skelettkomponente

{
  "usingComponents": {
    "skeleton": "../miniprogram_npm/miniprogram-skeleton"
  }
}

Konfiguration und Verwendung von npm im Miniprogramm:

• in den WeChat-Entwicklertools, Einstellungen – > Projekteinstellungen –> NPM-Modul verwenden.

• In WeChat Developer Tools, Tools —> Build npm Nach Abschluss des Builds wird der Ordner miniprogram_npm generiert.

• Führen Sie die erforderlichen Pakete von miniprogram_npm entsprechend dem Nutzungspfad der Seite ein.

Beachten Sie, dass die Konfiguration und Verwendung von npm im Miniprogramm mehr Konfigurationen aufweist als die Verwendung gewöhnlicher npm-Pakete, was zum Konzept von miniprogram_npm führt.

2. Verwenden Sie die Skelettbildschirmkomponente

1. Verwenden Sie sie dort, wo sie benötigt wird, wie folgt:

<!--引入骨架屏模版 -->
<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. Verwenden Sie es dort, wo die js-Seite verwendet werden muss, wie folgt:

initialisiert die Standarddaten, die zum Erweitern der Seitenstruktur verwendet werden, sodass der Skelettbildschirm entsteht kann die gesamte Seitenstruktur erhalten.

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

Die Verwendung des Skelettbildschirms im WeChat-Applet ist relativ einfach. Achten Sie auf die grundlegenden Parameter der Skelettbildschirmkomponente und die Steuerung zum Ein- und Ausblenden des Skelettbildschirms.

Werfen wir einen Blick auf das Implementierungsprinzip des Skelettbildschirms

---

Quellcode-Adresse: github.com/jayZOU/skel…

Der Autor ist ein großer Chef von Tencent. Er ist der Autor von

Die Umsetzungsidee des Autors ist relativ einfach Das Treffen ist für diejenigen, die es nicht verstehen, nicht schwierig. Nachdem ich es gehört hatte, dachte ich, es sei einfach. Die Implementierungsidee besteht darin, die Hintergrundfarbe auszufüllen, indem die Größe des DOM-Knotens während des Zeitraums ermittelt wird, in dem das Netzwerk Schnittstellendaten anfordert. Wenn die Daten abgerufen werden, wird der Skelettbildschirm ausgeblendet.

Bei diesem Vorgang sind zwei Punkte zu beachten:

• So erhalten Sie Knoteninformationen im Miniprogramm

• Get Es ist Zeit, die Knoteninformationen abzurufen, wie man die Skelett-Bildschirmkomponente zeichnet

1. So erhält man die Knoteninformationen im Miniprogramm

Verwenden des WeChat-Miniprogramms [selectorQuery](https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.html) Um relevante Knoten zu finden, werden die folgenden APIs bereitgestellt:

• SelectorQuery SelectorQuery.in (Komponentenkomponente) ändert den Auswahlbereich des Selektors auf innerhalb des benutzerdefinierte Komponentenkomponente. (Zunächst wählt der Selektor nur Knoten im Seitenbereich aus und wählt keine Knoten in benutzerdefinierten Komponenten aus.)

• NodesRef SelectorQuery.select(string selector) Wählt den ersten Knoten aus, der dem Selektor-Selektor unter der aktuellen Seite entspricht. Gibt eine NodesRef-Objektinstanz zurück, die zum Abrufen von Knoteninformationen verwendet werden kann.

• NodesRef SelectorQuery.selectAll(string selector) wählt alle Knoten aus, die dem Selektor-Selektor unter der aktuellen Seite entsprechen.

• NodesRef SelectorQuery.selectViewport() wählt den Anzeigebereich aus. Kann verwendet werden, um die Größe, die Bildlaufposition und andere Informationen des Anzeigebereichs abzurufen.

• NodesRef SelectorQuery.exec (Funktionsrückruf) führt alle Anforderungen aus. Die Anfrageergebnisse werden in der Anfragereihenfolge zu einem Array zusammengefasst und im ersten Parameter des Rückrufs zurückgegeben.

Die Skelett-Bildschirmkomponente erwartet, alle passenden Knoten zu erhalten. Der Autor verwendet SelectorQuery.selectAll() 

So zeichnen Sie die Skelett-Bildschirmkomponente

Zeichnen Sie zuerst eine übergeordnete Seite, füllen Sie sie mit der Hintergrundfarbe und zeichnen Sie dann die erhaltenen Knoten, Kreisknoten und rechteckigen Knoten in reinem Grau. Zeichnen Sie den Skelettbildschirm mit absoluter Positionierung.

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

>>> ist ein Selektor für WeChat-Miniprogramme, der zum Abrufen von Knoteninformationen verwendet wird. Für Details klicken Sie bitte auf den Quellcode.

Senden Sie eine PR an die Skeleton-Screen-Komponente – verpacken Sie sie als npm-Paket

Wenn ich sie verwende, ist sie immer noch komponentenbasiert Kopieren Sie es in das Projekt und verwenden Sie es dann. Diese Methode ist entweder unmöglich oder unpraktisch. Vor einiger Zeit habe ich eine benutzerdefinierte WeChat-Applet-Tabellenkomponente für npm mit einem wöchentlichen Download-Volumen von 100+ versiegelt, sodass ich dachte, dass der Skelettbildschirm auch in npm gepackt werden könnte, was großartig zu verwenden wäre .

Sie können also oben sehen, wie man npm verwendet pull request zu diesem Projekt, und der ursprüngliche Autor review hat den Code überprüft, geändert und zusammengeführt. Das hat mich lange geärgert. In Zukunft möchte ich auch mehr PRs für Open-Source-Projekte sammeln und einige Beiträge für die Front-End-Community leisten.

Empfohlenes Tutorial: „WeChat Mini-Programm“

Das obige ist der detaillierte Inhalt vonWarum verwenden wir in WeChat-Miniprogrammen nicht Skelettbildschirme, um die Benutzererfahrung zu verbessern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!