WePY-Cloud-Entwicklungspraxis im Linux-Befehlsabfrage-Applet

WePY-Cloud-Entwicklungspraxis im Linux-Befehlsabfrage-Applet

Hallo zusammen, heute werde ich mit Ihnen die WePY-Cloud-Entwicklungspraxis im Linux-Befehlsabfrage-Applet teilen.

Warum WePY

Lassen Sie mich zunächst erklären, warum Sie sich für WePY entscheiden sollten.

Als ich mit der Auswahl des Projekts begann, standen mir als zugrunde liegende Frameworks WePy, MPVue, Taro und MinUI zur Auswahl. Diese Frameworks sind ausgereifte Frameworks, die bei der langfristigen Wartung von Miniprogrammprojekten helfen können. Darunter war Taro von Anfang an ausgeschlossen, da es React verwendete, mit dem ich nicht vertraut war. Nachdem ich mir MPVue angesehen hatte, stellte ich fest, dass es eher ein Miniprogramm-Konvertierungstool für Webentwickler ist und weniger ein Vue-ähnliches Tool für Miniprogramm-Entwickler, also schloss ich es ebenfalls aus. MinUI wurde ausgeschlossen, da es nur eine Komponentenlösung und Unterstützung für npm, ES6/ES7 bietet und andere Befehle weiterhin die Funktionen der Miniprogramme verwenden müssen. Es bietet keine weitere Unterstützung und das gesamte Ökosystem ist noch nicht umfangreich.

Am Ende habe ich mich für WePY entschieden. Bevor ich angefangen habe, habe ich mich über WePY informiert, um zu sehen, welche Vorteile es bietet. Generell denke ich, dass die Vorteile von WePY folgende sind:

1. Bietet eine Komponentenlösung ähnlich wie Vue: Die Komponentenentwicklung kann die Wartbarkeit des Projekts verbessern. Wenn Ihr Entwicklungszyklus länger wird, wirkt sich die Komponentenentwicklung stark auf Ihre Entwicklungserfahrung aus.

2. Bietet Unterstützung für die ES6/ES7-Syntax: Die kritisierten Rückrufe von JavaScript haben in ES6 und ES7 eine elegantere Implementierung.

3. Bietet ein Vue-Ökosystem: Im Gegensatz zum Einzelkämpferkampf von MinUI verfügt WePY über viele Produkte des Vue-Community-Ökosystems, wie WePY-Redux, RxWX und andere Vue-Tools, an deren Verwendung jeder gewöhnt ist, was den Entwicklungsprozess reibungsloser und das Entwicklungserlebnis konsistenter macht.

4. Optimierung der nativen API: Viele der offiziell vom Miniprogramm bereitgestellten Schnittstellen bieten Rückrufmodi und kein Promise. Wenn wir sie verwenden, müssen wir sie häufig selbst neu verpacken, was mühsam ist. In WePY haben WePY-Mitarbeiter eine Schicht für uns gekapselt. Sie können die von WePY gekapselten Methoden direkt verwenden, wodurch der Kapselungsaufwand verringert wird.

5. An Vue gewöhnte Dateneinstellungen: In WePY können Sie die Syntax this.xxx=xxx verwenden, um Zuweisungsvorgänge auszuführen. Im Vergleich zur nativen setData-Methode hat sie eine komfortablere Syntax und ist wartungsfreundlicher.

6. Berechnete Methoden werden bereitgestellt: Bei der Entwicklung von Miniprogrammen müssen wir zwangsläufig die Daten formatieren. Bei der herkömmlichen Entwicklung von Miniprogrammen müssen wir die Daten zuordnen und dann ändern. Nach der Verwendung von WePY können wir jedoch berechnete Eigenschaften verwenden, um die Daten zu formatieren und anzupassen, was die Lesbarkeit des Codes erheblich verbessert.

Dies sind die Vorteile von WePY, die ich schätze. Als Nächstes möchte ich darüber sprechen, wie man die Cloud-Entwicklung in WePY nutzt.

Cloud-Entwicklung in WePY

