Können WeChat-Miniprogramme vue.js verwenden?

WeChat-Miniprogramme können vue.js verwenden. mpvue ist ein Front-End-Framework, das [Vue.js] zur Entwicklung von WeChat-Miniprogrammen verwendet. Mit diesem Framework erhalten Entwickler eine vollständige [Vue.js]-Entwicklungserfahrung Gleichzeitig ist es H5. Und Miniprogramme bieten die Möglichkeit, Code wiederzuverwenden.

【Empfohlene verwandte Artikel: vue.js】

WeChat-Applet kann vue.js verwenden

mpvue ist ein WeChat-Applet, das mit entwickelt wurde Vorderseite des Vue.js-Programms Endrahmen. Mithilfe dieses Frameworks erhalten Entwickler eine umfassende Vue.js-Entwicklungserfahrung und bieten gleichzeitig Funktionen zur Wiederverwendung von Code für H5- und Miniprogramme. Wenn Sie ein H5-Projekt in ein kleines Programm umwandeln möchten oder ein kleines Programm entwickeln und es in H5 konvertieren möchten, ist mpvue eine sehr geeignete Lösung.

Merkmale der Miniprogrammentwicklung

Das WeChat Miniprogramm empfiehlt eine prägnante Entwicklungsmethode und vervollständigt schlanke Produktfunktionen durch mehrseitige Aggregation. Das Miniprogramm wird lokal als Offline-Paket heruntergeladen, geladen und über den WeChat-Client gestartet. Die Entwicklungsspezifikationen sind einfach, die Technologie ist vollständig gekapselt und es verfügt über ein eigenes Entwicklungssystem ist nie dasselbe.

Das Applet selbst ist als einfaches logisches View-Layer-Framework positioniert. Es wird offiziell nicht empfohlen, komplexe Anwendungen zu entwickeln, aber die Geschäftsanforderungen sind schwer zu vereinfachen. Komplexe Anwendungen stellen höhere Anforderungen an Entwicklungsmethoden wie Komponenten und Modularisierung, automatische Konstruktion und Integration, Wiederverwendung von Code und Entwicklungseffizienz usw. Kleine Programmentwicklungsspezifikationen schränken diese Fähigkeiten jedoch erheblich ein. Um die oben genannten Probleme zu lösen und ein besseres Entwicklungserlebnis zu bieten, haben wir mpvue erstellt, um WeChat-Miniprogramme mit Vue.js zu entwickeln.

Was ist mpvue? mpvue ist ein Front-End-Entwicklungsframework für die Entwicklung kleiner Programme. Sein Hauptziel besteht darin, die Entwicklungseffizienz zu verbessern und die Entwicklungserfahrung zu verbessern. Mit diesem Framework müssen Entwickler lediglich ein vorläufiges Verständnis der Miniprogramm-Entwicklungsspezifikationen haben und mit der grundlegenden Syntax von Vue.js vertraut sein, um loszulegen. Das Framework bietet ein umfassendes Vue.js-Entwicklungserlebnis. Entwickler schreiben Vue.js-Code, und mpvue analysiert und konvertiert ihn in ein kleines Programm und stellt sicher, dass es korrekt ausgeführt wird. Darüber hinaus bietet das Framework Entwicklern über das Tool vue-cli einen Schnellstart-Beispielcode. Entwickler müssen lediglich einen einfachen Befehl ausführen, um ein ausführbares Projekt zu erhalten.

Warum machen wir mpvue

Zu Beginn des internen Tests des Miniprogramms planten wir, schnell eine Produktimplementierung zu iterieren, die H5 misst. Die Kernanforderungen sind: schnelle Implementierung, Code-Wiederverwendung, niedrige Kosten und hohe Effizienz... Nachfolgende Erfahrungen Nachdem wir mehrere Miniprogramme erstellt, Geschäftsszenarien, Technologieauswahl und Miniprogramm-Entwicklungsmethoden kombiniert hatten, haben wir die Hauptprobleme während der Entwicklungsphase gelöst:

Der Komponentisierungsmechanismus ist nicht perfekt genug

• Mangelnde Mehrend-Wiederverwendbarkeit des Codes

• Das Applet-Framework und der Team-Technologie-Stack können nicht organisch kombiniert werden

• Die Lernkosten des Applets sind nicht niedrig genug
Komponentenmechanismus:

Die Applet-Logik und -Ansicht Der Ebenencode ist voneinander getrennt und öffentliche Komponenten können nach der Extraktion nicht aggregiert werden. Es handelt sich um einen einzelnen Dateieintrag, und Komponenten müssen in die Ansichtsebene bzw. die Logikebene eingeführt werden, was zu einer schlechten Wartbarkeit führt. Komponenten haben keinen Namespace-Mechanismus. Ereignisrückrufe müssen als globale Funktionen festgelegt werden, beim Komponentendesign besteht die Gefahr von Namenskonflikten und die Datenkapselung ist nicht stark. Entwickler benötigen eine benutzerfreundliche Code-Organisationsmethode, die gleichzeitig über das

