Analyser les principes sous-jacents des mini-programmes WeChat

Il existe trois méthodes principales de rendu de page

Recommandé : "Tutoriel de développement de mini-programmes"

1.Rendu web

2.Rendu natif

3.Web et Natif sont mixtes, c'est-à-dire un rendu hybride.

Le mini programme est présenté sous la troisième forme.

Méthode de communication à double thread

Pourquoi avons-nous besoin du double thread ? -> Pour la sécurité du contrôle, évitez d’utiliser DOM.

La couche de rendu et la couche logique de l'applet sont gérées respectivement par deux threads : l'interface de la couche de rendu utilise WebView pour le rendu, et la couche logique utilise les threads JsCore pour exécuter des scripts JS.

Le cadre de l'applet WeChat se compose de deux parties : la couche de vue et la couche logique de service APP. La couche

view est utilisée pour restituer la structure de la page, et

AppService est utilisée pour le traitement logique, les demandes de données et les appels d'interface.

Exécuter en deux processus (deux vues Web).

La couche vue et la couche logique communiquent via le JSBridage de la couche système.

Couche logique : créez un thread séparé pour exécuter JavaScript. Dans cet environnement, tout le code lié à la logique métier du mini-programme est exécuté.

Couche de rendu : toutes les tâches liées au rendu de l'interface sont exécutées. dans webView Exécuté dans un thread, le code de la couche logique contrôle quelles interfaces sont rendues.

Un petit programme a plusieurs interfaces, il y a donc plusieurs threads d'affichage Web dans la couche de rendu.

La communication entre la couche logique et la couche de rendu sera relayée par Native (client WeChat).

Les requêtes réseau envoyées par la couche logique seront également transmises par Native.

évaluer Javascript

La transmission de données entre la couche de vue et la couche logique est en fait implémentée via l'évaluationJavascript fourni par les deux parties. Autrement dit, les données transmises par l'utilisateur doivent être converties en chaîne et transmises. En même temps, le contenu des données converties est fusionné dans un script JS, puis transmis aux environnements indépendants des deux côtés. forme d'un script JS.

Étant donné que l'exécution d'evaluJavascript sera affectée par de nombreux aspects, les données arrivant à la couche de vue ne sont pas en temps réel. Notre fonction setData envoie les données de la couche logique à la couche vue de manière asynchrone.

Solution de liaison de données de modèle

1. Analyser la grammaire pour générer AST

2 Générer un DOM basé sur le résultat AST

3. liaison au modèle

Arbre de syntaxe abstraite (en abrégé AST)

Le troisième point le plus susceptible de causer des problèmes de performances est principalement le troisième point Quant à la solution de mise à jour des données, réagissez d'abord. virtuel proposé La conception du DOM est désormais essentiellement absorbée par la plupart des frameworks, et les mini-programmes ne font pas exception.

Mécanisme DOM virtuel Dom virtuel

Utiliser des objets JS pour simuler des arbres DOM-> Comparez deux arbres DOM-> Sur l'arborescence DOM

1. Convertissez WXML en objet JS correspondant dans la couche de rendu

2 Lorsque des modifications de données se produisent dans la couche logique, utilisez la méthode setData fournie par l'environnement hôte pour. supprimer les données de la logique La couche est transmise à Native, puis transmise à la couche de rendu

3 Après avoir comparé les différences avant et après, appliquez les différences à l'arborescence DOM d'origine et mettez à jour l'interface <.>

Bibliothèque de base du mini programme

La bibliothèque de base de l'applet est écrite en JavaScript, qui peut être injectée dans la couche de rendu et la couche logique pour s'exécuter. Principalement utilisé pour :

Dans la couche de rendu, il fournit divers composants pour assembler les éléments de la page

Dans la couche logique, il fournit diverses API pour traiter divers éléments.

Traite une série de logiques de structure telles que la liaison de données, le système de composants, le système d'événements, le système de communication, etc.

La couche de rendu et la couche logique de l'applet sont gérées par deux threads, et chaque thread injecte la bibliothèque Basic.

La bibliothèque de base du mini programme ne sera pas empaquetée dans le code du mini programme, elle sera intégrée au client WeChat à l'avance. De cette façon :

Réduire la taille du package de code de l'applet métier

Vous pouvez corriger les bugs de la bibliothèque de base de manière indépendante sans modifier le package de code de l'applet métier

Exparser

Exparser est le cadre d'organisation des composants du mini-programme WeChat. Il est intégré à la bibliothèque de base du mini-programme et fournit une prise en charge de base pour divers composants du mini-programme. Tous les composants du mini programme, y compris les composants intégrés et les composants personnalisés, sont organisés et gérés par Exparser.

Mécanisme de rendu à double thread

Le rendu à double thread est en fait une combinaison de la série précédente de mécanismes.

1. Grâce à la liaison de données de modèle et au mécanisme DOM virtuel, l'applet fournit au DSL une syntaxe de liaison de données et une couche de rendu pour décrire la structure de la page.

<view> {{ message }} </view> <view wx:if="{{condition}}"> </view> <checkbox checked="{{false}}"> </checkbox>

2. L'applet fournit une API pour définir les données de page dans la couche logique

this.setData({
key : value
});

3 Lorsque la couche logique doit changer de page, il lui suffit de transmettre les données modifiées. la couche de rendu via setData.

Les données transmises seront converties sous forme de chaîne pour la transmission, vous devez donc éviter de transmettre de grandes quantités de données.

4. La couche de rendu régénérera l'arborescence DOM virtuelle selon le mécanisme de rendu et la mettra à jour avec l'arborescence DOM correspondante, provoquant des changements d'interface.

• Introduire des composants natifs

• Contourner le processus setData, la communication des données et le re-rendu pour améliorer les performances de rendu.

• Étendez les capacités du Web. Par exemple, les composants de la zone de saisie (saisie, zone de texte) ont la capacité de mieux contrôler le clavier.

• Meilleure expérience, tout en réduisant également le travail de rendu de WebView. Par exemple, le travail de rendu de composants plus complexes tels que les composants cartographiques n'occupe pas le thread WebView, mais est confié au client le plus efficace pour un traitement natif.

Processus de rendu des composants natifs :

• Le composant est créé et les propriétés du composant se voient attribuer des valeurs dans l'ordre.

• Le composant est inséré dans l'arborescence DOM, et le noyau du navigateur calculera immédiatement la disposition. À ce moment, nous pouvons lire la position (coordonnées x, y), la largeur et la hauteur. du composant par rapport à la page. Le composant

• informe le client que le client insère une zone native à la même position en fonction de la largeur et de la hauteur, puis le client restitue l'interface dans cette zone.

• Lorsque la position ou la largeur et la hauteur changent, le composant informera le client pour effectuer les ajustements correspondants.

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!