Les mini-programmes WeChat peuvent-ils utiliser vue.js ?

Les mini-programmes WeChat peuvent utiliser vue.js. mpvue est un framework frontal qui utilise [Vue.js] pour développer des mini-programmes WeChat. Grâce à ce framework, les développeurs bénéficieront d'un développement [Vue.js] complet. expérience, tout en offrant des capacités de réutilisation de code pour les programmes H5 et mini.

[Articles connexes recommandés : vue.js]

Les mini-programmes WeChat peuvent utiliser vue.js

mpvue est un framework frontal qui utilise Vue.js pour développer des mini-programmes WeChat. Grâce à ce framework, les développeurs bénéficieront d'une expérience complète de développement Vue.js, tout en offrant des capacités de réutilisation de code pour les programmes H5 et mini. Si vous souhaitez transformer un projet H5 en petit programme, ou si vous développez un petit programme et souhaitez le convertir en H5, mpvue sera une solution très adaptée.

Caractéristiques du développement de mini-programmes

Le mini-programme WeChat recommande une méthode de développement concise et complète les fonctions légères du produit grâce à une agrégation de plusieurs pages. Le mini-programme est téléchargé localement sous forme de package hors ligne, chargé et démarré via le client WeChat. Les spécifications de développement sont simples, la technologie est soigneusement encapsulée et il possède son propre système de développement. n'est jamais le même.

L'applet elle-même se positionne comme un simple cadre de couche de vue logique. Il n'est pas officiellement recommandé de développer des applications complexes, mais les exigences métier sont difficiles à simplifier. Les applications complexes ont des exigences plus élevées en matière de méthodes de développement, telles que les composants et la modularisation, la construction et l'intégration automatiques, la réutilisation du code et l'efficacité du développement, etc. Cependant, les petites spécifications de développement de programmes limitent considérablement ces capacités. Afin de résoudre les problèmes ci-dessus et d'offrir une meilleure expérience de développement, nous avons créé mpvue pour développer des applets WeChat à l'aide de Vue.js.

Qu'est-ce que mpvue

mpvue est un framework de développement front-end positionné pour développer de petits programmes. Son objectif principal est d'améliorer l'efficacité du développement et d'améliorer l'expérience de développement. En utilisant ce framework, les développeurs n'ont besoin que d'avoir une compréhension préliminaire des spécifications de développement de mini-programmes et de se familiariser avec la syntaxe de base de Vue.js pour commencer. Le framework offre une expérience complète de développement Vue.js. Les développeurs écrivent du code Vue.js, et mpvue l'analyse et le convertit en un petit programme et garantit qu'il fonctionne correctement. De plus, le framework fournit également aux développeurs un exemple de code de démarrage rapide via l'outil vue-cli. Les développeurs n'ont qu'à exécuter une commande simple pour obtenir un projet exécutable.

Pourquoi faire mpvue

Au début des tests internes du mini-programme, nous prévoyons d'itérer rapidement une implémentation de produit qui compare H5. Les principales exigences sont : mise en œuvre rapide, réutilisation du code, faible coût et haute efficacité... Ensuite, nous avons procédé à la construction de plusieurs mini-programmes en combinant scénarios commerciaux, sélection de technologies et méthodes de développement de mini-programmes, nous avons résolu les principaux problèmes rencontrés lors de la phase de développement :

• Le mécanisme de composantisation n'est pas assez parfait

• Manque de capacités de réutilisation de code multi-extrémités

• Le cadre du mini-programme et la pile technologique de l'équipe ne peuvent pas être organisés de manière organique. Combinés avec

• Le coût d'apprentissage du mini-programme n'est pas assez bas

Mécanisme des composants : La logique du mini-programme et le code de la couche de vue sont séparés les uns des autres. Les composants publics ne peuvent pas être regroupés dans une seule entrée de fichier après avoir été extraits. Les composants doivent être introduits respectivement dans la couche de vue et la couche logique. ce qui entraîne une mauvaise maintenabilité. Les composants n'ont pas de mécanisme d'espace de noms et les rappels d'événements doivent être définis comme des fonctions globales. La conception des composants présente un risque de conflits de noms et l'encapsulation des données n'est pas possible. Les développeurs ont besoin d'une méthode d'organisation du code conviviale, qui peut être importée en une seule fois via le module

