O editor H5 de código aberto H5-Dooring 2 meses atrás foi iterado com sucesso para a versão 1.0, da estrutura de geração de página básica inicial ao suporte atual para recursos de componentes mais ricos, recursos de interação e recursos de rastreamento de dados. O design e a iteração do H5-Dooring também ganhou feedback e inspiração de muitos internautas. Também existem muitos amigos com ideias semelhantes que se juntaram para tornar o H5-Dooring melhor e mais poderoso. Aqui está nossa versão mais recente e implementação de função.
Intenção do projeto original
O objetivo principal do desenvolvimento inicial do autor deste projeto era melhorar o custo e a eficiência do desenvolvimento pessoal e corporativo de páginas H5. Por blocos de construção, bibliotecas de componentes existentes ou recursos de componentes externos (em design) podem ser usados para construir aplicativos H5 adequados para diferentes cenários. , E suporta download de código com um clique, permitindo que os técnicos implantem facilmente páginas H5 em seus próprios servidores. Já fiz muitos pequenos aplicativos de geração de código antes, mas todos foram projetados para os programadores escreverem menos código, o que não é suficiente para se tornar É um projeto de código aberto real, então pretendo colocar o H5-Dooring no chão e torná-lo um projeto verdadeiramente valioso.
A seguir, o autor apresentará as funções e ideias de implementação da versão mais recente do editor H5 e como implementar a tentativa de solução WYSIWYG.
Visualização da última versão do editor
Kanban de dados de formulário e análise de dados:
Pilha de tecnologia
Eu também apresentei a pilha de tecnologia e implementação de infraestrutura usada pelo H5-Dooring em meu artigo anterior. Se você estiver interessado, pode consultar a implementação de um editor visual de página h5 baseado em React + Koa.
Recentemente, estamos usando o ninho para refatorar a parte de back-end do projeto e apresentaremos algumas soluções técnicas posteriormente. Aqui está uma breve introdução à pilha de tecnologia implementada pelo projeto:
umi3.0 + dois + antd4.0
ecologia reagir + reagir
nest + mysql + redis
nginx + pm2
Portanto, este é um projeto full-stack e a implementação de muitas funções principais depende da camada DSL acordada, da camada de renderização de página e dos recursos de back-end.
Pontos de função e plano de implementação
A série de artigos anterior do autor introduziu pontos de função específicos e esquemas de implementação, aqui apresentamos principalmente as novas funções que estão disponíveis na versão 1.0.
Adicionado componente de rich text, componente de calendário, componente de interação de botão, componente de coluna
O autor do componente rich text usa um braft doméstico e a visualização é a seguinte: como o projeto foi desenvolvido com o antd4.0, o autor encapsulou especialmente um conjunto de editor de rich text adaptado ao componente antd4.0, suportando o modo controlado do componente Form. Aqueles que estiverem interessados podem aprender a implementação específica no github.
O componente de calendário também foi adicionado recentemente, principalmente para obter uma exibição de página H5 mais rica, da seguinte forma: podemos definir o intervalo de tempo selecionado, a cor principal do intervalo selecionado, a data, etc. O componente de data é usado principalmente pelo autor do componente Calendário de Zarm, O núcleo é o seguinte:
import React, { useState, memo, useEffect, useRef } from 'react';
import { Calendar } from 'zarm';
import styles from './index.less';
import { ICalendarConfig } from './schema';
const CalendarPlayer = memo((props: ICalendarConfig & { isTpl: boolean }) => {
const { time, range, color, selectedColor, round, isTpl } = props;
const realRange = range.split('-');
const [value, setValue] = useState<Date[] | undefined>([new Date(`${time}-${realRange[0]}`), new Date(`${time}-${realRange[1]}`)]);
const [min] = useState(new Date(`${time}-01`));
const [max] = useState(new Date(`${time}-31`));
const boxRef = useRef<any>(null);
return <div className={styles.calenderWrap} style={
{borderRadius: round + 'px', pointerEvents: isEditorPage ? 'none' : 'initial'}} ref={boxRef}>
<Calendar
multiple={!!range}
value={value}
min={min}
max={new Date(max)}
disabledDate={(date:any) => /(0|6)/.test(date.getDay())}
onChange={(value:Date[] | undefined) => {
setValue(value);
}}
/>
</div>
});
export default CalendarPlayer;
Esta também é uma maneira de implementar componentes do Dooring. Amigos interessados são bem-vindos para adicionar suporte a componentes mais avançados para o Dooring.
Antes, um amigo me perguntou por que o projeto usa tantos componentes e a velocidade ainda é rápida ao visualizar a página H5. Aqui eu explico o método de implementação específico, conforme mostrado na figura abaixo: Portanto, nossos produtos móveis e recursos dependentes são muito poucos , E otimizado na camada webpack e na camada do servidor, para que o terminal móvel acesse a página H5 muito rapidamente. Essa otimização será introduzida em detalhes posteriormente, e o desempenho ainda está sendo otimizado.
Componentes de interação de botão O autor escreveu artigos que apresentam especificamente como implementar a interação de botão, código de interação customizado e interação de rich text pop-up. Se você estiver interessado, consulte o artigo Interação customizada de componente de design de função central de plataforma de desenvolvimento de baixo código Alcançado .
O autor mostra aqui o método de interação específico: o usuário interativo que abre a janela pop-up pode personalizar o conteúdo na janela pop-up, da seguinte forma:
Neste momento, o efeito de visualização no celular é o seguinte:
para a personalização
code, o autor integra a biblioteca de edição de código codemirror, para que possamos Você pode personalizar os recursos de interação da seguinte maneira:
Em seguida, vem nosso componente de coluna, que se baseia principalmente nos requisitos de negócios. O método de implementação é igual ao componente básico. Você pode experimentá-lo online.
Adicionada função de importação e exportação de arquivo json
O principal motivo para essa função é facilitar o design colaborativo de páginas H5. Por exemplo, se uma pessoa cria uma página H5 e deseja que outras pessoas participem do design, você pode exportar a página H5 atual como JSONe outra pessoa pode importar esse arquivo JSON. Você pode renderizar imediatamente na mesma página H5 e, em seguida, modificá-la ou melhorá-la.
Em relação a como implementar o download json, o autor também introduziu no artigo anterior, podemos usar file-savereste módulo de terceiros para fazê-lo. Upload e análise json podem ser implementados por nós mesmos. O autor usa a Upload + FileReader APIimplementação. O código principal é o seguinte:
const uploadprops = useMemo(() => ({
name: 'file',
showUploadList: false,
beforeUpload(file, fileList) {
// 解析并提取json数据
let reader = new FileReader();
reader.onload = function(e) {
let data = e.target.result;
importTpl && importTpl(JSON.parse(data))
};
reader.readAsText(file);
}
}), []);
Adicionada captura de tela com um clique e função de geração de imagem de pôster em alta definição
Esta seção é principalmente para fornecer uma solução de mapeamento rápida para a página H5, que é conveniente para operadores ou pessoal técnico avaliarem o efeito da página. Da perspectiva de implementação de front-end, usamos principalmente canvasa conversão de dom. O princípio é o seguinte: O autor também compartilhou a implementação específica antes Para a solução, você pode consultar os seguintes artigos:
Como o front end realiza a função de captura de tela com um clique?
Aqui, eu recomendo duas canvasferramentas úteis de captura de tela, html2canvase dom-to-imageo processo de captura de tela da página Dooring é o seguinte:
Adicionado menu do botão direito e funções de atalho de teclado personalizadas
A fim de melhorar ainda mais a eficiência dos usuários que criam páginas H5, o autor adicionou um menu do botão direito, que pode facilmente copiar os componentes que foram feitos, ou excluí-los com uma tecla, como segue: mas para controladores de teclado, eles preferem implementar todas as funções através do teclado. então eu adicionei um atalho de teclado, o apoio a uma cópia chave, colar, elementos de exclusão, como segue:
recomenda-se que alguns problema em usar o menu do botão direito e biblioteca de atalhos de teclado
react-contexify, keymaster.
Nova configuração de página
Esta seção é principalmente para dar mais liberdade à página H5, você pode personalizar o título da página, SEOpalavras-chave, plano de fundo da página e imagem de plano de fundo, etc., da seguinte maneira: mais recursos de personalização de página serão adicionados posteriormente.
Otimização do design de interface
Em comparação com a versão 0.1, a interface foi bastante ajustada e otimizada, como nossa página de login: página de visualização:
Introdução ao SDK do suporte
Esta também é uma tentativa do autor anterior, permitir que o H5-Dooring sdkseja implantado em qualquer websistema de uma forma, e fornecer funções e displays customizados api, principalmente da seguinte forma: O princípio de implementação também foi apresentado no artigo anterior. Da seguinte forma:
Os interessados podem consultar os seguintes artigos do autor:
Como empacotar rapidamente seu aplicativo em js-sdk?
Planejamento posterior
A principal coisa a fazer no período posterior é continuar a enriquecer componentes de negócios de alta qualidade, refatorar githuba arquitetura de design do código existente, fazer um bom trabalho nas camadas de visualizações, dados e lógica, separar o renderizador de página e o renderizador de formulário e fornecer recursos de abertura de componentes e melhorias Recursos de serviço de back-end, etc., dão as boas-vindas aos amigos interessados para fazer sugestões valiosas e issuecontinuar a iterar e otimizar.
endereço do github: https://github.com/MrXujiang/h5-Dooring
Bem-vindo a todos garfo e estrela.
Relaxar