H5 Dooring Vue
1.0.0
H5 도어링은 강력하고 오픈 소스 및 무료 H5 시각적 페이지 구성 솔루션으로 사용하기 쉬운 간단하고 편리하며 전문적이며 신뢰할 수있는 H5 랜딩 페이지 모범 사례 세트를 제공하고 전문적이고 신뢰할 수 있으며 무한히 가능합니다. 기술 스택은 주로 반응하고 배경은 NodeJS를 사용하여 개발됩니다.
기부금, 문제 및 기능 요청을 환영합니다!
문제 페이지를 확인하십시오.
이 프로젝트가 도움이된다면 ️를주세요!
비주얼 편집기는 주로 다음 부분으로 구성됩니다.
우리는 커뮤니티에서 인기있는 반응 -DND 와 반응을 일으킬 수 있습니다.
두 번째는 H5 편집기 부분이며 핵심 함수이며 나중에 자세히 분석합니다. 미리보기, 미리보기 링크 생성, JSON 파일 저장 및 템플릿 저장과 같은 기능도 있습니다.이 기능은 본질적으로 JSON 파일에서 작동합니다. 다음과 같은 기능의 데모를 살펴 보겠습니다.
H5 Page Visual Editor는 UMI를 스캐 폴딩 도구로 사용합니다.
UMI 는 라우팅을 기반으로 한 확장 가능한 엔터프라이즈 레벨 프론트 엔드 애플리케이션 프레임 워크이며 구성된 라우팅 및 컨벤션 라우팅을 모두 지원하여 라우팅 기능이 완료되고 기능 확장이 수행되도록합니다. 그런 다음 소스 코드에서 제품 구축까지 모든 수명주기를 다루고 다양한 기능 확장 및 비즈니스 요구 사항을 지원하는 완전한 수명주기가있는 플러그인 시스템이 장착되어 있습니다.
이러한 방식으로, 우리는 번거로운 프로젝트 구성 세부 사항에주의를 기울이지 않을 것입니다. 프로젝트에서 ANTD 와 덜 솔루션을 통합 할 수 있으며, 이는 프로젝트의 특정 사용 프로세스가 다음 과 같습니다.
// 创建并进入工程目录
mkdir dooring && cd dooring
// 创建umi应用
yarn create @ umijs / umi - app
// 安装依赖
yarn // 或者使用npm install간단한 3 단계 전략은 프로젝트를 쉽게 구축 할 수 있습니다.이 방법을 사용하기 전에 먼저 로컬 노드 버전이 10.13 이상인지 확인하십시오).
프로젝트가 만들어지면 커뮤니티의 선택된 구성 요소를 조사한 후 필요한 타사 구성 요소를 설치해야합니다.
프로젝트를 실행하기 전에 위의 구성 요소를 직접 설치할 수 있습니다.
최고의 프로젝트 개발 준비 후에는 H5 Page Visual Editor -Dooring 설계를 시작합니다.
H5 Visual Editor는 주로 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 구조에 의해 완전히 정의됩니다. 마지막 단계는 이러한 구성 요소를 동적 구성 요소로 전달하는 것입니다.
미리보기 기능은 비교적 간단합니다. 여기서는 H5 렌더러에만 적용됩니다.
이 온라인으로 다운로드하려면 오픈 소스 라이브러리를 사용해야합니다. 파일 구역은 특히 프론트 엔드 다운로드 파일에서 어려움의 딜레마를 해결해야합니다.
var FileSaver = require ( 'file-saver' ) ;
var blob = new Blob ( [ "Hello, world!" ] , { type : "text/plain;charset=utf-8" } ) ;
FileSaver . saveAs ( blob , "hello world.txt" ) ;위의 코드는 들어오는 데이터를 TXT 파일로 다운로드 할 수 있습니다.
백엔드 부분에는 많은 지식이 포함되어 있으며이 기사의 초점이 아니기 때문에 PHP , Java , Python 또는 Egg 와 같은 백엔드 서비스를 완전히 구현할 수 있습니다.
특정 코드의 경우 저의 다른 전체 스택 개발 기사를 참조하십시오.
nodejs를 기반으로 0에서 1까지 CMS 풀 스택 프로젝트 구현
패턴은 기본적으로 동일합니다.
git clone https://github.com/MrXujiang/h5-Dooring.git cd ./h5-Dooringyarn install응용 프로그램을 시작하십시오
yarn run start버전 1.3 업그레이드, 계속 지켜봐주세요 ...
