Dieser Artikel stammt aus der fehlerhaften Tencent-Entwicklergemeinde . Bitte drucken Sie ihn nicht ohne Zustimmung des Autors nach. Die ursprüngliche Adresse: http: //dev.qq.com/topic/58212 ...
Autor: peggy
Applet-Übersicht
Am Abend des 3. November gab das WeChat-Team bekannt, dass das WeChat-Applet für die öffentliche Beta geöffnet ist. Entwickler können sich bei der öffentlichen WeChat-Plattform anmelden, um sich zu bewerben. Nach Abschluss der Entwicklung können sie diese zur Überprüfung einreichen.
Wir haben vor einiger Zeit auch kleine Programme entwickelt und lassen uns nun die bisherigen Entwicklungserfahrungen zusammenfassen.
1. Was ist ein Applet?
Das WeChat-Applet ist eine Mischung aus einer nativen App und einer Web-App. Durch das Laden über WeChat wird eine ähnliche Glätte wie bei nativen Apps erzielt. Im Vergleich zu nativen Apps sind Applets leichter, in Echtzeit aktualisiert und plattformübergreifend. Im Vergleich zu Web-Apps sind Applet-Ressourcen offline und die Benutzererfahrung reibungsloser.
Das Entwurfsziel des WeChat-Applets besteht darin, Entwicklern die Entwicklung von Diensten mit einer nativen APP-Erfahrung in WeChat auf einfachste und effizienteste Weise zu ermöglichen.
Lassen Sie uns, ohne so viel zu sagen, einen Blick auf die Wirkung des Applets werfen:
Sind Sie nach dem Lesen der Ergebnisse neugierig auf die Entwicklung ~
2. Der Realisierungsmechanismus von Applets
Die Entwicklung von Applets basiert auf einer Reihe von Anwendungsframeworks, die von WeChat bereitgestellt werden. Durch die Kapselung der Grundfunktionen des Dateisystems, der Netzwerkkommunikation, der Aufgabenverwaltung und der Datensicherheit, die vom WeChat-Client bereitgestellt werden, stellt WeChat der oberen Ebene einen vollständigen Satz von Javascript-APIs zur Verfügung, sodass Entwickler die verschiedenen vom WeChat-Client bereitgestellten Funktionen problemlos verwenden können Grundfunktionen, schnell eine Anwendung erstellen. Das Rahmendesign ist wie folgt:
Das Framework bietet seine eigenen Beschreibungssprachen für die Ansichtsebene WXML und WXSS sowie ein auf JavaScript basierendes Logikschicht-Framework und eine Datenübertragung zwischen der Ansichtsebene und der Logikschicht durch Einweg-Datenbindung , sodass sich Entwickler stärker auf Daten und Logik konzentrieren .
3. Unterstützte Funktionen
Schauen wir uns als Nächstes die spezifischen Funktionen des WeChat-Frameworks an:
wxml: alles ist eine Komponente (Ansichtskomponente)
Ansichtskomponente (ähnlich wie div in H5)
Eingabekomponente (Typ = Ziffer, es gibt eine 9-Quadrat-Tastatur mit Dezimalpunkt)
modale Popup-Komponente (entsprechende wxml, Wirkung wie folgt) (Diese Komponente wurde in js geändert, um wx.showModal () zu implementieren.)
Weitere wxml-Komponenten finden Sie in der Applet-Dokumentation zur öffentlichen Plattform von WeChat
4. Funktionale API:
Zahlen
Zugriff auf WeChat-Informationen
Netzwerkanforderung
Aufnahme
Dateien hochladen / herunterladen
webSocket
Album besuchen
Weitere Informationen zur API finden Sie im Applet-Dokument zur öffentlichen Plattform von WeChat
5. Andere:
Nachrichtenbenachrichtigung senden
Kurze Statistik (pv, uv)
Jetzt lass es uns entwickeln ~
Applet-Entwicklungsprozess
1. Holen Sie sich die AppID des WeChat Mini-Programms
Zweitens erstellen Sie ein Projekt
Das Erstellen eines Projekts muss über Entwicklertools erfolgen. (Das Tool wird auf der öffentlichen Plattform des WeChat Mini-Programms heruntergeladen.)
Drei, schreibe Code
Schauen wir uns zunächst die Verzeichnisstruktur des Applets an:
WeChat hat einige Vorschriften zur Entwicklung kleiner Programme:
Die drei Dateien links im obigen Bild werden im Stammverzeichnis des Applets abgelegt, und andere Dateien werden vom Entwickler frei gesteuert.
app.js ist der Skriptcode des Applets, mit dem die Lebenszyklusfunktion des Applets überwacht und verarbeitet und globale Variablen deklariert werden
app.json ist die globale Konfiguration des gesamten Applets. Konfigurieren Sie, aus welchen Seiten das Applet besteht, konfigurieren Sie die Fensterhintergrundfarbe des Applets usw.
app.wxss ist das allgemeine Stylesheet für das gesamte Applet
Unter ihnen sind app.js und app.json erforderlich.
Die Applet-Seite besteht aus vier verschiedenen Suffix-Dateien mit demselben Namen unter demselben Pfad:
Die Datei mit der Erweiterung .js ist eine Skriptdatei
Die Datei mit dem Suffix .json ist die Konfigurationsdatei
Das Suffix .wxss ist die Stylesheet-Datei
Die Suffix-Datei .wxml ist eine Seitenstrukturdatei
In der H5-Entwicklung führen wir das entsprechende CSS, js auf der Seite ein, und die Applet-Entwicklung muss nicht in wxml eingeführt werden. Sie erfolgt über denselben Namen, die Seite und die Logik js, die Stilzuordnung und den Abgleich.
Als nächstes beginnen wir mit der spezifischen Entwicklung ~
Frame: Der WeChat-Frame ist in das Applet eingebettet, es wird kein zusätzlicher Frame benötigt
Wenn wir mit der Entwicklung beginnen, beginnen wir im Allgemeinen mit dem Framework. Das Applet kapselt ein für den Client entwickeltes Framework. Da der Entwickler des Applets auf diesem Framework basiert, muss das vorhandene Framework nicht berücksichtigt werden und muss nicht berücksichtigt werden.
Die vorhandenen Frameworks basieren im Wesentlichen auf Fenster- und Dokumentobjekten. Das Applet verfügt nicht über eine Fenster-, Dokument- oder Browser-Stückliste als Hostumgebung. Sie können verstehen, dass die Hostumgebung des Applets der Hostumgebung des Knotens und nicht dem Browser-Client ähnelt. Für die Gestaltung dieser Umgebung können sich interessierte Kinderschuhe an PWS wenden
Modular: Unterstützt formal CommonJs, das Laden von Referenzen ähnelt eher ES6
Das Applet-Formular unterstützt CommonJS und wird über require geladen, ähnlich wie node und seajs. Was jedoch von require geladen wird, ist die referenzierte Zuweisung, nicht der Wertcache in CommonJS.
Modulschreiben von Applets:
Das Modul des kleinen Programms wird ausgeführt (ähnlich wie bei Node fügt das Framework automatisch eine äußere Definition hinzu):
Modularität: UI-Komponentendesign
Während der Entwicklung müssen wir möglicherweise aufpassen, wenn die auf die Ansicht bezogenen Komponenten modularisiert sind. Zum Beispiel packen wir die Bullet-Box in H5 im Allgemeinen in eine Modulkomponente, damit sie wiederverwendet werden kann. Im Applet kann die Ansicht nur in wxml vorliegen und nicht dynamisch generiert werden.
Schauen wir uns zunächst das Ansichtskomponentenmodal des WeChat-Popup-Fensters an. Die von WeChat bereitgestellte API sieht folgendermaßen aus (die Komponente WeChat wurde auf andere Weise implementiert und wird hier zur Beschreibung des Problems verwendet):
Haben Sie Assoziationen? Wenn eine Seite 100 Aufzählungszeichen verwenden muss, muss der Entwickler 100wxml-Komponenten erstellen und die entsprechenden 100 OK-Schaltflächenereignisse und 100 Abbrechen-Schaltflächenereignisse registrieren. Dies ist offensichtlich unvernünftig.
Kann es in eine allgemeine Komponente des Frameworks gekapselt werden, müssen Entwickler nur das entsprechende Ereignishandle übergeben? Später kann WeChat die Kapselung ~ in Betracht ziehen
NEIN ~！
Warum? Aus der Perspektive des Framework-Komponentendesigns übernimmt das Framework selbst eine zustandsorientierte Programmierung, und der Komponententeil ähnelt dem Redux-Design (tatsächlich nicht von Redux implementiert).
Nach der Aktion der Komponentenansicht kann die Ansicht nur über den Geschäftsprozess der Aktion aktualisiert werden. Das Framework ist eine Einweg-Datenbindung und kann nicht automatisch aktualisiert werden.
Für diese Art von View-Komponente, die mit einer Aktion geliefert wird, wird die erforderliche erneute Kapselung empfohlen. Die Kapselung kann die dynamische Registrierung und Deinstallation von aop berücksichtigen .
1. Definieren Sie eine gemeinsame Vorlage für Komponenten
2. Eine Möglichkeit, die Logik von Komponenten zu kapseln
1) Die Standardkonfiguration der Komponente:
2) Einkapselung von Bauteilen
3. Verwendung von Komponenten:
1) Führen Sie die Vorlage der Komponente in die Seite wxml ein
2) Verwenden Sie auf der Seite js jederzeit und unbegrenzt das Popup-Feld
Derzeit ist die Komponente WeChat gekapselt (api: wx.showModal () ruft das Aufzählungsfeld auf), aber die Funktion, dass die Aktion nicht automatisch aktualisiert werden kann, ist weiterhin vorhanden. Entwickler, die andere UI-Komponenten mit Interaktion anpassen müssen, werden weiterhin auf die oben genannten Probleme stoßen. Sie können sich auf die obigen Lösungen beziehen.
Spezifische Seitenentwicklung
Für die Entwicklung von Geschäftsseiten kann die Seite als Seitenkomponente betrachtet werden. In dieser Seitenkomponente sind folgende Arbeiten abgeschlossen:
Verantwortlich für die Initialisierung des Komponentenstatus (WeChat)
Verantwortlich für die Kombination von Unteransichtskomponenten zu Seiteneffekten (Entwickler)
Bestimmen Sie den Datenabgleich js und view (Entwickler)
Verantwortlich für die Registrierung von Geschäftslogikmethoden, die von Geschäftslogikobjekten (Entwicklern) bereitgestellt werden
Verantwortlich für die Verwaltung von Geschäftslogikobjekten (Entwickler)
1） index.wxml
2） index.js
Die Kommunikation zwischen Seite wxml und Seite js ist wie folgt (vereinfacht die Arbeit des WeChat-Frameworks)
Was wir bei der Seitenentwicklung beachten müssen, sind:
Die Daten in index.js sind schreibgeschützt
Auf Seite js müssen Datendaten als schreibgeschützt vereinbart werden. Das Framework ist eine Einweg-Datenbindung. Durch Ändern der Daten in Daten wird die Ansicht nicht automatisch aktualisiert. Um die Ansicht zu aktualisieren, müssen Sie die Methode setData () verwenden. Wenn setData () die Ansicht aktualisiert, wird der Diff mit den Daten in den Daten verglichen und der Unterschied wird aktualisiert. Wenn Sie die Daten direkt ändern, kann dies leicht dazu führen, dass die Daten in den Daten nicht mit der Ansicht übereinstimmen.
Der von setData in einem einzelnen Vorgang festgelegte Datensatz darf 1024 KB nicht überschreiten, und es muss vermieden werden, zu viele Daten gleichzeitig festzulegen.
Vorlage, diese Vorlagen haben ihren eigenen unabhängigen Bereich.
Unterstützung für ES6 ... Erweitern Sie die Moduldaten.
｛｛… CardInfo｝｝, die Daten in der Vorlage ｛｛Kartenname｝｝, {{bank_simple_name}}, die entsprechenden Daten in den Daten sind die Daten: ｛cardInfo: ｛card_name "", bank_simple_name: ""｝ Ansichtssteuerung.
Damit ist die Entwicklung auf Seitenebene abgeschlossen ~~ JA!
Der Unterschied zwischen Applet und H5
Was ist beim Schreiben des Codes der Unterschied zwischen dem Applet und der H5-Entwicklung?
Javascript:
(1) Einschränkungen:
Die Möglichkeit, Code durch Übergabe von Zeichenfolgen auszuführen, ist deaktiviert
Aus Sicherheitsgründen ist die Möglichkeit, Code durch Übergabe von Zeichenfolgen auszuführen, deaktiviert. Die spezifischen verbotenen nativen Funktionen sind: neue Funktion, Auswertung, Generator. Dies ist auch effektiv, um Probleme wie xss in H5 zu vermeiden.
Die gesperrten Funktionen haben einen erheblichen Einfluss auf unsere Entwicklung: string to json. In der Vergangenheit haben wir neue Funktionen und eval verwendet, um die Rückgabe von Hintergrund-CGI zu handhaben. (Das mobile Endgerät ist im Allgemeinen in einem Framework wie zepto gekapselt.) Die Entwicklung kleiner Programme muss die spezifische Implementierung ändern.
Es gibt keine APIs für die Browser-Stückliste.
Unter diesen Stücklisten sollte der größte Einfluss auf die Entwicklung das Fehlen von Cookies sein. Aufgrund anderer Funktionen wie der Speicherung verfügen Applets über ähnliche Verarbeitungsmethoden. Das Cookie bezieht sich auf die Hintergrundanmeldung in der Webentwicklung.
Das Applet enthält kein Cookie. Um mit der Anmeldeverwaltung der meisten Web-Apps kompatibel zu sein, werden Cookies verwendet. Wenn das Applet Anforderungen zum Senden hat, kann der Client das Cookie für den Header dynamisch festlegen, um die Nachricht an die Anforderung zu senden.
Beachten Sie, dass das Cookie selbst auf der Clientseite nicht gelesen und geschrieben werden kann.
Da es kein Cookie gibt, ist das CSRF-Problem in H5 theoretisch gelöst. Ob das Applet andere Client-Sicherheitsprobleme enthält, erfordert Technologie und Zeit, um ~ zu überprüfen
(2) Optimierung
Login:
In H5 wird der Code normalerweise durch URL-Umleitung durch WeChat-Autorisierung abgerufen. In dem kleinen Programm wird der Code über wx.login abgerufen, wodurch das Problem der vorherigen Anmeldeumleitung vermieden wird.
Lager:
Das Applet ersetzt Localstorage und Sessionstorage in H5 durch Storage. Die Speichergröße für jedes kleine Programm beträgt 10 MB und unterstützt synchron und asynchron.
Der WeChat-Zahlungspfad ist nicht mehr eingeschränkt
(3) Unannehmlichkeiten
1) Jede Seite muss manuell in app.json registriert werden. Wenn keine Registrierung erfolgt, wird die Seite nicht ausgeführt.
2) Die geöffneten Seiten unterliegen 5 Einschränkungen, und die Anzahl der geöffneten Seiten muss hauptsächlich während der Entwicklung gesteuert werden
wxss ：
wxss unterstützt keine Medienabfragen mehr
App Flex Layout hinzugefügt
Stellen Sie das Konzept von rpx vor
rpx (responsives Pixel): Kann je nach Bildschirmbreite adaptiv sein. Die Bildschirmbreite beträgt 750rpx. Auf dem iPhone6 beträgt die Bildschirmbreite beispielsweise 375 Pixel, und es gibt 750 physische Pixel, dann 750 Pixel = 375 Pixel = 750 physische Pixel und 1 Pixel = 0,5 Pixel = 1 physisches Pixel.
In wxss können keine Hintergrundbilder verwendet werden. Dies hängt mit der Entwurfsidee des Frameworks zusammen, dass alles eine Komponente ist
wxss Animation wird (derzeit) nicht unterstützt
Mehrschichtige Selektoren werden nicht unterstützt. ClassA {} - unterstützt; .classA .classB {} - nicht unterstützt (API-Anweisungen geben an, dass nur einschichtige Selektoren unterstützt werden, manchmal werden mehrere Schichten für Refactoring-Tests unterstützt).
Viertens Debuggen
Nach Abschluss der Entwicklung debuggen und überprüfen wir den Effekt, der der mobilen Entwicklung ähnelt, und fügen das Protokoll auf dem mobilen Terminal hinzu.
Debugging des Entwicklungstools:
Mobiler Client: Klicken Sie auf die obere rechte Ecke, um das Debuggen zu starten
V. Bau
Das Applet ist ein lokales Lademodul, das dem Knoten ähnlich ist. Sie müssen die Modulzusammenführung in seajs nicht berücksichtigen, sondern müssen nur uglify. Wenn Sie die ES6-Entwicklung verwenden, müssen Sie natürlich immer noch bebal sein.
6. Testumgebung
Der spezifische WeChat wird noch angepasst ...
Sieben, loslassen
Machen Sie im Entwicklungstool vollständige Übermittlungen und bestehen Sie die WeChat-Überprüfung vor der endgültigen Veröffentlichung auf der WeChat-Applet-Plattform. Das Veröffentlichen und Laden von Dateien erfolgt wie folgt:
Die gesamte Entwicklung und Veröffentlichung des kleinen Programms ist also vorbei
Persönliche Ansichten zu kleinen Programmprodukten:
Vorteile:
1. Download mit niedrigem Schwellenwert Als Teil von WeChat können Sie direkt über WeChat eingeben und es verwenden. Es kann fast als Webseite betrachtet werden und es gibt keinen Download-Schwellenwert.
2. Plattformübergreifendes WeChat-Client-Bottom-Paket, plattformübergreifende Unterstützung für kleine Programme
3. Niedrige Entwicklungskosten Im Vergleich zum vorherigen Entwicklungsvergleich ist die Entwicklung kleiner Programme niedriger als die Entwicklungskosten für Web-Apps sowie für die Speicherung, Freigabe und Wartung von Front-End-Ressourcen Alle sind in WeChat integriert (in Kombination mit der Tencent Cloud-Funktion ist es nur Lenovo ~~ Ha ha).
4. Die Seite imitiert das Original, die Erfahrung ist flüssiger.
5. Das Applet kann die Zahlungsfunktion von WeChat verwenden
Einschränkungen:
1. Die Entwicklung basiert auf dem WeChat-Framework, einige Funktionen sind eingeschränkt und andere vorhandene Plug-Ins von Drittanbietern werden nicht unterstützt.
2. Die Applet-Seite kann nur zur gleichen Zeit geöffnet werden. Wenn der Interaktionsprozess lang ist, ist die Unterstützung schwierig.
3. Die Applet-Größe ist auf beschränkt 1M (aktuell), alle nur für Leichtbau geeignet
Informationen zum spezifischen Inhalt der WeChat-Framework-API finden Sie unter
Es wird empfohlen, bei der Entwicklung kleiner Programme nicht an die Entwicklung von Web-Apps zu denken ~
Fazit
Seit August an der internen Testentwicklung des Projekts beteiligt, in der mehrere turbulente Anpassungen und ständige schmerzhafte Iterationen stattgefunden haben. Glücklicherweise waren das Framework und die Entwicklungswerkzeuge in der Regel perfekt und stabil. Ich freue mich auf das offizielle Erscheinen des Applets ~~
Für aufregendere Inhalte folgen Sie bitte dem öffentlichen WeChat-Konto von bugly :
Tencent Bugly ist ein Qualitätsüberwachungstool, das speziell für mobile Entwickler entwickelt wurde, um Entwicklern das schnelle und einfache Auffinden von Abstürzen und Lösungen von Online-Anwendungen zu erleichtern. Smart - Merge - Funktion, die Schüler entwickeln berichtet täglich Tausenden von Absturz wegen auf der Grundlage der Wurzel Einstufung der Fusion, Tageszeitung listet die Auswirkungen des Zusammenbruchs der größten Anzahl von Benutzern, die präzise Positionierung, die Schüler entwickeln Codezeilen das Problem, Echtzeit - Reporting kann zu lokalisieren Verstehen Sie nach der Veröffentlichung schnell die Qualität der Anwendung, passen Sie sich an das neueste offizielle iOS- und Android-Betriebssystem an. Die Ingenieure der Gänsefabrik verwenden es. Kommen Sie zu uns!
Dieser Artikel ist in Ape 2048 wiedergegeben: [Tencent Bugly Dry Goods Sharing] WeChat kleine Programmentwicklung, die Zusammenfassung zusammenfasst - Tencent-Projektpraxis "Kreditkartenrückzahlung"