H5 편집기에서 템플릿 라이브러리를 디자인하고 표지 아트 자동 생성을 실현하는 방법

과거 선택

H5 편집자의 사진 업로드 및 사진 라이브러리 디자인 계획
H5 편집기의 실시간 미리보기 및 실제 기계 스캔 코드 미리보기 기능을 실현하는 방법
온라인 IDE 개발 시작하기 : 처음부터 온라인 코드 편집기 구현
React + Koa-Dooring을 기반으로하는 h5 페이지 용 비주얼 편집기
TS 핵심 지식 포인트 요약 및 실제 프로젝트 사례 분석

머리말

HTML5는 HTML의 최신 버전입니다.보다 풍부한 페이지 성능을 제공하기 위해 모바일 장치에서 멀티미디어를 지원하도록 설계되었습니다. HTML5는 또한 크로스 플랫폼이며 다양한 유형의 하드웨어 (PC, 태블릿, 휴대폰, TV 등). 따라서 모바일 공식 웹 사이트, H5 이벤트 페이지, H5 마케팅 페이지 등 다양한 시나리오의 애플리케이션이 도출됩니다. 인터넷 페어가 개발됨에 따라 빅 데이터 분야의 모바일 BI 모델도 H5에서 전달 될 수 있습니다.

위와 같은 요구를 충족시키기 위해 많은 기업들이 특정 쇼, 특정 전시회 등 H5 편집 플랫폼을 구축하기 시작했으며, 저자는 또한 기업이 비즈니스 시나리오에 맞는 H5 페이지를 빠르게 구축 할 수 있도록하기 위해 이전에 자신의 H5 편집기 H5-Dooring을 오픈 소스했습니다.

사용하기 쉬운 H5 편집기를 설계하려면 사용자 작업을 단순화하고 사용자 비용을 극도로 줄여야한다는 것을 모두 알고 있습니다.이 표준을 달성하려면 다음 조건이 필요합니다.

풍부한 구성 요소 라이브러리
풍부한 그림 자료
유연한 구성 요소 구성
어리석은 작업
H5 페이지 템플릿 (템플릿 라이브러리) 즉시 사용 가능

위의 5 가지 조건은 H5 편집기 개발을위한 매우 중요한 참조 지표입니다. 저자는 이전 기사에서 처음 4 가지 조건에 대한 구체적인 구현 계획을 가지고 있습니다. 저자는 H5 편집기에서 템플릿 라이브러리 기능의 구현을 구체적으로 소개 할 것입니다. 이 요구 사항이 필요한 IT 엔지니어는 참조가 있습니다.

단원 요약

H5 편집기에서 템플릿 라이브러리 디자인의 기본 아이디어
iframe 자식 페이지와 부모 페이지 간의 통신을 실현하는 방법
DOM 요소를 기반으로 표지 이미지를 자동 생성하는 솔루션

본문

프론트 엔드 엔지니어로서 프로젝트 문제 해결은 우리의 기본 책임 중 하나입니다. 우리는 습득 한 지식을 사용하여 프로젝트 개발의 문제와 요구 사항을 해결할 수 있습니다. 이것은 또한 우리의 전문 경력의 첫 단계입니다. -적응 기간. 계속해서 승진하고 싶다면 계속해서 업그레이드하고 다양한 기술을 습득해야합니다. 그래서 우리는 두 번째 단계 인 문제에 직면했을 때 최선의 해결책을 사용하여 효율적으로 문제를 해결할 수 있습니다. -개발 기간.

다음으로 작성자는 H5 편집기에서 템플릿 라이브러리를 완성하고 커버 맵 체계의 자동 생성을 실현하기 위해 단계별로 안내합니다. 자바 스크립트, html5 및 모듈 식 개발 방법 (es6 모듈성 및 모듈 식 개발 방법)과 같은 프런트 엔드 엔지니어에게 필요한 기본 기능을 마스터해야합니다. 타사 모듈 사용 방법).

H5 편집기 템플릿 라이브러리 디자인의 기본 아이디어

