Comment faire fonctionner votre mini-programme rapidement

Préface

J'ai déjà vu un article sur l'amélioration de la vitesse d'application du mini programme. L'article parle principalement de la façon de mettre en œuvre le mini programme à demander avant de déclencher le. saut de page. Le protocole utilise le court temps de 200 à 300 ms pour accéder à la page afin d'obtenir les données et de les restituer sur la page, afin que les données puissent être préchargées dans la mini-page du programme.

Grâce à cette technologie, le temps d’attente des utilisateurs peut être raccourci et l’expérience utilisateur peut être grandement améliorée. Puisque cet article ne donnait pas la méthode de mise en œuvre, mais expliquait seulement les principes techniques, cet article expliquera la méthode de mise en œuvre technique pour tout le monde.

Avantages et inconvénients du framework

Avantages :

• Précharger les données de la page suivante, ce qui améliore la vitesse de chargement de la page, protocole léger ( Les données peuvent être reçues en 200 à 300 ms environ), ce qui permet aux données d'être chargées instantanément après l'ouverture de la mini page du programme, et il n'y a presque pas de page vide.

• Conservez le code de la même entreprise dans une seule classe sans détruire la structure du projet.

• La quantité de code est très faible et elle a très peu d'impact sur l'activité d'origine.

• Vous souhaitez supprimer le préchargement après avoir implémenté le préchargement ? Supprimez simplement une chaîne dans la classe implémentée.

Inconvénients :

• Vous devez remplacer setData par $setData selon la situation

• Nécessite un développeur Soyez très clair sur le contexte de chaque situation.

• Si votre protocole prend beaucoup de temps, atteignant plus de 400 ms, l'effet de l'utilisation de cette méthode d'optimisation ne sera pas évident.

• Certains internautes ont découvert que ce projet ne peut pas fonctionner dans de petits programmes utilisant des composants, donc si vous utilisez des composants, vous ne devez pas utiliser ce projet directement. Cependant, il est tout de même recommandé d’assimiler les idées de ce projet. Après tout, la réflexion des ingénieurs est très importante dans leur travail.

Je ne vous montrerai pas l'effet final ici. Les amis intéressés peuvent l'essayer par eux-mêmes.

