H5 Dooring Vue
1.0.0
H5-Dooring เป็นโซลูชันการกำหนดค่าหน้าภาพ H5 ที่ทรงพลังและเปิดใช้งานฟรี H5 ซึ่งมุ่งมั่นที่จะจัดหาชุดแนวทางปฏิบัติที่ดีที่สุดของ H5 Landing Page ที่เรียบง่ายสะดวกสบายและเชื่อถือได้ สแต็กเทคโนโลยีส่วนใหญ่จะตอบสนองและพื้นหลังได้รับการพัฒนาโดยใช้ nodejs
ยินดีต้อนรับการมีส่วนร่วมปัญหาและคำขอคุณสมบัติ!
อย่าลังเลที่จะตรวจสอบหน้าปัญหา
ให้️ถ้าโครงการนี้ช่วยคุณได้!
ตัวแก้ไขภาพส่วนใหญ่ประกอบด้วยส่วนต่อไปนี้:
เราสามารถใช้ React-DND และ React-Draggable ซึ่งเป็นที่นิยมในชุมชน
ประการที่สองคือส่วนของตัวแก้ไข H5 ซึ่งเป็นฟังก์ชั่นหลักซึ่งเราจะวิเคราะห์โดยละเอียดในภายหลัง นอกจาก นี้ยังมีฟังก์ชั่นเช่นการแสดงตัวอย่างการสร้างลิงก์ตัวอย่างการบันทึกไฟล์ JSON และการบันทึกเทมเพลต มาดูการสาธิตคุณสมบัติเหล่านี้กันเถอะ:
ตัวแก้ไขภาพหน้า H5 ของเราใช้ UMI เป็นเครื่องมือนั่งร้าน
UMI เป็นเฟรมเวิร์กแอปพลิเคชันส่วนหน้าระดับองค์กรที่ปรับขนาดได้ตามการกำหนดเส้นทางและรองรับทั้งการกำหนดเส้นทางที่กำหนดค่าและการกำหนดเส้นทางการประชุมเพื่อให้แน่ใจว่าฟังก์ชั่นการกำหนดเส้นทางเสร็จสมบูรณ์และดำเนินการขยายฟังก์ชั่น จากนั้นก็มีระบบปลั๊กอินที่มีวงจรชีวิตที่สมบูรณ์ครอบคลุมทุกวงจรชีวิตจากซอร์สโค้ดเพื่อสร้างผลิตภัณฑ์สนับสนุนการขยายการทำงานที่หลากหลายและข้อกำหนดทางธุรกิจ
ด้วย วิธีนี้เราจะ ไม่ ใส่ใจ กับ ราย ละเอียด การกำหนดค่าโครงการที่ยุ่งยาก
// 创建并进入工程目录
mkdir dooring && cd dooring
// 创建umi应用
yarn create @ umijs / umi - app
// 安装依赖
yarn // 或者使用npm installกลยุทธ์สามขั้นตอนที่ เรียบ ง่ายสามารถสร้างโครงการของเราได้อย่างง่ายดายมันช่วยให้เกิดปัญหาได้มากหรือไม่ (ก่อนใช้วิธีการเหล่านี้ก่อนอื่น
หลังจากสร้างโครงการแล้วเรายังต้องติดตั้งส่วนประกอบของบุคคลที่สามที่จำเป็นในการสร้างภาพข้อมูล
คุณสามารถติดตั้งส่วนประกอบด้านบนด้วยตัวเองก่อนที่จะเรียกใช้โครงการ
หลังจากการเตรียมการพัฒนาโครงการที่ดีที่สุดเราจะเริ่มออกแบบเครื่องมือแก้ไขภาพ H5 Page ของเรา - Dooring
ตัวแก้ไขภาพ H5 ส่วนใหญ่ต้องการ 4 ส่วนซึ่งได้รับการวิเคราะห์ที่จุดเริ่มต้นของบทความ
เราทุกคนรู้ว่ามีโซลูชั่นการสร้างภาพหน้ายอดนิยมหลายประการ:
ผู้เขียนทำแผนภูมิเปรียบเทียบข้อดีและข้อเสียดังนี้:
| วางแผน | ระดับการปรับแต่ง | ข้อบกพร่อง |
|---|---|---|
| แก้ไขรหัสออนไลน์ | สูงที่สุด | ค่าใช้จ่ายสูงการใช้งานที่ไม่เป็นมิตรกับบุคลากรที่ไม่ใช่ด้านเทคนิคและประสิทธิภาพต่ำ |
| แก้ไข JSON ออนไลน์ | สูงกว่า | จำเป็นต้องคุ้นเคยกับ JSON มีค่าใช้จ่ายในการใช้งานไม่เป็นมิตรกับบุคลากรที่ไม่ใช่ด้านเทคนิคและโดยทั่วไปจะมีประสิทธิภาพ |
| ไม่มีรหัสลากและวางการใช้งาน | สูง | ต้นทุนการใช้งานต่ำโดยทั่วไปจะไม่มีเกณฑ์สำหรับการทำงานประสิทธิภาพสูง |
จากการวิเคราะห์ข้างต้นเพื่อพัฒนาเครื่องมือแก้ไขภาพที่มีค่าต่ำและเหมาะสำหรับทุกคนผู้เขียนจะนำโซลูชัน ที่สามมาใช้
เพื่อให้ความสามารถในการปรับแต่งของส่วนประกอบเราจำเป็นต้องกำหนดชุดของโครงสร้างข้อมูลที่มีอยู่สูงเพื่อให้ได้เปรียบการบำรุงรักษาที่เกิดจากการเปลี่ยนแปลงข้อกำหนดขององค์ประกอบ
ก่อนที่จะเริ่มออกแบบโครงสร้างข้อมูลให้แยกโมดูลขึ้นมาก่อน: ส่วนประกอบที่แตกต่างกันสอดคล้องกับ "พื้นที่แก้ไข" ที่แตกต่างกัน
หลังจากการวิเคราะห์ข้างต้นผู้เขียนออกแบบโครงสร้างข้อมูลคล้ายกับสิ่งต่อไปนี้:
"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
}
}หลังจากการออกแบบโครงสร้างที่เป็นมาตรฐานนี้เราสามารถใช้หน้าที่การแก้ไขหน้าเว็บที่เราต้องการได้อย่างง่ายดายและการขยายตัวในภายหลังนั้นสะดวกมาก
สร้างแพลตฟอร์มการกำหนดค่าการจัดการแบบฟอร์มทั่วไปตาม React (เหมือนกับ Vue)
ปัญหาที่สำคัญในการออกแบบไลบรารีส่วนประกอบคือขนาดและปัญหาการเรนเดอร์
import { dynamic } from 'umi' ;
export default dynamic ( {
loader : async function ( ) {
// 这里的注释 webpackChunkName 可以指导 webpack 将该组件 HugeA 以这个名字单独拆出去
const { default : HugeA } = await import ( /* webpackChunkName: "external_A" */ './HugeA' ) ;
return HugeA ;
} ,
} ) ;ผ่านวิธีการข้างต้นเรากำหนดส่วนประกอบแต่ละอย่างที่ห่อหุ้มแต่ละ ส่วนประกอบ ของ เรา เพื่อให้เราสามารถโหลดตามความต้องการได้ แต่ข้อ เสนอ แนะที่ดีที่สุดคือเรา ไม่ จำเป็นต้องโหลดและแกะส่วนประกอบแต่ละอย่างตามความต้องการ
ที่นี่ฉันจะให้ตัวอย่างสั้น ๆ เกี่ยวกับการใช้งานส่วนประกอบซึ่งสะดวกสำหรับทุกคนที่จะเข้าใจ:
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 >
} )แอตทริบิวต์อุปกรณ์ประกอบฉากขององค์ประกอบส่วนหัวด้านบนถูกกำหนดโดยโครงสร้าง JSON ที่เราออกแบบมาก่อน ขั้นตอนสุดท้ายคือการผ่านส่วนประกอบเหล่านี้ไปยังส่วนประกอบ แบบไดนามิก แบบไดนามิก
ฟังก์ชั่นการแสดงตัวอย่างค่อนข้างง่าย
ในการดาวน์โหลดออนไลน์นี้เราจำเป็นต้องใช้ไลบรารีโอเพ่นซอร์ส: การประหยัดไฟล์ ซึ่งแก้ปัญหาที่ยากลำบากในการดาวน์โหลดไฟล์ส่วนหน้า
var FileSaver = require ( 'file-saver' ) ;
var blob = new Blob ( [ "Hello, world!" ] , { type : "text/plain;charset=utf-8" } ) ;
FileSaver . saveAs ( blob , "hello world.txt" ) ;รหัสข้างต้นสามารถดาวน์โหลดข้อมูลที่เข้ามาในไฟล์ TXT ได้
เนื่องจาก ส่วนแบ็กเอนด์เกี่ยวข้องกับจุดความรู้มากมายและไม่ได้เป็นจุดสนใจของบทความนี้ฉัน จะ ให้ คะแนน ไม่ กี่ จุด ที่นี่
สำหรับรหัสเฉพาะโปรดดูบทความการพัฒนาสแต็กเต็มรูปแบบอื่นโดยฉัน
ใช้โครงการ CMS Full-Stack ตั้งแต่ 0 ถึง 1 ตาม nodejs
รูปแบบนั้นเหมือนกัน
git clone https://github.com/MrXujiang/h5-Dooring.git cd ./h5-Dooringyarn installเริ่มแอปพลิเคชัน
yarn run startอัปเกรดเวอร์ชัน 1.3 โปรดติดตามความคืบหน้า ...