H5 편집기의 페이지 렌더링은 대부분 json 스키마를 기반으로하며 각 구성 요소를 json 메타 데이터로 구체화 할 수 있다는 것을 모두 알고 있습니다. 이렇게하면 구성 요소를보다 세밀하게 제어 할 수 있으며 템플릿은 많은 구성 요소로 구성된 블록 또는 전체 페이지는 json 요소 배열 에 해당합니다 . 따라서 해당 솔루션은 사용자에게 템플릿을 저장할 수있는 버튼을 제공하는 것입니다. 사용자가 저장을 클릭하면 현재 구성된 json 데이터 만 가져 오면됩니다. , 해당 데이터베이스에 저장합니다. 데이터 구조는 대략 다음과 같습니다.

[
    {
        "id": "12reg2",
        "name": "趣谈前端落地页",
        "tpl": [...组件配置数据项]
    },
     {
        "id": "12rdg5",
        "name": "H5-Dooring落地页",
        "tpl": [...组件配置数据项]
    }
]

复制代码

위의 데이터를 데이터베이스에서 꺼내서 직접 react 또는 vue를 사용하여 렌더링 할 수 있습니다 .json 데이터를 얻는 방법은 H5-Dooring의 특정 구현 프로세스를 참조하십시오.

하지만 데이터를 저장하는 것만으로는 충분하지 않습니다. 사용자가 자신의 템플릿을 저장 한 후 이전에 구성한 템플릿을 나중에 직접 사용하려면 어떻게 빨리 찾을 수 있습니까? 템플릿 이름으로 다른 템플릿을 식별 할 수 있지만 한 번 이 점점 더 많은 템플릿이 있고, 사용자는 쉽게 그래서이 시점에서 우리는 종종 템플릿 미리보기의 기능을 제공하기 위해 H5 편집기를 기대하고, 그들이 템플릿의 이름에서 원하는 템플릿을 선택할 수 없습니다 아래와 같이. 우리가 발견 있도록 한 가지 어려운 문제는 템플릿 미리보기를 생성하는 방법입니다.

템플릿 미리보기를 생성하는 방법

템플릿 미리보기 생성의 일반적인 아이디어는 미리보기 페이지를 기반으로 미리보기 페이지의 스크린 샷을 생성 한 후 해당 템플릿 데이터에 저장하는 것입니다. 단계는 다음과 같습니다. 따라서 사용자는 H5 편집기의 편집 페이지에서 H5 템플릿을 구성한 다음 미리보기로 이동해야합니다. 페이지, 미리보기 페이지를 기반으로 미리보기 스크린 샷을 생성하고 마지막으로 편집 페이지로 돌아가서 저장합니다.이 프로세스는 다른 페이지의 상호 점프를 포함하기 때문에 사용자 친화적이지 않습니다. 추가 최적화를 수행하고 편집 페이지에서 미리보기 이미지를 직접 생성 할 수 있습니다. ,이 논리를 실현하기 위해 두 가지 계획이 있습니다.

서버를 통해 미리보기 페이지를 요청하고, 서버에 페이지의 스크린 샷을 생성하고 템플릿 데이터와 함께 데이터베이스에 저장합니다.
Canvas + iframe 기술을 통해 DOM 프런트 엔드를 기반으로 미리보기 이미지 생성

이전의 구현 프로세스가 더 복잡하기 때문에 인형과 같은 라이브러리에 의존하고 그림과 템플릿 데이터를 동기화 상태로 유지해야하므로 두 번째 옵션 인 순수 프런트 엔드 구현을 권장합니다. 다음 콘텐츠는 하나씩 진행하겠습니다. 소개.

iframe 자식 페이지와 부모 페이지 간의 통신을 실현하는 방법

위의 소개에서 우리는 페이지 스크린 샷을 얻기 위해 canvas + iframe 기술을 사용하기로 결정했습니다. 먼저 구현 효과를 살펴 보겠습니다. 위 그림에서 사용자에게 표지를 설정하는 두 가지 방법 (기본 이미지 사용과 자동으로 표지 생성)을 제공함을 알 수 있습니다.