ES et doit être bien encapsulée. Le mécanisme des composants matures est crucial pour le développement de l’ingénierie.

Réutilisation multi-terminaux : Il existe deux scénarios commerciaux courants, qui transforment les produits H5

existants en applications de mini-programmes ou vice versa. Du point de vue de l'efficacité, les développeurs espèrent terminer le développement en réutilisant le code, mais le cadre de développement de mini-programmes ne peut pas le faire. Nous avons essayé de convertir le code H5

en un petit programme via une analyse de code statique, mais nous n'avons fait que la conversion de la couche de vue et n'avons pas pu apporter plus d'avantages. La réutilisation du code multi-extrémité nécessite des solutions plus matures.

Présentation de Vue.js : La méthode de développement de mini-programmes est similaire à H5, nous envisageons donc la réutilisation de code avec H5. Suite à la sélection de la pile technologique par l'équipe, nous avons déterminé Vue.js comme spécification de développement de mini-programme. L'utilisation de Vue.js pour développer de petits programmes entraînera directement les améliorations d'efficacité de développement suivantes :

• Le code H5 peut être réutilisé dans de petits programmes avec des modifications minimes

• L'utilisation du mécanisme de composants Vue.js pour développer de petits programmes peut réaliser la réutilisation de petits programmes et de composants H5

• Une fois la pile technologique unifiée, le coût d'apprentissage des petits programmes est réduit et les développeurs passent du H5 aux petits programmes. Le programme ne nécessite pas plus d'apprentissage

• Le code Vue.js permet à tous les front-ends de participer directement au développement et à la maintenance

Pourquoi Vue.js ? Cela dépend de la sélection de la pile technologique par l'équipe.L'introduction de nouvelles sélections va à l'encontre de l'unification de la pile technologique et de l'amélioration de l'efficacité du développement, et va à l'encontre de l'intention initiale du secteur des services d'outils de développement.

L'évolution de mpvue

La création de mpvue est née de scénarios et de besoins commerciaux, et la solution finale est passée par trois étapes.

Phase 1 : Nous avons implémenté un outil de conversion de code de couche de vue conçu pour améliorer l'efficacité du développement de code initial. Réalisez un développement secondaire sur ce code cible en convertissant le code de la couche de vue H5 en code d'applet, y compris le mappage de balises HTML, le modèle Vue.js et la conversion de style. Nous sommes parvenus à une réutilisation limitée du code, mais le coût du développement des composants et de l'apprentissage des petits programmes n'a pas été efficacement amélioré.

La deuxième phase : Nous nous concentrons sur l'amélioration du mécanisme de composantisation du code. Le formulaire d'organisation du code a été conçu en référence à la spécification du composant Vue.js

, et le code a été analysé en petits programmes via l'outil de conversion de code. L'outil de conversion résout principalement les problèmes de synchronisation des données, d'association de cycle de vie et d'espace de noms entre les composants. Au final, nous avons implémenté un sous-ensemble

de la syntaxe Vue.js, mais si nous voulons implémenter plus de fonctionnalités ou suivre les itérations de la version Vue.js, la charge de travail devient difficile à estimer et semble interminable.

La troisième étape : Notre objectif est de prendre en charge l'ensemble complet de la syntaxe Vue.js et d'atteindre l'objectif d'utiliser Vue.js

pour développer de petits programmes. Et en introduisant le runtime Vue.js, il prend en charge la syntaxe Vue.js, évitant ainsi l'adaptation de la syntaxe humaine. À ce stade, nous avons atteint l'objectif de développer de petits programmes utilisant

Vue.js. Les objectifs d'unification des piles technologiques, de développement basé sur les composants, de réutilisation du code multi-extrémités, de réduction des coûts d'apprentissage et d'amélioration de l'efficacité du développement ont été mieux atteints.

Recommandations d'apprentissage gratuites associées : javascript (vidéo), Tutoriel de développement d'applets WeChat

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!