Ich habe viele Miniprogramme geschrieben und einige Miniprogrammkurse unterrichtet. Die Leute fragen mich oft: Kann XXX in XXX verwendet werden? Kann in diesem Szenario Cloud-Entwicklung in WePY verwendet werden?

Die Antwort ist natürlich ja.

Wenn Sie sich mit diesem Thema befassen, sollten Sie zunächst herausfinden, was genau die Cloud-Entwicklung bietet.

Cloud-Entwicklung bietet Datenspeicherung, Dateispeicherung und Rechenleistung

Dies steht nicht im Widerspruch zu WePYs Positionierung, die die Entwicklung von WeChat-Applets in Komponenten ermöglicht. Daher stehen WePY und Cloud-Entwicklung nicht im Widerspruch zueinander und Sie können die Cloud-Entwicklung in WePY nutzen.

Cloud-Entwicklung in WePY-Projekten ermöglichen

Da WePY selbst keine Vorlage für die Cloud-Entwicklung bereitstellt (Sie können jetzt jedoch den Befehl wepy init cloudkits/wepy-tcb-demo verwenden, um ein WePY-Projekt zu initialisieren, das ein Beispiel für die Cloud-Entwicklung enthält), müssen wir die Cloud-Entwicklung selbst zum Projekt hinzufügen.

Was die Cloud-Entwicklung selbst betrifft, ist sie in den wx.-Namespace integriert, sodass Sie wx.cloud.xxx direkt verwenden können, um verschiedene Cloud-Entwicklungsbefehle ohne Konfiguration aufzurufen. Darüber hinaus besteht die Besonderheit darin, dass Sie das Cloud-Funktionsverzeichnis angeben müssen, um sicherzustellen, dass das WeChat-Applet-Entwicklertool das Cloud-Funktionsverzeichnis erkennen kann.

Hierbei ist zu beachten, dass der Cloud-Entwicklungsbefehl selbst Promise und Callback unterstützt, sodass Sie ihn direkt über wx.cloud aufrufen können, anstatt wepy.cloud zu verwenden. WePY hat es nicht offiziell für die Cloud-Entwicklung verpackt.

Sie können im Stammverzeichnis des Miniprogrammprojekts ein neues Verzeichnis „Cloudfunctions“ erstellen, dann ein neues Konfigurationselement „CloudfunctionRoot“ in „project.config.json“ hinzufügen und seinen Wert auf „Cloudfunctions“ festlegen. Auf diese Weise kann das WeChat Mini-Programmentwicklertool erkennen, dass es sich bei diesem Verzeichnis um ein Cloud-Funktionsverzeichnis handelt, und ihm einen speziellen Verzeichnisnamen hinzufügen.

Hierbei ist zu beachten, dass die Cloud-Funktion außerhalb des Quellcodeverzeichnisses src des Miniprogramms abgelegt werden sollte, da es sonst zu Kompilierungsfehlern kommt. Ich habe versucht, das Konfigurationselement zum Abschirmen des Verzeichnisses für die Kompilierungsprüfung in wepy.config.js zu finden, konnte es aber nicht finden. Deshalb habe ich dieses Verzeichnis direkt in das Stammverzeichnis des Projekts eingefügt, auf dieselbe Ebene wie die Quelle der Cloud-Funktion und des Quellcodes des Miniprogramms.

Auf diese Weise haben Sie die Referenz zur Applet-Cloud-Entwicklung in WePY abgeschlossen.

Fallstricke bei der Entwicklung

Diese Aufgabe sollte zunächst die Daten festlegen

Bei der Entwicklung mit WePY verwenden wir this.xxx, um den Wert der Daten zu ändern. Als ich jedoch mit der Entwicklung begann, bestand das erste Problem, auf das ich stieß, darin, dass ich den Wert der Daten nicht mit this.xxx festlegen konnte und den entsprechenden Wert in der Miniprogrammschnittstelle nicht abrufen konnte.

Später fand ich heraus, dass Sie, wenn WePY Daten für Sie aktualisieren und verwalten soll, die an die Seite zu übergebenden Daten in das Datenobjekt in der Seiteninstanz einfügen müssen, damit WePY Ihnen beim Aktualisieren und Verwalten der Daten helfen kann. Da dies in der Dokumentation nicht erwähnt wurde, wusste ich nicht weiter.

