H5 Dooring Vue
1.0.0
H5-Dooring ist eine leistungsstarke, open Source- und kostenlose H5-Konfigurationslösung, die sich für eine Reihe einfacher, bequemer, professioneller und zuverlässiger Best Practices für die H5-Landingpage bereitstellen lässt, die einfach zu bedienen sind, professionell und zuverlässig und unendlich möglich sind. Der Technologiestapel wird hauptsächlich reagiert und der Hintergrund wird unter Verwendung von NodeJS entwickelt.
Beiträge, Probleme und Feature -Anfragen sind willkommen!
Fühlen Sie sich frei, Probleme mit der Seite zu überprüfen.
Geben Sie ein ️, wenn dieses Projekt Ihnen geholfen hat!
Der visuelle Redakteur besteht hauptsächlich aus den folgenden Teilen:
Wir können React-Dnd und React-Draggable verwenden, was in der Community beliebt ist.
Der zweite ist der H5 -Editor -Teil, der die Kernfunktion ist, die wir später ausführlich analysieren werden. Es gibt auch Funktionen wie Vorschau, Vorschau -Links, Speichern von JSON -Dateien und Speichern von Vorlagen. Schauen wir uns die Demo dieser Funktionen an:
Unser visueller Editor von H5 Page verwendet UMI als Gerüst -Tool.
UMI ist ein skalierbares Front-End-Anwendungsframework auf Unternehmensebene, das auf Routing basiert, und unterstützt sowohl konfigurierte Routing- als auch Kongressrouting, um sicherzustellen, dass die Routing-Funktionen vollständig und die Funktionserweiterung durchgeführt werden. Anschließend ist es mit einem Plug-in-System mit einem vollständigen Lebenszyklus ausgestattet, der jeden Lebenszyklus vom Quellcode zum Erstellen von Produkten abdeckt und verschiedene funktionale Erweiterungen und Geschäftsanforderungen unterstützt.
Auf diese Weise werden wir nicht auf die umständlichen Projektkonfigurationsdetails achten.
// 创建并进入工程目录
mkdir dooring && cd dooring
// 创建umi应用
yarn create @ umijs / umi - app
// 安装依赖
yarn // 或者使用npm installEine einfache dreistufige Strategie kann unser Projekt problemlos erstellen. Er spart viel Ärger?
Nachdem das Projekt erstellt wurde, müssen wir auch die erforderlichen Komponenten von Drittanbietern in der Visualisierung installieren.
Sie können die oben genannten Komponenten selbst installieren, bevor Sie das Projekt ausführen.
Nach der besten Projektentwicklung werden wir unseren visuellen Editor der H5 -Seite - DOORY - entwickeln.
Der visuelle Editor H5 benötigt hauptsächlich 4 Teile, die zu Beginn des Artikels analysiert wurden.
Wir alle wissen, dass es mehrere beliebte Seitenvisualisierungslösungen gibt:
Der Autor machte wie folgt ein Vergleichsdiagramm von Vorstellungen und Nachteilen:
| planen | Anpassungsabschluss | Mangel |
|---|---|---|
| Code online bearbeiten | Höchste | Hohe Nutzungskosten, unfreundlich gegenüber nicht-technischem Personal und geringe Effizienz |
| JSON online bearbeiten | Höher | Ich muss mit JSON vertraut sein, haben bestimmte Gebrauchskosten, sind nicht freundlich gegenüber nicht-technischem Personal und im Allgemeinen effizient |
| Kein Code -Drag & Drop -Implementierung | hoch | Niedrige Nutzungskosten, im Grunde kein Schwellenwert für den Betrieb, hohe Effizienz |
Nach der obigen Analyse, um einen visuellen Editor zu entwickeln, der für alle Personen geeignet ist, wird der Autor die dritte Lösung für die Implementierung annehmen .
Um die Anpassungsfunktionen von Komponenten bereitzustellen, müssen wir eine Reihe von hoch verfügbaren Datenstrukturen definieren, um die Wartungsvorteile durch Änderungen der Komponentenanforderungen zu erzielen.
Bevor wir die Datenstruktur entwerfen, werden wir zunächst das Modul abbauen: Verschiedene Komponenten entsprechen verschiedenen "Bearbeitungsbereichen".
Nach der obigen Analyse hat der Autor eine Datenstruktur entworfen, die der folgenden ähnlich ist:
"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
}
}Nach diesem standardisierten strukturellen Design können wir die Funktionen von uns benötigen, und die spätere Erweiterung ist sehr bequem.
Erstellen Sie eine allgemeine Form Management -Konfigurationsplattform basierend auf React (gleich wie VUE)
Ein wichtiges Problem in der Konstruktion der Komponentenbibliothek ist die Größe und das Rendern von Problemen.
import { dynamic } from 'umi' ;
export default dynamic ( {
loader : async function ( ) {
// 这里的注释 webpackChunkName 可以指导 webpack 将该组件 HugeA 以这个名字单独拆出去
const { default : HugeA } = await import ( /* webpackChunkName: "external_A" */ './HugeA' ) ;
return HugeA ;
} ,
} ) ;Durch die obige Methode definieren wir jede Komponente, die jede unserer Komponenten umhüllt, sodass wir auf Bedarf auf Anfrage nicht laden und auspacken müssen, für den Titel , die Benachrichtigungsleiste , die Kopfzeile und die Fußzeilekomponenten , sondern auch die Ladegeschwindigkeit, sondern auch die Anfragen auf die Ladegeschwindigkeit auswirken.
Hier werde ich Ihnen ein kurzes Beispiel für die Implementierung von Komponenten geben, was für alle zu verstehen ist:
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 >
} )Das Requisitenmerkmal der oben genannten Header -Komponente ist vollständig durch die zuvor entworfene JSON -Struktur definiert. Der letzte Schritt besteht darin, diese Komponenten dynamisch an dynamische Komponenten zu übergeben.
Die Vorschau-Funktion ist relativ einfach.
Um dies online herunterzuladen, müssen wir eine Open-Source-Bibliothek verwenden: Dateispeicher , die das Dilemma der Schwierigkeitsgröße in Front-End-Download-Dateien spezifisch löst.
var FileSaver = require ( 'file-saver' ) ;
var blob = new Blob ( [ "Hello, world!" ] , { type : "text/plain;charset=utf-8" } ) ;
FileSaver . saveAs ( blob , "hello world.txt" ) ;Der obige Code kann die eingehenden Daten in eine TXT -Datei herunterladen.
Da der Backend -Teil viele Wissenspunkte beinhaltet und nicht der Schwerpunkt dieses Artikels ist, werden Sie hier einige Punkte angeben, um Backend -Dienste wie PHP , Java , Python oder Ei zu implementieren, die KOA verwenden.
Informationen zu einem bestimmten Code finden Sie in einem weiteren Artikel mit vollem Stapelentwicklung von mir.
Implementieren Sie ein CMS-Full-Stack-Projekt von 0 bis 1 basierend auf NodeJs
Das Muster ist im Grunde das gleiche.
git clone https://github.com/MrXujiang/h5-Dooring.git cd ./h5-Dooringyarn installStarten Sie die Anwendung
yarn run startUpgrade Version 1.3, bitte bleiben Sie dran ...