ES-Modul importiert werden kann. Komponentendaten müssen gut gekapselt sein. Ausgereifte Komponentenmechanismen sind für die technische Entwicklung von entscheidender Bedeutung.

Multi-Terminal-Wiederverwendung:

Es gibt zwei gängige Geschäftsszenarien, die bestehende H5

-Produkte in Miniprogrammanwendungen umwandeln oder umgekehrt. Aus Effizienzgründen hoffen Entwickler, die Entwicklung durch Wiederverwendung von Code abzuschließen, aber das Miniprogramm-Entwicklungsframework kann dies nicht leisten. Wir haben versucht, den H5-Code durch statische Codeanalyse in ein kleines Programm umzuwandeln, aber es wurde nur die Konvertierung der Ansichtsebene durchgeführt, was keinen weiteren Nutzen bringen konnte. Die Wiederverwendung von Code an mehreren Enden erfordert ausgereiftere Lösungen.

Wir stellen vor: Vue.js:

Die Entwicklungsmethode für kleine Programme ähnelt H5, daher ziehen wir die Wiederverwendung von Code mit H5 in Betracht. Nach der Auswahl des Technologie-Stacks durch das Team haben wir Vue.js als Miniprogramm-Entwicklungsspezifikation festgelegt. Die Verwendung von Vue.js zur Entwicklung kleiner Programme führt direkt zu den folgenden Verbesserungen der Entwicklungseffizienz:

H5-Code kann mit minimalen Änderungen in kleinen Programmen wiederverwendet werden

• Durch die Verwendung des Vue.js-Komponentenmechanismus zur Entwicklung kleiner Programme können kleine Programme realisiert werden Wiederverwendung von Programmen mit H5-Komponenten

• Nach der Vereinheitlichung des Technologie-Stacks werden die Kosten für das Erlernen von Miniprogrammen reduziert. Entwickler müssen beim Wechsel von H5- zu Miniprogrammen nicht mehr lernen.

• Vue.js-Code ermöglicht alles - endet direkt mit der Entwicklung und Wartung

• Warum Vue.js? Dies hängt von der Technologie-Stack-Auswahl des Teams ab. Die Einführung neuer Auswahlmöglichkeiten steht im Widerspruch zur Vereinheitlichung des Technologie-Stacks und zur Verbesserung der Entwicklungseffizienz und widerspricht der ursprünglichen Absicht des Entwicklungstool-Dienstleistungsgeschäfts.

Die Entwicklung von mpvue

mpvue wurde auf der Grundlage von Geschäftsszenarien und -anforderungen entwickelt. Die endgültige Lösung durchlief drei Phasen.

Phase 1: Wir haben ein View-Layer-Code-Konvertierungstool implementiert, das die Effizienz der erstmaligen Codeentwicklung verbessern soll. Führen Sie eine sekundäre Entwicklung dieses Zielcodes durch, indem Sie den H5-View-Layer-Code in Miniprogrammcode konvertieren, einschließlich HTML-Tag-Mapping, Vue.js-Vorlagen und Stilkonvertierung. Wir haben eine begrenzte Code-Wiederverwendung erreicht, aber die Kosten für die Komponentenentwicklung und das Lernen kleiner Programme wurden nicht effektiv verbessert.

Die zweite Phase: Wir konzentrieren uns auf die Verbesserung des Code-Komponentisierungsmechanismus. Das Code-Organisationsformular wurde unter Bezugnahme auf die Komponentenspezifikationen von Vue.js

entworfen und der Code wurde mithilfe des Codekonvertierungstools in kleine Programme analysiert. Das Konvertierungstool löst hauptsächlich Datensynchronisierungs-, Lebenszykluszuordnungs- und Namespace-Probleme zwischen Komponenten. Am Ende haben wir eine

Vue.js-Syntaxteilmenge implementiert, aber wenn wir weitere Funktionen implementieren oder Vue.js-Versionsiterationen verfolgen möchten, wird die Arbeitsbelastung schwer abzuschätzen und fühlt sich endlos an.

Die dritte Stufe: Unser Ziel ist es, den gesamten Satz der Vue.js-Syntax zu unterstützen und das Ziel zu erreichen, kleine Programme mit Vue.js zu entwickeln

. Und durch die Einführung der Vue.js-Laufzeit unterstützt es die Vue.js-Syntax und vermeidet so eine menschliche Syntaxanpassung. An diesem Punkt haben wir das Ziel der Entwicklung kleiner Programme mit

Vue.js erreicht. Die Ziele der Vereinheitlichung von Technologie-Stacks, der komponentenbasierten Entwicklung, der Wiederverwendung von Multi-End-Code, der Reduzierung der Lernkosten und der Verbesserung der Entwicklungseffizienz wurden besser erreicht.

Verwandte kostenlose Lernempfehlungen: Javascript (Video), WeChat-Applet-Entwicklungs-Tutorial

Das obige ist der detaillierte Inhalt vonKönnen WeChat-Miniprogramme vue.js verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!