Introduction à l'utilisation du composant de préchargement d'image wxapp-img-loader dans l'applet WeChat

Cet article vous présente une introduction à l'utilisation du composant de préchargement d'image wxapp-img-loader dans l'applet WeChat. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. aide.

Étant donné que l'applet WeChat ne fournit pas d'objets JS comme Image, il est plus difficile de précharger les images. Le composant personnalisé wxapp-img-loader peut implémenter le préchargement d'image dans la fonction de l'applet WeChat.

Utilisez

1. Téléchargez le code source du projet wxapp-img-loader (https://github.com/o2team/wxa...) et modifiez-le. img- Copiez le répertoire du chargeur dans votre projet

2. Ajoutez le code suivant au fichier WXML de la page pour introduire le modèle de composant

<import></import>
<template></template>

3. Fichier JS de la page

const ImgLoader = require('../../img-loader/img-loader.js')

4. Instanciez un objet ImgLoader et transmettez-le (objet Page actuel). Le deuxième paramètre est facultatif et est la méthode de rappel par défaut pour terminer le chargement de l'image

this.imgLoader = new ImgLoader(this)

5. Appelez la méthode de chargement de l'instance ImgLoader pour charger l'image. Le premier paramètre est le lien de l'image, et le deuxième paramètre est facultatif et est la méthode de rappel lorsque l'image est chargée. Le premier paramètre de la méthode de rappel lorsque le chargement de l'image est terminé est le message d'erreur (nul si le chargement est réussi), et le deuxième paramètre est les informations sur l'image (type d'objet, y compris src, largeur et hauteur).

this.imgLoader.load(imgUrlOriginal, (err, data) => {    console.log('图片加载完成', err, data.src, data.width, data.height)
})

Le composant wxapp-img-loader peut charger une seule image ou plusieurs images.

Effet opérationnel :

Autres

Adresse du projet wxapp-img-loader : https://github.com/o2team/wxa...

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!