H5 Dooring Vue
1.0.0
H5-Dooring est une solution de configuration de page visuelle H5 puissante et gratuite, déterminée à fournir un ensemble de meilleures pratiques de page de destination H5 simples, pratiques, professionnelles et fiables qui sont faciles à utiliser, professionnelles et fiables et infiniment possibles. La pile technologique réagit principalement et l'arrière-plan est développé à l'aide de NodeJS.
Les contributions, les problèmes et les demandes de fonctionnalités sont les bienvenus!
N'hésitez pas à vérifier la page des problèmes.
Donnez un ️ si ce projet vous a aidé!
L'éditeur visuel se compose principalement des parties suivantes:
Nous pouvons utiliser React-DND et React-Draggable , qui est populaire dans la communauté.
Le second est la partie de l'éditeur H5, qui est la fonction principale, que nous analyserons en détail plus tard. Il existe également des fonctions telles que l'aperçu, la génération de liens d'aperçu, la sauvegarde des fichiers JSON et la sauvegarde des modèles. Jetons un coup d'œil à la démo de ces fonctionnalités:
Notre éditeur visuel H5 Page utilise UMI comme outil d'échafaudage.
UMI est un cadre d'application frontal de niveau d'entreprise évolutif, basé sur le routage, et prend en charge à la fois le routage configuré et le routage des congrès pour s'assurer que les fonctions de routage sont complètes et que l'expansion des fonctions est effectuée. Ensuite, il est équipé d'un système de plug-in avec un cycle de vie complet, couvrant chaque cycle de vie du code source pour créer des produits, en soutenant diverses exigences fonctionnelles et exigences commerciales.
De cette façon, nous ne prêterons pas attention aux détails de la configuration du projet.
// 创建并进入工程目录
mkdir dooring && cd dooring
// 创建umi应用
yarn create @ umijs / umi - app
// 安装依赖
yarn // 或者使用npm installUne stratégie simple en trois étapes peut facilement construire notre projet, ce qui économise beaucoup de problèmes ?
Une fois le projet créé, nous devons également installer les composants tiers nécessaires dans la visualisation.
Vous pouvez vous installer les composants ci-dessus avant d'exécuter le projet.
Après la meilleure préparation de développement de projet, nous commencerons à concevoir notre éditeur visuel de page H5 - Doresfing .
L'éditeur visuel H5 nécessite principalement 4 parties, qui ont été analysées au début de l'article.
Nous savons tous qu'il existe plusieurs solutions de visualisation des pages populaires:
L'auteur a fait un tableau de comparaison des avantages et des inconvénients, comme suit:
| plan | Diplôme de personnalisation | défaut |
|---|---|---|
| Modifier le code en ligne | Le plus élevé | Coût d'utilisation élevé, hostile au personnel non technique et à faible efficacité |
| Edit JSON en ligne | Plus haut | Besoin de connaître JSON, a un certain coût d'utilisation, n'est pas amical pour le personnel non technique et est généralement efficace |
| Pas d'implémentation de glisser-déposer de code | haut | Faible coût d'utilisation, fondamentalement aucun seuil de fonctionnement, grande efficacité |
Selon l'analyse ci-dessus, afin de développer un éditeur visuel qui est faible et adapté à toute personne, l'auteur adoptera la troisième solution pour la mettre en œuvre.
Afin de fournir les capacités de personnalisation des composants, nous devons définir un ensemble de structures de données hautement disponibles pour réaliser les avantages de maintenance provoqués par les modifications des exigences des composants.
Avant de commencer à concevoir la structure des données, discouliez d'abord le module: différents composants correspondent à différentes "zones d'édition".
Après l'analyse ci-dessus, l'auteur a conçu une structure de données similaire à ce qui suit:
"Text" : {
"editData" : [
{
"key" : "text" ,
"name" : "文字" ,
"type" : "Text"
} ,
{
"key" : "color" ,
"name" : "标题颜色" ,
"type" : "Color"
} ,
{
"key" : "fontSize" ,
"name" : "字体大小" ,
"type" : "Number"
} ,
{
"key" : "align" ,
"name" : "对齐方式" ,
"type" : "Select" ,
"range" : [
{
"key" : "left" ,
"text" : "左对齐"
} ,
{
"key" : "center" ,
"text" : "居中对齐"
} ,
{
"key" : "right" ,
"text" : "右对齐"
}
]
} ,
{
"key" : "lineHeight" ,
"name" : "行高" ,
"type" : "Number"
}
] ,
"config" : {
"text" : "我是文本" ,
"color" : "rgba(60,60,60,1)" ,
"fontSize" : 18 ,
"align" : "center" ,
"lineHeight" : 2
}
}Après cette conception structurelle standardisée, nous pouvons facilement implémenter les fonctions de la modification des pages, et l'expansion ultérieure est très pratique.
Créer une plate-forme de configuration de gestion de formulaire générale basée sur React (identique à Vue)
Un problème important dans la conception de la bibliothèque de composants est la taille et les problèmes de rendu.
import { dynamic } from 'umi' ;
export default dynamic ( {
loader : async function ( ) {
// 这里的注释 webpackChunkName 可以指导 webpack 将该组件 HugeA 以这个名字单独拆出去
const { default : HugeA } = await import ( /* webpackChunkName: "external_A" */ './HugeA' ) ;
return HugeA ;
} ,
} ) ;Grâce à la méthode ci-dessus, nous définissons chaque composant qui enveloppe chacun de nos composants, afin que nous puissions charger à la demande, mais la meilleure suggestion est que nous n'avons pas besoin de charger et de déballer chaque composant à la demande.
Ici, je vais vous donner un bref exemple d'implémentation des composants, ce qui est pratique pour tout le monde:
const Header = memo ( ( props ) => {
const {
bgColor ,
logo ,
logoText ,
fontSize ,
color
} = props
return < header className = { styles . header } style = { { backgroundColor : bgColor } } >
< div className = { styles . logo } >
< img src = { logo && logo [ 0 ] . url } alt = { logoText } />
</ div >
< div className = { styles . title } style = { { fontSize , color } } > { logoText } </ div >
</ header >
} )L'attribut d'accessoires du composant d'en-tête ci-dessus est complètement défini par la structure JSON que nous avons conçue auparavant. La dernière étape consiste à passer dynamiquement ces composants à des composants dynamiques .
La fonction d'aperçu est relativement simple.
Pour télécharger cela en ligne, nous devons utiliser une bibliothèque open source: Saverne de fichiers , qui résout spécifiquement le dilemme de difficulté dans les fichiers de téléchargement frontal.
var FileSaver = require ( 'file-saver' ) ;
var blob = new Blob ( [ "Hello, world!" ] , { type : "text/plain;charset=utf-8" } ) ;
FileSaver . saveAs ( blob , "hello world.txt" ) ;Le code ci-dessus peut télécharger les données entrantes dans un fichier TXT.
Étant donné que la partie backend implique beaucoup de points de connaissances et n'est pas au centre de cet article, je vais donner quelques points ici.
Pour un code spécifique, veuillez vous référer à un autre article complet de développement de pile.
Implémentez un projet CMS complet de 0 à 1 sur la base de NodeJS
Le motif est fondamentalement le même.
git clone https://github.com/MrXujiang/h5-Dooring.git cd ./h5-Dooringyarn installDémarrer la demande
yarn run startMise à niveau de la version 1.3, veuillez rester à l'écoute ...
