Die JD Vue3-Komponentenbibliothek unterstützt den detaillierten Prozess der Miniprogrammentwicklung

Quellcode-Vorschau: https://github.com/jdf2e/nutui

Offizielle NutUI 3.0-Website: https://nutui.jd.com/3x/

Miniprogramm Multi-Terminal-Anpassung

Designabsichten

Während der Entwicklung des terminalübergreifenden Miniprogramms stellten wir fest, dass es keine geeignete Komponentenbibliothek gab. Insbesondere bei Geschäften in E-Commerce-Mall-Szenarien gab es keine Komponentenbibliothek, die den JD-App-Spezifikationen entsprach, um unser Miniprogrammprojekt zu unterstützen. Um diese Lücke zu schließen und die NutUI-Komponentenbibliothek für mehr Entwickler praktischer zu machen, haben wir beschlossen, in NutUI 3.0 die Möglichkeit von Miniprogrammen für mehrere Terminals hinzuzufügen.

So passen Sie sich an

Taro bietet eine herausragende Leistung bei der terminalübergreifenden Entwicklung von Miniprogrammen. Taro 3x hat im November 2020 auch die Unterstützung für Vue3 angekündigt, sodass wir den Taro + Vue-Technologiestapel verwenden können, um das Ziel der Anpassung an mehrere Terminals in Miniprogrammen zu erreichen.

Die Eigenschaften von Taro können wie folgt sein:

– Kann die Konvertierung des nativen Codes des WeChat-Applets auf die WeChat-Plattform, Baidu-Plattform usw. realisieren;

- Das Taro-Framework ist das einzige Framework, das an Miniprogramme von JD.com angepasst werden kann;

– Unterstützt die React/Vue-Syntax, bessere Unterstützung für Komponentenbildung und TypeScript;

- Großer Einfluss der Branche, aktive Community und garantierte langfristige Unterstützung;

- Unterstützt synchrones Debuggen auf mehreren Terminals und kann an gängige Applets angepasst werden

Wenn diese Features und Fähigkeiten von Taro zur NutUI-Komponentenbibliothek hinzugefügt und ihre Funktionen verbunden werden können, kann der Traum von der Entwicklung von Miniprogrammen über die gesamte NutUI-Komponentenbibliothek hinweg verwirklicht werden. Unter der Leitung der Experten des Teams arbeitete das Team unermüdlich, führte wiederholte Versuche und Untersuchungen durch und verfeinerte die Anpassungsmethoden, die von einfach bis schwierig wie folgt sind:

- Taro-Selbstkompatibilität: 9 vorhandene 3.0-Komponenten wie Kontrollkästchen, Radio und Schritte können direkt in Taro verwendet werden.

- Style-Anpassung: Es gibt einige Unterschiede in den Styles und CSS-Selektoren an beiden Enden, die gezielt angegangen werden müssen.

- Differenzierte Verarbeitung der DOM-API: Unterschiedliche Methoden zum Abrufen von Elementen führen dazu, dass die Funktion der Komponente auf der Taro-Seite fehlschlägt. Für solche Komponenten müssen Anpassungen auf der DOM-Abrufebene vorgenommen werden.

- Tiefgreifende Anpassung: Dies ist auch der größte Teil der Arbeitslast, für den zum Neuschreiben von Komponenten der Aufruf nativer Taro- oder WeChat-Funktionen erforderlich ist. Für Komponenten mit komplexeren Interaktionen wie Picker, Swiper und Backtop müssen wir eine auf Taro basierende Kapselungsschicht erstellen, um den Anpassungszweck zu erreichen.

Für jede Komponente haben wir der Verzeichnisstruktur der ursprünglichen Komponente eine .taro.vue Datei hinzugefügt, um speziell die Taro-Kompatibilität zu handhaben. Für Demos und Dokumente haben wir den Dokumenten auf der offiziellen Website Registerkartenschalter hinzugefügt, um das Anzeigen der Verwendungsmethoden und entsprechenden Demos in verschiedenen Umgebungen zu erleichtern.

Wenn Sie den Effekt in der Miniprogrammumgebung anzeigen möchten, können Sie neben der offiziellen Website-Demo, die den QR-Code anzeigt, auch das Vue-Verzeichnis unter mobile-taro in unserem Projekt kopieren und den Effekt nach dem Start anzeigen.

Anwendung

Importieren Sie NutUI und verwenden Sie es in Ihrem Projekt.

# Vue3-Projekt npm i @nutui/nutui@next -S

# NutUI-Applet-Multiterminalprojekt npm i @nutui/nutui@taro -S 

Über NutUI 3.0

Technische Highlights:

1. Nutzen Sie Vue3

Einführung neuer Funktionen von Vue3: Composition API, Teleport, Emits usw.

Disruptive Änderungen, umfassende Upgrades

Refaktorisiert unter Verwendung der Composition API-Syntax, mit klarer Struktur und modularen Funktionen

Komponenten-Emissionsereignisse werden separat extrahiert, um die Lesbarkeit des Codes zu verbessern

Refactoring von Montagekomponenten mit den neuen Funktionen von Teleport

2. Build-Tools auf Vite 2.x aktualisiert

Machen Sie webpack veraltet und führen Sie Vite ein, das Front-End-Erstellungstool der nächsten Generation. Die Startgeschwindigkeit wird von 30 s auf etwa 500 ms erhöht, was die Entwicklungseffizienz erheblich verbessert.

3. TypeScript vollständig nutzen

NutUI 3.0 verwendet TypeScript als primäre Entwicklungssprache, um das Problem zu lösen, dass Komponenten vor dem Hintergrund der zunehmenden Komplexität von Front-End-Anwendungen schwer zu warten und zu erweitern sind.

Umfassende Verbesserung des visuellen Erlebnisses

NutUI 3.0 basiert auf der neuesten JD App 10.0-Spezifikation und kombiniert die verschiedenen Anwendungsszenarien im Einzelhandel, um NutUI-Komponenten neu zu organisieren und zu gestalten.

- Reduzierung redundanter Kontrollen

- Helfen Sie mobilen Designern, grundlegende Komponenten schnell wiederzuverwenden

- Festlegung gemeinsamer Standards für die Detailkonstruktion

- Verbesserung der Modularität und Universalität der Schnittstelle

- Festlegung grundlegender Standards für Design- und Entwicklungs-Docking

- Verbessern Sie die Effizienz der Produktion und der Forschungsausgabe-Dockingstation und reduzieren Sie den Ausgabeaufwand

- Erstellen Sie Szenarien basierend auf dem Designsprachensystem von JD.com

- Verfeinern Sie das Skelett, um den Hauptprozess zu rekonstruieren und eine „Szenenbewegungslinie“ zu erstellen, um das Erlebnis reibungsloser zu gestalten

Fragebogenumfrage

Damit wir Ihnen einen besseren Service bieten können, bitten wir Sie, sich ein paar Minuten Zeit zu nehmen, um uns Ihre Meinung und Vorschläge mitzuteilen. Wir werden Ihre Antworten streng vertraulich behandeln. Dies ist eine preisgekrönte Umfrage. Benutzer, die den Fragebogen ausfüllen, können einen Preis für Peripheriegeschenke von JD Joy verlosen.

Link zum Fragebogen: https://get.jd.com/

Das Obige ist die Jingdong Vue3-Komponentenbibliothek, die die Entwicklung von Miniprogrammen unterstützt! Weitere Einzelheiten zur Jingdong Vue3-Komponentenbibliothek finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!