Nachdem ich WePY analysiert hatte, verstand ich diesen Ansatz. Da WePY setData nicht verwendet, sondern this.xxx direkt aufruft, um Änderungen vorzunehmen, muss WePY wissen, welche Variablen an die Seite gesendet werden sollen. Andernfalls würde die Übertragung aller darin enthaltenen Daten an die Seite zu lange dauern, was leicht zum Beenden des Applets führen könnte. Zu diesem Zeitpunkt kann die Methode zur Verwendung von Daten zur Begrenzung der Daten verstanden werden.

Wie erfolgt die Verwaltung rein mobiler Daten?

Bisher bietet Cloud Development keine andere Verwaltungsmethode als die offizielle WeChat Mini-Programmkonsole, was uns beim Erstellen von Anwendungen stark einschränkt.

Um einen besseren Service bieten zu können, haben wir beschlossen, das Produktmodell zu ändern. Zunächst haben wir ein Modell in Betracht gezogen, bei dem Benutzer Übersetzungen einreichen und das Team diese überprüft, aber wir mussten die fehlenden Verwaltungs- und Entwicklungskosten berücksichtigen. Wir haben uns entschieden, das Modell anzupassen und auf Selbstreinigung durch die Gemeinschaft umzustellen. Wir öffnen die Bearbeitungsfunktionen vollständig und jeder Benutzer kann Daten übermitteln. Gleichzeitig ist es auch möglich, eine Anwendung zu implementieren, die vollständig von der Community im Land gepflegt wird.

Diese Art von Daten, die von jedem übermittelt werden können, können jedoch leicht von anderen missbraucht werden. Deshalb haben wir die offiziell vom WeChat Mini-Programm bereitgestellte Inhaltssicherheitsschnittstelle eingeführt, um Textsicherheitstests durchzuführen und so die Auswirkungen illegaler und rechtswidriger Inhalte auf das Mini-Programm so weit wie möglich zu verhindern.


Wenn Sie diese Schnittstelle verwenden, wissen Sie, dass beim Aufrufen der Schnittstelle ein Zugriffstoken erforderlich ist. Die Zugriffstoken-Erfassungsschnittstelle von WeChat weist sowohl Adressbeschränkungen für das Einleiten von Anrufen auf (sie kann nicht in Miniprogrammen aufgerufen werden) als auch Beschränkungen hinsichtlich der Häufigkeit von Schnittstellenanforderungen (zu schnelle Anforderungen können dazu führen, dass das Token nicht abgerufen werden kann). Daher haben wir uns entschieden, Cloud-Funktionen zu verwenden, um diesen Teil der Funktionalität abzuwickeln.

Wir verwenden die Got-Bibliothek in der Cloud-Funktion, um die von WeChat bereitgestellte Schnittstelle anzufordern, um einen Zugriffstoken zu erhalten und die Inhaltssicherheit zu erkennen. Um außerdem sicherzustellen, dass access_token-Anfragen nicht zu häufig gestellt werden, haben wir Code zum Zwischenspeichern des Tokens hinzugefügt.

const result = await cache.get(); // Cache ist ein Verweis auf die entsprechende Sammlung const now = (new Date).valueOf();
const nextTime = jetzt + 5400000;
let accessToken = ''
wenn (!Ergebnis.Daten.Länge) {
 console.log("Geben Sie den ersten Erfassungsprozess ein")
 const Ergebnis = warte auf got(accessTokenUrl).
 Zugriffstoken = JSON.parse(Ergebnis.Body).Zugriffstoken
 warte auf Cache.Hinzufügen({
  Daten: {
   Token: Zugriffstoken,
   Zeit: nächsteZeit
  }
 })
} anders {
 wenn (Ergebnis.Daten[0].Zeit > jetzt) ​​{
  console.log("Habe bereits ein gültiges Token")
  ZugriffsToken = Ergebnis.Daten[0].Token
 } anders {
  console.log("Das vorhandene Token ist ungültig")
  const tokenResult = warte auf got(accessTokenUrl)
  Zugriffstoken = JSON.parse(tokenResult.body).zugriffstoken
  warte auf cache.doc(result.data[0]._id).update({
   Daten:{
    Token: Zugriffstoken,
    Zeit: nächsteZeit
   }
  })
 }
}

