Pourquoi n'utilisons-nous pas des écrans squelettes dans les mini-programmes WeChat pour améliorer l'expérience utilisateur ?

Les écrans squelettes sont très populaires dans les applications frontales, mais la plupart d'entre eux se trouvent dans les applications H5. Aujourd'hui, je veux parler de la façon d'utiliser les écrans squelettes dans les mini-programmes WeChat et des principes de mise en œuvre des écrans squelettes dans les mini-programmes. pour les projets d'écran squelette Vous pouvez également soumettre un PR et le conditionner en tant que tiers sous la forme d'un package npm pour apporter une petite contribution à la communauté front-end.

Comment utiliser l'écran squelette dans le mini programme WeChat ?

---

1. Installation et introduction

1. Installer les composants :

npm install --save miniprogram-skeleton

2. Introduire le composant personnalisé squelette

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

Configuration et utilisation de npm dans le mini programme :

• dans les outils de développement WeChat, Paramètres— > Paramètres du projet : > Cochez Utiliser le module npm.

• Dans WeChat Developer Tools, Tools —> Build npm Une fois la construction terminée, le dossier miniprogram_npm sera généré ici.

• Introduisez les packages requis à partir de miniprogram_npm en fonction du chemin d'utilisation de la page.

Notez que la configuration et l'utilisation de npm dans le mini programme ont plus de configurations que l'utilisation de packages npm ordinaires, ce qui conduit au concept de miniprogram_npm.

2. Utilisez le composant d'écran squelette

1. Utilisez-le là où il est nécessaire sur la page wxml, comme suit :

<!--引入骨架屏模版 -->
<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. Utilisez-le là où la page js doit être utilisée, comme suit :

initialise les données par défaut, qui sont utilisées pour développer la structure de la page afin que l'écran squelette peut obtenir la structure globale de la page.

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

Il est relativement simple d'utiliser l'écran squelette dans l'applet WeChat. Faites attention aux paramètres de base du composant d'écran squelette et au contrôle d'affichage et de masquage de l'écran squelette.

Jetons un coup d'œil au principe de mise en œuvre de l'écran squelette

---

Adresse du code source : github.com/jayZOU/skel…

L'auteur est un grand patron de Tencent Il est l'auteur de

L'idée de mise en œuvre de l'auteur est relativement simple. La réunion convoquée n'est pas difficile pour ceux qui ne comprennent pas. Après l'avoir écouté, j'ai trouvé que c'était simple. L'idée de mise en œuvre est de remplir la couleur d'arrière-plan en obtenant la taille du nœud DOM pendant la période où le réseau demande des données d'interface. Lorsque les données sont obtenues, l'écran squelette est masqué.

Il y a deux points à noter dans ce processus :

• Comment obtenir les informations sur les nœuds dans le mini programme

• Obtenir Passons aux informations sur le nœud, comment dessiner le composant d'écran squelette

1 Comment obtenir les informations sur le nœud dans le mini programme

. À l'aide du mini-programme WeChat [selectorQuery](https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.html) Pour trouver les nœuds pertinents, les API suivantes sont fournies :

• SelectorQuery SelectorQuery.in (composant composant) modifie la plage de sélection du sélecteur dans la plage personnalisée composant composant. (Au départ, le sélecteur sélectionne uniquement les nœuds dans la plage de pages et ne sélectionnera pas les nœuds dans les composants personnalisés).

• NodesRef SelectorQuery.select(string selector) Sélectionne le premier nœud correspondant au sélecteur sous la page actuelle. Renvoie une instance d'objet NodesRef, qui peut être utilisée pour obtenir des informations sur le nœud.

• NodesRef SelectorQuery.selectAll(string selector) sélectionne tous les nœuds correspondant au sélecteur sous la page actuelle.

• NodesRef SelectorQuery.selectViewport() sélectionne la zone d'affichage. Peut être utilisé pour obtenir la taille, la position de défilement et d'autres informations de la zone d'affichage

• NodesRef SelectorQuery.exec(function callback) exécute toutes les requêtes. Les résultats de la requête sont formés dans un tableau dans l'ordre de la requête et renvoyés dans le premier paramètre du rappel.

Le composant d'écran squelette s'attend à obtenir tous les nœuds correspondants. L'auteur utilise SelectorQuery.selectAll() 

Comment dessiner le composant d'écran squelette

. Dessinez d'abord une page de niveau supérieur, remplissez-la avec la couleur d'arrière-plan, puis dessinez les nœuds obtenus, les nœuds circulaires et les nœuds rectangulaires, avec du gris pur. Dessinez l'écran squelette en utilisant le positionnement absolu.

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

>>> est un sélecteur de composants personnalisés pour les mini-programmes WeChat, utilisé pour obtenir des informations sur les nœuds. Pour plus de détails, veuillez cliquer sur le code source.

Soumettez un PR au composant d'écran squelette - emballez-le sous forme de package npm

Lorsque je l'utilise, il est toujours basé sur des composants. Téléchargez le code source et. copiez-le dans le projet, puis utilisez-le, cette méthode est soit impossible, soit peu pratique. Il y a quelque temps, j'ai scellé un composant de table personnalisé d'applet WeChat pour npm, avec un volume de téléchargement hebdomadaire de plus de 100, j'ai donc pensé que l'écran squelette pourrait également être intégré dans npm, ce qui serait génial à utiliser .

Vous pouvez donc voir comment utiliser npm ci-dessus. J'ai mentionné pull request ce projet, et l'auteur original review a révisé le code, l'a modifié et l'a fusionné. Cela m'a ennuyé pendant longtemps. À l'avenir, je souhaite également susciter davantage de PR pour des projets open source et apporter quelques contributions à la communauté front-end.

Tutoriel recommandé : "Mini programme WeChat"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!