(Partage de vidéos d'apprentissage gratuit : Tutoriel vidéo php)

Comment intégrer

Déclaration importante : Mon applet suit la norme ES6 Écrit , il utilise des extensions de classe et des affectations de déstructuration, etc. Si vous ne le comprenez pas, veuillez apprendre ES6 ! ! Si votre projet utilise ES5, lisez attentivement les articles de suivi et comprenez l'idée principale de la technologie de préchargement. Si vous comprenez l'idée principale, écrivez-la en quelques minutes, n'est-ce pas ~ ~

Tout d'abord. , vous devez Il existe une classe de base CommonPage

Chaque classe Page de l'applet hérite de cette classe de base, ce qui facilite une gestion unifiée.

Par exemple, la page IndexPage suivante

// pages/index/index.js
import CommonPage from "../CommonPage";
class IndexPage extends CommonPage {
    constructor(...args) {
        super(...args);
        this.data = {
            testStr: 'this is the firstPage'
        }
    }

    onLoad(options) {
    }
}

Page(new IndexPage());

IndexPage est la première page et n'a pas besoin d'être préchargée. SecondPage est la deuxième page. Simulons la méthode de préchargement de SecondPage.

Ce que vous voyez ensuite, this.$route() this.$put() this.$take() this.$resolve() this.$reject() et ainsi de suite, sont toutes des classes de base. méthode implémentée dans.

1. Ajoutez un bouton de saut à la page IndexPage.

<!--index.wxml-->
<view class="container">
    <view bindtap="toSecondPage" hover-class="press-style" class="normal-style" hover-stay-time="100"> 闪电加载第二个页面</view>
    <view>300毫秒 闪电加载方式</view>
</view>

Remarque : La classe="normal-style" hover-stay-time="100" ajoutée ici est très importante si l'état de clic n'est pas ajouté, l'expérience sera grandement affectée.

2. Ajoutez une méthode de saut spécifique au préchargement à la page IndexPage.

 toSecondPage = function () {
        // this.$route是预加载的页面跳转方式，以wx.navigateTo方式跳转。这个方法是在CommonPage中实现的。
        this.$route({path: '../second/second', query: {count: 10, title: '这是第二个页面'}, clazzName: 'SecondPage'});
		
		// 这是小程序原生的普通加载方式
        // wx.navigateTo({
        //     url: '../second/second?count=10&title=这是第二个页面'
        // })
    }

this.$route({path, query, clazzName}); La signification du paramètre de cette méthode est :

• path : chemin de la page, prend en charge le chemin absolu et chemin de chemin relatif.

• requête : paramètres qui doivent être transmis. Il s'agit d'un type d'objet.

• clazzName : Le nom de classe de la page qui doit être sautée. J'en parlerai plus tard lorsque je présenterai SecondPage.

En fait, vous vous demandez peut-être, puisqu'il existe un chemin, pourquoi avons-nous besoin de clazzName ? Cette question sera abordée en détail lors de l’introduction des principes techniques, qui constitue le prochain article.

À ce stade, si vous utilisez également les spécifications ES6 pour implémenter des classes, vous pouvez voir que dans IndexPage, il vous suffit de changer la méthode de saut en this.$route({path, query, clazzName} ); c'est ça.

3. Ajoutez une méthode d'initialisation spécifique au préchargement à la page SecondPage.

// pages/second/second.js
import CommonPage from "../CommonPage";
class SecondPage extends CommonPage {
    constructor(...args) {
	    //super(...args)一定要写，他会将clazzName与下面的data进行合并。
        super(...args);
        //这个$init(obj)中注入的obj就是页面初始时的data
        super.$init({
            arr: []
        });
    }

    $onNavigator(query) {
	    //这里的query是从this.$route中传递来的query
        console.log('闪电️加载时接收到的参数', query);
        this.$put('second-data', this.initData.bind(this), query);
    };
	
    initData = function (query, resolve, reject) {
	    //这里的query是在this.$put()中传递过来的
	    //resolve在协议成功时回调
	    //reject在协议失败时回调
	    //模拟网络请求
        setTimeout(() => {
            if (typeof query.count === "string") {
                query.count = parseInt(query.count);
            }
            this.data.arr.splice(0, this.data.arr.length);
            for (let i = 0; i < query.count; i++) {
                this.data.arr.push({id: i, name: `第${i}个`, age: parseInt(Math.random() * 20 + i)})
            }
            this.$setData(this.data);
            this.$resolve(this.data);//或者 resolve(this.data);只有调用了resolve或者reject方法，才能在this.$take()的then()方法中获取到值。
        }, 300);
    };

    onLoad(options) {
        const lightningData = this.$take(&#39;second-data&#39;);
        if (lightningData) {
            lightningData.then((data) => {
	            //成功回调，resolve(data)调用时触发 data就是resolve传递的参数
                this.$setData(data);
            },(data, error)=>{
	            //失败回调，reject(data, error)调用时触发，data和error是reject传递的参数。
            });
            return;
        }
        this.initData(options);
    }
}
//这里注入的clazzName: &#39;SecondPage&#39;，与this.$route({path, query, clazzName});中的clazzName名称与其一致即可
Page(new SecondPage({clazzName: &#39;SecondPage&#39;}));

Probablement les étapes suivantes :

• Cette classe doit injecter clazzName lorsqu'elle est nouvelle, this.$route({path, query, clazzName}); en cela peut être cohérent avec cela.

• Vous devez injecter une nouvelle fonction de cycle de vie dans SecondPage, qui est la méthode de préchargement. Lors de l'exécution de this.$route, quel que soit le clazzName que vous transmettez dans this.$route, le framework trouvera automatiquement une classe correspondante et appellera la méthode $onNavigator de cette classe.

• Appelez ceci.$put(key, fun, query) dans $onNavigator Les paramètres sont respectivement la clé, la méthode de requête asynchrone et la méthode de requête asynchrone.

• Remplacez this.setData par this.$setData() dans la méthode de requête asynchrone et utilisez this.$resolve(data) ou this.$reject(data,error) pour appeler revenir avec succès ou échouer.

• Utilisez this.$take(key).then(success,fail) dans onLoad pour obtenir le résultat asynchrone, qui correspond respectivement aux rappels de résolution et de rejet. Si vous n'utilisez pas le préchargement ou si le préchargement échoue, alors la méthode this.$take(key) renvoie vide, vous pouvez donc déterminer si le préchargement est utilisé pour accéder à la page !

En faisant cela, le protocole de la page suivante peut être envoyé avant de sauter, et le code de la même entreprise peut être conservé dans une classe sans détruire la structure du projet !

Après avoir implémenté le préchargement, si vous ne souhaitez pas utiliser le préchargement, il vous suffit de supprimer le clazzName injecté lors de la nouvelle SecondPage() !

Recommandations associées : Tutoriel de développement de mini-programmes

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!