Durch den obigen Code wird ein Token in der Cloud-Datenbank gespeichert und mit seinem Ablaufzeitpunkt verglichen. Wenn festgestellt wird, dass das Token bald abläuft, wird das Token aktualisiert, um sicherzustellen, dass die Anforderung normal gestellt werden kann.

Zusammenfassen

Wenn man auf den gesamten Entwicklungsprozess des Miniprogramms zurückblickt, verlief der gesamte Entwicklungsprozess dank der Benutzerfreundlichkeit von WePY äußerst reibungslos, und der Vorteil der schnellen Iteration der Cloud-Entwicklung trug dazu bei, dass die gesamte Anwendung schnell online ging. Die gesamte Entwicklungszeit vom Linux-Applet bis zur offiziellen Veröffentlichung beträgt nicht mehr als 24 Stunden!

Das könnte Sie auch interessieren:
  • So installieren Sie die Standalone-Version von Spark in einer Linux-Umgebung ohne Verwendung von Hadoop
  • Erstellen Sie eine Scala-Umgebung unter Linux und schreiben Sie ein einfaches Scala-Programm
  • Häufige Linux-Fehler bei der chinesischen Übersetzung (Neulinge müssen das wissen)
  • So rufen Sie ein Verzeichnis/einen Ordner in Linux auf, ohne den CD-Befehl zu verwenden
  • Drei Möglichkeiten, um zu überprüfen, ob ein Port in einem Remote-Linux-System geöffnet ist
  • Detailliertes Linux-Installationstutorial
  • Detaillierte Anweisungen zur Installation von Swoole aus dem Quellcodepaket unter Linux und grundlegende Verwendungsvorgänge
  • Detaillierte Erklärung der Verwendung des chmod-Befehls in Linux
  • Erläuterung verschiedener Möglichkeiten zum Ausführen von Tomcat unter Linux
  • Erläuterung zum Erstellen der Graphdatenbank neo4j in einer Linux-Umgebung

<<:  Entwerfen Sie einen Datensammler mit Vue

>>:  Einfaches Tutorial zum Herunterladen und Installieren der komprimierten Version von MySQL 5.7.20

Artikel empfehlen

Detaillierte Erläuterung der FTP-Umgebungskonfigurationslösung (vsftpd)

1. Installieren Sie die vsftpd-Komponente Install...

So verwenden Sie MySQL „group by“ und „order by“ gemeinsam

Angenommen, es gibt eine Tabelle: Belohnung (Belo...

So vereinfachen Sie Redux mit Redux Toolkit

Inhaltsverzeichnis Probleme, die Redux Toolkit lö...

JavaScript zum Implementieren der Auswahl oder Stornierung von Kontrollkästchen

In diesem Artikel wird der spezifische JavaScript...

XHTML verwendet einige veraltete Elemente in HTML nicht mehr

Wenn wir CSS-Webseitenlayouts erstellen, wissen wi...

Wie kompliziert ist die Priorität von CSS-Stilen?

Gestern Abend habe ich mir eine Interviewfrage ang...

Eine kurze Erläuterung zur Verwendung von Slots in Vue

Definition und Verwendung: Verwenden Sie die Slot...

Das Vue-Projekt implementiert eine Fortschrittsbalkenfunktion für den Dateidownload

Im täglichen Geschäftsleben gibt es zwei gängige ...

Das Bildelement img hat in IE6 zusätzlichen Leerraum

Beim Erstellen eines DIV+CSS-Layouts einer Seite ...

Zwei Möglichkeiten zur Visualisierung von ClickHouse-Daten mit Apache Superset

Apache Superset ist ein leistungsstarkes BI-Tool,...

JavaScript zur Implementierung der Login-Schiebereglerüberprüfung

In diesem Artikelbeispiel wird der spezifische Ja...