H5 Dooring Vue
1.0.0
H5-Dooring adalah solusi konfigurasi halaman visual H5 yang kuat, open source, dan gratis, berkomitmen untuk menyediakan serangkaian praktik terbaik halaman arahan H5 yang sederhana, nyaman, profesional, dan andal yang mudah digunakan, profesional dan andal, dan mungkin. Tumpukan teknologi terutama bereaksi, dan latar belakang dikembangkan menggunakan nodeJs.
Kontribusi, masalah, dan permintaan fitur dipersilakan!
Jangan ragu untuk memeriksa halaman masalah.
Berikan ️ jika proyek ini membantu Anda!
Editor visual terutama terdiri dari bagian -bagian berikut:
Kami dapat menggunakan React-DND dan React-Draggable , yang populer di komunitas.
Yang kedua adalah bagian editor H5, yang merupakan fungsi inti, yang akan kami analisis secara rinci nanti. Ada juga fungsi -fungsi seperti pratinjau, menghasilkan tautan pratinjau, menyimpan file JSON , dan menghemat template . Mari kita lihat demo fitur -fitur ini:
Editor Visual Halaman H5 kami menggunakan UMI sebagai alat perancah.
UMI adalah kerangka kerja aplikasi front-end tingkat perusahaan yang dapat diskalakan, berdasarkan routing, dan mendukung routing yang dikonfigurasi dan routing konvensi untuk memastikan bahwa fungsi perutean lengkap dan ekspansi fungsi dilakukan. Kemudian dilengkapi dengan sistem plug-in dengan siklus hidup yang lengkap, mencakup setiap siklus hidup dari kode sumber untuk membangun produk, mendukung berbagai ekspansi fungsional dan persyaratan bisnis.
Dengan cara ini , kami tidak akan memperhatikan detail konfigurasi proyek yang rumit .
// 创建并进入工程目录
mkdir dooring && cd dooring
// 创建umi应用
yarn create @ umijs / umi - app
// 安装依赖
yarn // 或者使用npm installStrategi tiga langkah sederhana dapat dengan mudah membangun proyek kami, apakah itu menyimpan banyak masalah ?
Setelah proyek dibuat, kita juga perlu menginstal komponen pihak ketiga yang diperlukan dalam visualisasi.
Anda dapat menginstal sendiri komponen di atas sebelum menjalankan proyek.
Setelah persiapan pengembangan proyek terbaik, kami akan mulai merancang editor visual halaman H5 kami - pintu .
Editor visual H5 terutama membutuhkan 4 bagian, yang telah dianalisis pada awal artikel.
Kita semua tahu bahwa ada beberapa solusi visualisasi halaman populer:
Penulis membuat bagan perbandingan keunggulan dan kekurangan, sebagai berikut:
| rencana | Gelar Kustomisasi | kekurangan |
|---|---|---|
| Edit kode online | Paling tinggi | Biaya penggunaan yang tinggi, tidak ramah terhadap personel non-teknis, dan efisiensi rendah |
| Edit json online | Lebih tinggi | Perlu terbiasa dengan JSON, memiliki biaya penggunaan tertentu, tidak ramah kepada personel non-teknis, dan umumnya efisien |
| Tidak ada kode seret dan lepas implementasi | tinggi | Biaya penggunaan yang rendah, pada dasarnya tidak ada ambang batas untuk operasi, efisiensi tinggi |
Menurut analisis di atas, untuk mengembangkan editor visual yang beruban rendah dan cocok untuk siapa pun, penulis akan mengadopsi solusi ketiga untuk mengimplementasikannya .
Untuk memberikan kemampuan kustomisasi komponen, kita perlu menentukan satu set struktur data yang sangat tersedia untuk mencapai keuntungan pemeliharaan yang disebabkan oleh perubahan dalam persyaratan komponen.
Sebelum mulai merancang struktur data, mari kita bongkar modul: komponen yang berbeda sesuai dengan "area edit" yang berbeda. Kita perlu merancang konfigurasi standar terpadu untuk menyetujuinya, yang juga sangat bermanfaat untuk desain editor formulir.
Setelah analisis di atas, penulis merancang struktur data yang mirip dengan yang berikut:
"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
}
}Setelah desain struktural standar ini, kami dapat dengan mudah mengimplementasikan fungsi pengeditan halaman yang kami butuhkan, dan ekspansi kemudian sangat nyaman.
Bangun Platform Konfigurasi Manajemen Bentuk Umum Berdasarkan React (sama seperti VUE)
Masalah penting dalam desain pustaka komponen adalah ukuran dan masalah rendering. Setelah pustaka komponen menjadi lebih dan lebih, itu berarti bahwa pemuatan halaman akan sangat lambat, jadi kita perlu menerapkan kemampuan untuk memuat komponen dan segmentasi kode secara tidak sinkron di atasnya.
import { dynamic } from 'umi' ;
export default dynamic ( {
loader : async function ( ) {
// 这里的注释 webpackChunkName 可以指导 webpack 将该组件 HugeA 以这个名字单独拆出去
const { default : HugeA } = await import ( /* webpackChunkName: "external_A" */ './HugeA' ) ;
return HugeA ;
} ,
} ) ;Melalui metode di atas, kami mendefinisikan setiap komponen yang membungkus masing -masing komponen kami, sehingga kami dapat memuat permintaan, tetapi saran terbaik adalah bahwa kami tidak perlu memuat dan membongkar setiap komponen berdasarkan permintaan.
Di sini saya akan memberi Anda contoh singkat implementasi komponen, yang nyaman bagi semua orang untuk memahami:
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 >
} )Atribut alat peraga dari komponen header di atas sepenuhnya ditentukan oleh struktur JSON yang kami rancang sebelumnya. Langkah terakhir adalah secara dinamis meneruskan komponen -komponen ini ke komponen dinamis .
Fungsi pratinjau relatif sederhana.
Untuk mengunduh ini secara online, kita perlu menggunakan perpustakaan open source: file-saver , yang secara khusus memecahkan dilema kesulitan dalam file pengunduhan front-end.
var FileSaver = require ( 'file-saver' ) ;
var blob = new Blob ( [ "Hello, world!" ] , { type : "text/plain;charset=utf-8" } ) ;
FileSaver . saveAs ( blob , "hello world.txt" ) ;Kode di atas dapat mengunduh data yang masuk ke dalam file txt.
Karena bagian backend melibatkan banyak poin pengetahuan dan bukan fokus dari artikel ini, saya akan memberikan beberapa poin di sini.
Untuk kode tertentu, silakan merujuk ke artikel pengembangan tumpukan lengkap lainnya oleh saya.
Menerapkan proyek Full-Stack CMS dari 0 hingga 1 berdasarkan nodeJS
Polanya pada dasarnya sama.
git clone https://github.com/MrXujiang/h5-Dooring.git cd ./h5-Dooringyarn installMulai aplikasi
yarn run startUpgrade versi 1.3, mohon tetap disini ...
