Vous faire comprendre l'origine des mini programmes

Comment les mini-programmes WeChat sont structurés, après une compréhension approfondie, vous pouvez vous en rendre compte tranquillement. Toutes les innovations sont basées sur leurs prédécesseurs. React implémente un DOM virtuel efficace Sur cette base, WeChat construit un navigateur WeChat, qui est un petit environnement d'exécution de programme.

Tout d'abord, vous avez besoin des outils suivants

1. Ordinateur Mac

2. Outils de développement Web WeChat.app

3. Un programmeur ou un IDE devrait de préférence prendre en charge le renommage

Tout d'abord, nous devons cliquer avec le bouton droit sur WeChat Web Developer Tools.app, puis afficher le contenu du package,

dans Contenu/Ressources/application .nw Le contenu suivant est notre code, copié :

Une brève explication :

app/ Le code de l'application est placé dans le répertoire

modified_modules/, c'est-à-dire, quelques modifications Le dernier module

node_modules/ Tout le monde sur terre connaît

package.json Haha, il faut savoir que le contenu lié à NW est configuré

Il y a deux fichiers dans les modules_modifiés Sous-module d'annuaire :

anyproxy, d'après le nom, on peut voir qu'il s'agit d'un module proxy

weinre, outil de débogage à distance

IDE

Nous avons déjà savoir Il s'agit d'une application Web encapsulée par NodeWebkit.

Le "main": "app/html/index.html" dans package.json définit que l'entrée de cette APP est cet index.html, pas d'autres fichiers.

Avec succès, nous avons vu le fichier qu'ils ont appelé :

Il contient une méthode init, qui semble être l'entrée liée à NodeWebkit. J'ai utilisé les variables shift + f6RENAME de WebStorm plus d'une douzaine de fois, et j'ai finalement vu le code suivant :

Il s'agit d'une application React Heureusement, je l'ai bien appris il y a plus d'un an. J'ai scanné le code et j'ai finalement vu cette phrase :

Accédez directement à ContainController.js, passez à la méthode de rendu et j'ai trouvé ceci :

Effectivement, il y a la grande entrée à l'intérieur de Main

L'interface correspondante est la suivante :

edit est l'éditeur et ses sujets associés

le détail est la configuration du projet

Juste pour ajouter, parmi eux L'environnement d'édition est basé sur Monaco

Mécanisme d'exécution WeAPP

J'ai lentement exploré le processus d'empaquetage et d'exécution. Comme je ne m'étais pas qualifié pour la bêta fermée, j'ai dû deviner en regardant.

Dans l'article précédent, nous avons évoqué deux choses très intéressantes : wxml et wxss Ces deux fichiers seront convertis séparément, à savoir wxml -> html, wxss -> css. Il existe plusieurs transformations correspondantes :

transWxmlToJs

transWxssToCss

transConfigToPf

transWxmlToHtml

transManager

PF fait ici référence à PageFrame, et pageFrame a un fichier modèle correspondant :

Ce style génère la chaîne Remplacer au premier coup d'œil, puis ils ont écrit un fichier nommé wcc et un fichier nommé wcsc tools.

1. wcc est utilisé pour convertir la balise personnalisée dans wxml en virtual_dom

2, le phénomène que j'ai observé est qu'il convertit wxss en css

comme ceci. nous pouvons donc comprendre que l'applet WeChat est quelque peu similaire à Virtual Dom + WebView. Après tout, il contient un fichier WAWebView et un fichier webviewSDK.

Bien sûr, peu importe que ce soit React + WebView ou Vue + WebView, maintenant il y a WA + WebView, haha.

WeApp adopte la méthode de soumission comme indiqué dans la figure ci-dessous, donc :

La WeApp que vous écrivez localement sera soumise au serveur WeChat, puis emballée, téléchargée sur le serveur et remise au CDN — — pour distribution, après tout.

Le processus de téléchargement est à peu près le suivant :

1. L'application sera emballée dans un fichier .wx nommé avec la date + le fichier .wx

2. détectez la taille du package et affichez l'invite : La taille du package de code est de xx Ko, ce qui dépasse la limite de xx Ko. Veuillez supprimer le fichier et réessayer. Ce xx semble être 1024, donc la taille de l'APP est de 1 M.

3. L'application sera téléchargée sur servicewechat.com/wxa-dev/commitsource/?appid=xx&user-version=&user-desc=xx

De plus, à partir d'aujourd'hui, le compte public " La possibilité d'"associer des mini programmes" est entièrement ouverte

1. Le sujet de l'association de mini programmes n'est plus restreint

2. Chaque compte officiel peut être associé à jusqu'à 13 mini programmes

3. Un même mini programme peut être associé à jusqu'à 3 comptes publics

Voir le lien pour plus de détails En un mot, c'est plus ouvert. Des drainages multiples sont autorisés.

--

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!