Merveilleux dans le passé
Un éditeur visuel pour les pages h5 basé sur React + Koa-Dooring
Résumé des points de connaissances de base TS et analyse des cas de projets réels
Préface
Le concept de conception WYSIWYG a toujours été une caractéristique de premier plan dans le domaine de WEB IDE, et il peut également améliorer considérablement l'expérience de programmation et l'efficacité de la programmation du codeur Web. Ensuite, l'auteur aura un aperçu en temps réel de l'éditeur visuel H5 et La fonction de prévisualisation du code de scan de la machine réelle effectue une analyse de plan et fournit des idées à chacun lors de la conception de produits similaires.
Nous utilisons toujours l'éditeur visuel H5-Dooring développé par l'auteur comme un cas pour analyser l'implémentation des fonctions ci-dessus.
Vous gagnerez
Scénarios d'application de prévisualisation en temps réel et cas réels
Schéma de liaison en temps réel de l'élément de canevas et de l'éditeur d'attributs
Idée générale de l'aperçu en temps réel
Réalisation d'idées de prévisualisation du code de scan de machine réelle
Solution de prévisualisation en temps réel avec haute disponibilité basée sur la couche intermédiaire de nodejs
texte
Dans des circonstances normales, la fonction de prévisualisation en temps réel sera transférée au front-end pour réaliser, comme l'aperçu des outils de développement WeChat que nous voyons souvent, l'aperçu de l'applet Alipay, le plug-in de prévisualisation de vscode, le DW plus classique intègre également une puissante fonction de prévisualisation en temps réel , Ensuite, nous examinons un module de prévisualisation en temps réel de la programmation en ligne H5-Dooring:
Dans la plate-forme de visualisation de page H5, nous espérons également voir l'effet de notre page de configuration en temps réel, comme la modification d'une certaine propriété, qui peut prendre effet en temps réel dans le canevas, et peut également afficher l'effet réel de la machine sur le téléphone mobile, en fournissant ce temps réel La fonction d'aperçu est sans aucun doute juste nécessaire pour la plate-forme de configuration visuelle. Les cas suivants:
Simulez l'aperçu du téléphone mobile sur PC:
Entrée et effet de prévisualisation de la machine réelle:
Par conséquent, la clé de notre conception de l'aperçu en temps réel est de savoir comment restaurer la configuration de l'utilisateur dans le canevas avec une haute fidélité, afin que l'erreur et l'expérience puissent être maximisées.
Ensuite, l'auteur présentera spécifiquement comment implémenter les méthodes de prévisualisation ci-dessus et comment concevoir un programme de prévisualisation hautement disponible.
1. Schéma de liaison en temps réel de l’élément de canevas et de l’éditeur d’attributs
Le schéma de liaison en temps réel de l'élément de canevas et de l'éditeur d'attributs se réfère principalement à la façon dont la modification de l'éditeur d'attributs est synchronisée avec l'élément de canevas en temps réel, résumé comme le concept suivant:
Afin de se rendre compte que l'éditeur de propriétés à droite a modifié le contenu et que le canevas peut être mis à jour en temps réel, nous devons implémenter un mode pour associer les côtés gauche et droit, qui est le concept de «lien». Nous savons tous que chaque composant visuel a Correspondant à un schéma unique (il a été introduit dans l'article H5-Dooring, les amis intéressés peuvent apprendre à comprendre), la structure du schéma est similaire à la suivante:
{
"config": {
"color": "#fff",
"name": "徐小夕"
},
"editData": [
{
"type": "Text",
"key": "name"
},
{
"type": "Color",
"key": "color"
}
]
}
复制代码
Une fois qu'une telle structure de données est conçue, nous pouvons rendre dynamiquement le formulaire de l'éditeur (via editData), et synchroniser la valeur modifiée avec le composant (via editData -> config mapping).
Deuxièmement, nous devons définir la source de données partagée. Nous pouvons utiliser vuex (par exemple, vous êtes la pile technologique vue) ou dva (si vous êtes la pile technologique react). Les idées générales de conception sont les suivantes:
Il s'agit essentiellement de déclencher l'action dans l'éditeur de propriétés, de modifier la configuration du composant correspondant, puis de mettre à jour le contenu du canevas. PointData est l'ensemble de données du composant sur le canevas, qui est utilisé pour afficher les éléments d'édition de la page H5 et de l'éditeur de propriétés de rendu dynamique. Plus tard, nous La fonction d'aperçu introduite dépend également des données fournies par pointData.
2. Idée générale de l'aperçu en temps réel
Dans l'article précédent de l'auteur, j'ai expliqué en détail comment implémenter l'aperçu en temps réel de l'EDI Web, c'est-à-dire la méthode nodejs + iframe, mais pour notre éditeur visuel de porte H5, une autre méthode peut être nécessaire, c'est-à-dire que l'utilisateur est dans Lorsque vous avez besoin d'un aperçu, vous pouvez simuler manuellement un aperçu de l'appareil réel ou un aperçu de l'appareil réel. Ici, nous fournissons généralement un bouton d'aperçu dans l'interface de l'éditeur. Lorsque l'utilisateur clique, il peut accéder à la vue d'aperçu, comme suit:
Sur la base du schéma json que nous avons mentionné précédemment comme source de données pour l'aperçu, nous pouvons facilement envisager de restituer une page H5 via la source de données sur la page d'aperçu. L'idée est la suivante:
Si la page d'aperçu est une nouvelle page, telle que la mise en œuvre de H5-Dooring, cette source de données doit être stockée dans localStorage avant la prévisualisation. En raison des caractéristiques de localStorage, nous pouvons partager des données entre les pages du même domaine, il est donc très pratique de mettre en œuvre notre Exigences. En ce qui concerne la partie moteur de rendu, nous n'avons besoin que de la solution de fourniture de données fournie par react-grid-layout. Le code est le suivant:
<GridLayout
className={styles.layout}
cols={24}
rowHeight={2}
width={vw > 800 ? 375 : vw}
margin={[0, 0]}
>
{pointData.map((value: PointDataItem) => (
<div className={styles.dragItem} key={value.id} data-grid={value.point}>
<DynamicEngine {...(value.item as any)} />
</div>
))}
</GridLayout>
复制代码
En ce qui concerne l'implémentation de DynamicEngine, vous pouvez voir le code source H5-Dooring de l'auteur pour comprendre le processus d'implémentation spécifique. Cependant, il y aura quelques problèmes dans la solution de l'utilisation de localstorage seul, qui seront expliqués en détail dans les chapitres suivants.
3. Idées de réalisation pour un aperçu du code de scan de l'appareil réel
Le schéma de réalisation de l'aperçu du code d'analyse de la machine réelle, l'auteur résume brièvement comme le montre la figure ci-dessous:
La raison pour laquelle le service nodejs est utilisé dans le processus ci-dessus est que le téléphone mobile doit être associé à la configuration du PC pour réaliser l'aperçu de la machine réelle. Cette association peut se faire via le paramètre url, ou le paramètre url + mode de requête, ici car les données de configuration sont relativement volumineuses , Donc, ce dernier est adopté. Le paramètre url est utilisé pour localiser le chemin de la ressource, puis des données spécifiques sont demandées en fonction des paramètres du projet maître H5 pour présenter la page. C'est également la solution de prévisualisation en machine réelle courante. Nous pouvons utiliser qrcode pour générer dynamiquement Code QR, la forme du code QR est la suivante:
const url = `${window.location.protocol}//${window.location.host}/h5_plus/preview?tid=${tid}`
复制代码
Quant à l'utilisation de nodejs pour renvoyer des fichiers avec des paramètres spécifiés, c'est relativement simple, et je ne les implémenterai pas un par un ici, mais nous devons comprendre le processus d'implémentation de l'aperçu de la machine réelle ci-dessus.
4. Réalisez une solution de prévisualisation en temps réel hautement disponible basée sur la couche intermédiaire nodejs
Il y a quelques lacunes dans la solution que l'auteur a écrite auparavant pour réaliser le partage de données de prévisualisation via localStroage.Par exemple, l'utilisateur A souhaite partager la page H5 configurée par H5-Dooring avec l'utilisateur B.Comme elle existe sur deux ordinateurs différents, l'utilisateur B Il est impossible d'obtenir les données de prévisualisation, et donc ne peut pas afficher la page H5 configurée par d'autres. Il existe également une situation où l'utilisateur a activé le mode navigation privée du navigateur, de sorte que la page de prévisualisation peut ne pas être en mesure de prévisualiser, donc pour ces deux scénarios, nous devons Certaines optimisations ont été apportées pour rendre notre aperçu en temps réel plus utilisable.
Alors, comment pouvons-nous accéder à notre page de configuration même lorsque l'utilisateur ne peut pas utiliser localStroage normalement? La réponse est via la demande d'API. Nous utilisons à nouveau nodejs pour stocker les données de configuration de l'utilisateur et juger si localStroage peut obtenir les données pendant l'aperçu , Ensuite, utilisez directement les données localStroage, si elles ne sont pas disponibles, accédez directement à la requête api. La logique est à peu près la suivante:
Bien que l'implémentation ci-dessus soit simple, la convivialité et l'expérience de l'aperçu peuvent être fournies par l'optimisation comme ci-dessus, et vous pouvez vous y référer lors de la conception des fonctions du produit.
5. Résumé
L'auteur du tutoriel ci-dessus a été intégré à H5-Dooring. Pour certaines fonctions interactives plus complexes, il peut également être réalisé grâce à une conception raisonnable. Vous pouvez explorer et étudier par vous-même.
github ???? ： h5-Porte
Enfin
Si vous souhaitez en savoir plus sur les jeux H5, Webpack, node, gulp, css3, javascript, nodeJS, visualisation de données de canevas et autres connaissances frontales et combat réel, n'hésitez pas à étudier et discuter ensemble dans "Intéressant Frontend" pour explorer ensemble la frontière frontale.
Zone de commentaire