Machen Sie sich mit dem Ursprung von Miniprogrammen vertraut

Wie WeChat-Miniprogramme aufgebaut sind, können Sie nach gründlichem Verständnis vielleicht ruhig erkennen. Alle Innovationen basieren auf Vorgängermodellen. React implementiert ein effizientes virtuelles DOM. Auf dieser Basis erstellt WeChat einen WeChat-Browser, eine kleine Programmlaufumgebung.

Zunächst benötigen Sie die folgenden Tools

1. WeChat Web Developer Tools.app

3 Ein Programmierer oder eine IDE sollte vorzugsweise das Umbenennen unterstützen.

Zuerst müssen wir mit der rechten Maustaste auf WeChat Web Developer Tools.app klicken und dann den Inhalt des Pakets

unter Contents/Resources/app anzeigen .nw Der folgende Inhalt ist unser Code, kopiert:

Eine kurze Erklärung:

app/ Der App-Code wird im Verzeichnis

modified_modules/ abgelegt, d. h. einige Änderungen Das letzte Modul

node_modules/ Jeder auf der Welt kennt

package.json Haha, Sie müssen wissen, dass NW-bezogene Inhalte konfiguriert sind

Es gibt zwei Dateien in den Modified_modules Verzeichnis-Submodul:

anyproxy, aus dem Namen ist ersichtlich, dass es sich um ein Proxy-Modul handelt

weinre, Remote-Debugging-Tool

IDE

Wir bereits wissen Dies ist eine von NodeWebkit gekapselte Webanwendung.

Das „main“: „app/html/index.html“ in package.json definiert, dass der Eingang dieser APP diese index.html ist, nicht andere Dateien.

Erfolgreich haben wir die Datei gesehen, die sie aufgerufen haben:

Es gibt eine Init-Methode darin, bei der es sich anscheinend um den Eintrag handelt, der sich auf NodeWebkit bezieht. Ich habe die Shift + f6RENAME-Variablen von WebStorm mehr als ein Dutzend Mal verwendet und schließlich den folgenden Code gesehen:

Dies ist eine React-Anwendung, die ich vor mehr als einem Jahr gut gelernt habe. Ich habe den Code gescannt und schließlich diesen Satz gesehen:

Springe direkt zu ContainController.js, springe zur Rendermethode und habe Folgendes gefunden:

Natürlich befindet sich der Haupteingang im Haupteingang

Die entsprechende Schnittstelle ist die folgende:

Bearbeiten ist der Editor und seine zugehörigen Angelegenheiten

Detail ist die Konfiguration des Projekts

Nur ​​um hinzuzufügen, unter ihnen Die Bearbeitungsumgebung basiert auf Monaco

WeAPP-Laufmechanismus

Ich habe den Verpackungs- und Laufzeitprozess langsam erkundet. Da ich mich nicht für die Closed Beta qualifiziert hatte, musste ich beim Zuschauen raten.

Im vorherigen Artikel haben wir zwei sehr interessante Dinge erwähnt: wxml und wxss. Diese beiden Dateien werden separat konvertiert, nämlich wxml -> html, wxss -> css. Es gibt mehrere entsprechende Transformationen:

transWxmlToJs

transWxssToCss

transConfigToPf

transWxmlToHtml

transManager

PF bezieht sich hier zu PageFrame, und pageFrame verfügt über eine entsprechende Vorlagendatei:

Dieser Stil generiert auf den ersten Blick die Zeichenfolge Ersetzen, und dann haben sie eine Datei mit dem Namen wcc und eine Datei mit dem Namen wcsc tools geschrieben.

1. wcc wird verwendet, um das benutzerdefinierte Tag in wxml in virtual_dom zu konvertieren

2. wcsc, das Phänomen, das ich beobachtet habe, ist, dass es wxss in css konvertiert

wie folgt Daher können wir verstehen, dass die WeChat-Minianwendung Virtual Dom + WebView ähnelt. Schließlich gibt es eine WAWebView-Datei und eine webviewSDK-Datei.

Natürlich ist es egal, ob es React + WebView oder Vue + WebView ist, jetzt gibt es WA + WebView, haha.

WeApp übernimmt die Übermittlungsmethode wie in der folgenden Abbildung gezeigt, also:

Die WeApp, die Sie lokal schreiben, wird an den WeChat-Server übermittelt, dann gepackt, auf den Server hochgeladen und übergeben an das CDN – schließlich zur Verteilung.

Der Upload-Prozess läuft ungefähr wie folgt ab:

1. Die APP wird in eine .wx-Datei mit dem Namen „Datum + .wx“ gepackt.

2 Erkennen Sie die Größe des Pakets und geben Sie Folgendes ein: Die Größe des Codepakets beträgt xx KB, was den Grenzwert von xx KB überschreitet. Bitte löschen Sie die Datei und versuchen Sie es erneut. Dieses xx scheint 1024 zu sein, daher beträgt die Größe der APP 1 MB.

3. Die APP wird auf servicewechat.com/wxa-dev/commitsource/?appid=xx&user-version=&user-desc=xx hochgeladen

Außerdem wird ab heute die öffentliches Konto " Die Möglichkeit, Miniprogramme zu verknüpfen, ist vollständig geöffnet

1. Das Thema der Verknüpfung von Miniprogrammen ist nicht mehr eingeschränkt

2. Jedes offizielle Konto kann mit bis zu 13 Miniprogrammen verknüpft werden

3. Das gleiche Miniprogramm kann mit bis zu 3 offiziellen Konten verknüpft werden

Einzelheiten finden Sie unter dem Link. Mehrfachentwässerung ist zulässig.

--

Das obige ist der detaillierte Inhalt vonMachen Sie sich mit dem Ursprung von Miniprogrammen vertraut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!