H5 Dooring Vue
1.0.0
O H5-Dooring é uma solução poderosa de configuração de página visual H5 e de código aberto e gratuito, comprometido em fornecer um conjunto de melhores práticas simples, convenientes, profissionais, profissionais e confiáveis e confiáveis. A pilha de tecnologia é reagir principalmente e o plano de fundo é desenvolvido usando o NodeJS.
Contribuições, questões e solicitações de recursos são bem -vindos!
Sinta -se à vontade para verificar a página de problemas.
Dê a um ️ se este projeto o ajudar!
O editor visual consiste principalmente nas seguintes partes:
Podemos usar o React-DND e o React-Dragchable , o que é popular na comunidade.
O segundo é a parte do editor H5, que é a função principal, que analisaremos em detalhes posteriormente. Também existem funções como visualização, gerando links de visualização, salvando arquivos JSON e modelos de salvamento. Vamos dar uma olhada na demonstração desses recursos:
Nosso editor visual de página H5 usa a UMI como uma ferramenta de andaimes.
A UMI é uma estrutura de aplicativo front-end de nível corporativo escalável, com base no roteamento, e suporta o roteamento e o roteamento de convenções configurados para garantir que as funções de roteamento estejam completas e a expansão da função seja realizada. Em seguida, ele está equipado com um sistema de plug-in com um ciclo de vida completo, cobrindo todo ciclo de vida do código-fonte para criar produtos, suportando vários requisitos funcionais de expansão e negócios.
Dessa forma , não prestaremos atenção aos pesados detalhes da configuração do projeto.
// 创建并进入工程目录
mkdir dooring && cd dooring
// 创建umi应用
yarn create @ umijs / umi - app
// 安装依赖
yarn // 或者使用npm installUma estratégia simples de três etapas pode construir facilmente nosso projeto, economiza muitos problemas ?
Depois que o projeto é criado, também precisamos instalar os componentes de terceiros necessários na visualização.
Você pode instalar os componentes acima antes de executar o projeto.
Após a melhor preparação de desenvolvimento de projetos, começaremos a projetar nosso editor visual de página H5 - Dooring .
O editor visual H5 requer principalmente 4 partes, que foram analisadas no início do artigo.
Todos sabemos que existem várias soluções populares de visualização de páginas:
O autor fez um gráfico de vantagens e desvantagens de comparação, como segue:
| plano | Grau de personalização | falha |
|---|---|---|
| Editar código online | Mais alto | Alto custo de uso, hostis para pessoal não técnico e baixa eficiência |
| Edite JSON online | Mais alto | Precisa estar familiarizado com o JSON, tem um certo custo de uso, não é amigável ao pessoal não técnico e geralmente é eficiente |
| Nenhuma implementação de arrastar e soltar código | alto | Baixo custo de uso, basicamente sem limiar para operação, alta eficiência |
De acordo com a análise acima, para desenvolver um editor visual que seja baixo e adequado para qualquer pessoa, o autor adotará a terceira solução para implementá-lo .
Para fornecer os recursos de personalização dos componentes, precisamos definir um conjunto de estruturas de dados altamente disponíveis para alcançar as vantagens de manutenção provocadas pelas mudanças nos requisitos de componentes.
Antes de iniciar a estrutura de dados, vamos primeiro desmontar o módulo: diferentes componentes correspondem a diferentes "áreas de edição".
Após a análise acima, o autor projetou uma estrutura de dados semelhante ao seguinte:
"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
}
}Após esse design estrutural padronizado, podemos implementar facilmente as funções de edição de páginas de que precisam, e a expansão posterior é muito conveniente.
Crie uma plataforma de configuração de gerenciamento de formulários gerais com base no React (o mesmo que o Vue)
Uma questão importante no design da biblioteca de componentes é o tamanho e a renderização.
import { dynamic } from 'umi' ;
export default dynamic ( {
loader : async function ( ) {
// 这里的注释 webpackChunkName 可以指导 webpack 将该组件 HugeA 以这个名字单独拆出去
const { default : HugeA } = await import ( /* webpackChunkName: "external_A" */ './HugeA' ) ;
return HugeA ;
} ,
} ) ;Por meio do método acima, definimos cada componente que envolve cada um de nossos componentes, para que possamos carregar sob demanda, mas a melhor sugestão é que não precisamos carregar e descompactar cada componente sob demanda.
Aqui vou lhe dar um breve exemplo de implementação de componentes, o que é conveniente para que todos entendam:
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 >
} )O atributo Props do componente do cabeçalho acima é completamente definido pela estrutura JSON que projetamos antes. A última etapa é passar dinamicamente esses componentes para componentes dinâmicos .
A função de visualização é relativamente simples.
Para baixar isso on-line, precisamos usar uma biblioteca de código aberto: Save de arquivo , que resolve especificamente o dilema da dificuldade nos arquivos de download de 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" ) ;O código acima pode baixar os dados recebidos em um arquivo txt.
Como a parte de back -end envolve muitos pontos de conhecimento e não é o foco deste artigo, darei alguns pontos aqui.
Para um código específico, consulte outro artigo de desenvolvimento de pilha completa por mim.
Implementar um projeto de pilha completa do CMS de 0 a 1 com base no NodeJS
O padrão é basicamente o mesmo.
git clone https://github.com/MrXujiang/h5-Dooring.git cd ./h5-Dooringyarn installInicie o aplicativo
yarn run startAtualizando a versão 1.3, fique atento ...
