So läuft Ihr Miniprogramm schnell

Vorwort

Ich habe bereits einen Artikel über die Verbesserung der Anwendungsgeschwindigkeit von Miniprogrammen gesehen. In dem Artikel geht es hauptsächlich darum, wie man Miniprogramme implementiert, um das Protokoll anzufordern, bevor der Seitensprung ausgelöst wird, und dabei die kurzen 200 bis 300 ms zu nutzen Um die Seite zu überspringen, erhalten Sie die Daten und rendern sie auf der Seite, sodass die Daten auf der Miniprogrammseite vorgeladen werden können.

Durch diese Technologie kann die Wartezeit der Benutzer verkürzt und das Benutzererlebnis erheblich verbessert werden. Da in diesem Artikel nicht die Implementierungsmethode beschrieben, sondern nur die technischen Prinzipien erläutert wurden, wird in diesem Artikel die technische Implementierungsmethode für Sie erläutert.

Vor- und Nachteile des Frameworks

Vorteile:

• Laden Sie die Daten der nächsten Seite vor, was die Ladegeschwindigkeit der Seite verbessert (Daten können in etwa 200 bis 300 ms empfangen werden). Programmseite Nach dem Öffnen werden die Daten sofort geladen und es gibt fast keine leeren Seiten.

• Behalten Sie den Code desselben Unternehmens in einer Klasse, ohne die Projektstruktur zu zerstören.

• Die Codemenge ist sehr gering und hat kaum Auswirkungen auf das ursprüngliche Geschäft.

• Möchten Sie das Vorladen löschen, nachdem Sie das Vorladen implementiert haben? Löschen Sie einfach eine Zeichenfolge in der implementierten Klasse.

Nachteile:

• Sie müssen setData je nach Situation durch $setData ersetzen.

• Erfordert, dass Entwickler sich in jeder Situation sehr klar über den Kontext im Klaren sind.

• Wenn Ihr Protokoll sehr zeitaufwändig ist und mehr als 400 ms erreicht, ist der Effekt dieser Optimierungsmethode nicht offensichtlich.

• Einige Internetnutzer haben festgestellt, dass dieses Projekt nicht in kleinen Programmen ausgeführt werden kann, die Komponenten verwenden. Wenn Sie also Komponenten verwenden, sollten Sie dieses Projekt nicht direkt verwenden. Es wird jedoch dennoch empfohlen, die Ideen dieses Projekts zu verinnerlichen. Schließlich ist das Denken von Ingenieuren bei ihrer Arbeit sehr wichtig.

Den endgültigen Effekt werde ich euch hier nicht zeigen, interessierte Freunde können es selbst ausprobieren.

(Kostenloses Teilen von Lernvideos: php-Video-Tutorial)

So integrieren Sie

Wichtige Erklärung: Mein Applet ist in Übereinstimmung mit ES6-Standards geschrieben und verwendet Klassenerweiterungen und Destrukturierungszuweisungen usw. Wenn Sie es nicht verstehen, lernen Sie bitte ES6! ! Wenn Ihr Projekt ES5 verwendet, lesen Sie die Folgeartikel sorgfältig durch und verstehen Sie die Kernidee der Vorladetechnologie. Wenn Sie die Kernidee verstehen, können Sie sie in wenigen Minuten aufschreiben, richtig~~

Zuallererst Sie Sie benötigen eine Basisklasse CommonPage

Jede Page-Klasse im Applet erbt diese Basisklasse, was eine einheitliche Verwaltung erleichtert.

Zum Beispiel ist die IndexPage-Seite unten

// 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 ist die erste Seite und muss nicht vorab geladen werden. SecondPage ist die zweite Seite.

Was Sie als Nächstes sehen, sind this.$route() this.$put() this.$take() this.$resolve() this.$reject() und andere Methoden mit dem $-Symbol Basisklasse.

1. Fügen Sie der IndexPage-Seite eine Sprungschaltfläche hinzu.

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

Hinweis: Die hier hinzugefügte Klasse = „normal-style“ Hover-Stay-Time = „100“ ist sehr wichtig. Wenn der Klickstatus nicht hinzugefügt wird, wird das Erlebnis stark beeinträchtigt.

2. Fügen Sie der IndexPage-Seite eine vorab ladende Sprungmethode hinzu.

 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}); Die Parameterbedeutung dieser Methode ist:

• path: Seitenpfad, unterstützt absoluten Pfad und relativen Pfad.

• Abfrage: Parameter, die übergeben werden müssen. Dies ist ein Objekttyp.

• clazzName: Der Klassenname der Seite, die übersprungen werden muss. Ich werde später darüber sprechen, wenn ich SecondPage vorstelle.

Tatsächlich fragen Sie sich vielleicht, warum Sie clazzName brauchen, da es einen Weg gibt? Dieses Problem wird bei der Einführung in die technischen Prinzipien im nächsten Artikel ausführlich erörtert.

Wenn Sie an dieser Stelle auch ES6-Spezifikationen zum Implementieren von Klassen verwenden, können Sie sehen, dass Sie in IndexPage nur die Sprungmethode in this.$route({path, query, clazzName}) ändern müssen.

3. Fügen Sie der SecondPage-Seite eine Preload-spezifische Initialisierungsmethode hinzu.

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

Wahrscheinlich die folgenden Schritte:

• Diese Klasse muss clazzName einfügen, wenn sie neu ist, und der clazzName-Name in this.$route({path, query, clazzName}); kann damit übereinstimmen.

• Sie müssen eine neue Lebenszyklusfunktion in SecondPage einfügen, bei der es sich um die Vorlademethode handelt. Wenn Sie this.$route ausführen, findet das Framework unabhängig vom clazzNamen, den Sie in this.$route übergeben, automatisch eine passende Klasse und ruft die $onNavigator-Methode dieser Klasse auf.

• Nennen Sie dies.$put(key, fun, query) in $onNavigator Die Parameter sind Schlüssel, asynchrone Anforderungsmethode bzw. asynchrone Anforderungsmethodenparameter.

• Ersetzen Sie this.setData durch this.$setData() in der asynchronen Anforderungsmethode und verwenden Sie this.$resolve(data) oder this.$reject(data,error), um Erfolg oder Misserfolg zurückzurufen.

• Verwenden Sie this.$take(key).then(success,fail) in onLoad, um das asynchrone Ergebnis zu erhalten, das den Auflösungs- bzw. Ablehnungsrückrufen entspricht. Wenn Sie das Vorladen nicht verwenden oder das Vorladen fehlschlägt, gibt diese Methode „$take(key)“ leer zurück, sodass Sie feststellen können, ob das Vorladen zum Aufrufen der Seite verwendet wird!

Auf diese Weise wird das Protokoll der nächsten Seite vor dem Springen gesendet und der Code desselben Unternehmens bleibt in einer Klasse, ohne die Projektstruktur zu zerstören.

Bei der Implementierung des Vorladens. Wenn Sie dies nicht tun! Wenn Sie das Vorladen nicht verwenden möchten, müssen Sie nur den beim neuen SecondPage() injizierten clazzName löschen!

Verwandte Empfehlungen: Mini-Tutorial zur Programmentwicklung

Das obige ist der detaillierte Inhalt vonSo läuft Ihr Miniprogramm schnell. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!