사용자는 Dooring에서 제공하는 기본 커버를 사용하거나 생성 된 미리보기 커버를 직접 사용할 수 있습니다. 그림 2에서 팝업 창은 실제로 iframe입니다. 작성자는 iframe 콘텐츠가 렌더링 된 후 서버에 스크린 샷을 자동으로 업로드 한 다음 iframe과 부모를 자동으로 업로드하는 메커니즘을 설계했습니다. 페이지 통신은 이미지 URL을 편집 페이지로 전달한 다음 템플릿 데이터와 함께 저장합니다. 페이지 상위-하위 통신을 실현하려면 iframe이 상위 페이지와 어떻게 상호 작용하는지 이해해야합니다. 상위-하위 페이지 통신에 대한 자세한 소개는 작성자의 이전 레코드 를 참조하세요. 프로젝트의 페이지 간 통신 문제 및 파일 다운로드 기능의 프런트 엔드 구현 . 여기서는 iframe이 상위 페이지와 통신하는 방법을 살펴 봅니다.

// iframe点用副页面函数
parent.window.getFaceUrl(url);

// 父页面定义的全局函数
window.getFaceUrl = (url) => {
  setFaceUrl(url)
  setShowModalIframe(false)
}

复制代码

위에서 우리는 기본적으로 아버지-아들 가치 이전과 전체 공정 설계 계획을 극복했습니다. 데이터를 저장하는 방법과 데이터를 템플릿에 통합하는 방법 등 구체적인 세부 사항이 많기 때문에 작성자의 H5-Dooring 프로젝트에서 배울 수 있습니다.

DOM 요소를 기반으로 표지 이미지를 자동 생성하는 솔루션

위는 기본적으로 전체 템플릿 라이브러리의 저장 과정을 구현 한 것입니다. 다음으로 미리보기 이미지 저장에 대한 세부 사항을 구현합니다. 페이지 요소를 기반으로 미리보기 이미지를 생성하므로 dom을 이미지로 변환 할 수있는 프런트 엔드가 필요합니다. 여기서 저자는 잘 알려진 2 가지를 조사했습니다. 도서관:

html2canvas
dom-to-image

html2canvas는 아직 실험 단계이고 저자 주변의 친구들은 유럽을 사용한 후 실제로 설명 할 수없는 버그를 작성했기 때문에 저자는 기본적으로 현재 요구 사항을 충족 할 수있는 dom-to-image를 분석하여이를 달성하기 위해 직접 사용합니다.

위에 구현 된 프로세스를 가져와야합니다. 즉, dom을 그림으로 변환 한 다음 서버로 전송하고 마지막으로 서버에서 반환 한 그림 주소를 가져 와서 마지막으로 그림 주소와 템플릿 데이터를 함께 저장해야합니다. 코드를 직접 살펴 보겠습니다.

import domtoimage from 'dom-to-image';
// ...其他库

// 将dom转化为图片逻辑
const generateImg = (cb) => {
    domtoimage.toBlob(ref.current)
    .then(function (blob) {
        const formData = new FormData();
        formData.append('file', blob, 'tpl.jpg');
        req.post('/files/xxx/xxx', formData).then((res) => {
          cb && cb(res.url)
        })
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });
  }

复制代码

다음 단계는 매우 간단합니다. 이미지 URL을 가져와 표시 및 저장을 위해 상위 페이지로 전달합니다.

H5 편집기 H5-Dooring 업데이트 지침

위 튜토리얼의 저자는 H5-Dooring에 통합되었으며, 좀 더 복잡한 인터랙티브 기능의 경우 합리적인 디자인을 통해 구현할 수도 있으며 혼자서 탐구하고 공부할 수 있습니다.

github ???? : H5 온라인 편집기 H5-Dooring

H5-Dooring은 여전히 지속적으로 업데이트되고 반복되므로 작성자는 업데이트 된 콘텐츠를 구체적으로 소개합니다.

H5 편집기의 전체 인터페이스를 리팩터링했습니다.
그림 라이브러리 기능 추가 :
시각적 데이터 소스 편집 기능 :
템플릿 라이브러리 구현 :
인터페이스 최적화 미리보기 :

마침내

H5 게임, webpack, node, gulp, css3, javascript, nodeJS, 캔버스 데이터 시각화 및 기타 프런트 엔드 지식과 실제 전투에 대해 더 배우고 싶다면 "Interesting Frontend"에서 함께 공부하고 토론하여 프런트 엔드 경계를 함께 탐색하십시오.

댓글 영역

작가님은 다음 호에서 경품과 함께 책 발송 이벤트를 개최 할 예정 이니 서둘러 마음 속으로 책을 전 해주세요 ~