【React】利用Dooringx快速制作H5搭建平台

前言

Dooringx目前到了0.15.1，后面对于大的改造应该比较少了，可以基于此研发自己的H5搭建平台。

快速上手

首先创建个文件夹，例如dooringx-example。

我们推荐使用Umi脚手架快速搭建我们的项目。

在文件夹内使用命令yarn create @umijs/umi-app 或 npx @umijs/create-umi-app

安装dooringx-lib:

yarn add dooringx-lib

lib中部分组件来源于antd和其icon。需要安装antd和icon。动画部分主要使用了animate.css，也需要安装下。

yarn add antd @ant-design/icons animate.css

首先新增路由，用于预览显示。编辑根目录下的.umirc.ts:

  routes: [{exact: false,path: '/',component: '@/layouts/index',routes: [{ path: '/', component: '@/pages/index' },{ path: '/preview', component: '@/pages/preview' },{ path: '/iframe', component: '@/pages/iframe' },],},],

src下新增layouts用于嵌套子页面

import { UserConfig } from 'dooringx-lib';
import 'dooringx-lib/dist/dooringx-lib.esm.css';
import { createContext, useState } from 'react';
import { IRouteComponentProps } from 'umi';
import plugin from '../plugin';
import 'antd/dist/antd.css';
import 'animate.css';export const config = new UserConfig(plugin);
export const configContext = createContext<UserConfig>(config);
config.i18n = false;
export default function Layout({ children }: IRouteComponentProps) {return (<configContext.Provider value={config}>{children}</configContext.Provider>);
}

layout依赖个人定制的plugin，我们简单做个测试组件。

src下新增plugin文件夹，index.tsx:

import { InitConfig } from 'dooringx-lib';
import { LeftRegistComponentMapItem } from 'dooringx-lib/dist/core/crossDrag';
import { PlayCircleOutlined } from '@ant-design/icons';const LeftRegistMap: LeftRegistComponentMapItem[] = [{type: 'basic',component: 'button',img: 'icon-anniu',imgCustom: <PlayCircleOutlined />,displayName: '按钮',urlFn: () => import('./button'),},
];export const defaultConfig: Partial<InitConfig> = {leftAllRegistMap: LeftRegistMap,leftRenderListCategory: [{type: 'basic',icon: <HighlightOutlined />,displayName: '基础',},],initComponentCache: {},rightRenderListCategory: [],initFunctionMap: {},initCommandModule: [],initFormComponents: {},
};export default defaultConfig;

src/plugin/button/index.tsx

import { ComponentItemFactory } from 'dooringx-lib';
import { Button } from 'antd';const Dbutton = new ComponentItemFactory('button','按钮',{},{width: 200,height: 55,},() => {return <Button>测试</Button>;},true,
);
export default Dbutton;

在src/pages/index.tsx处新增编辑器代码：

import {RightConfig,Container,useStoreState,innerContainerDragUp,LeftConfig,ContainerWrapper,Control,
} from 'dooringx-lib';
import { useContext } from 'react';
import { configContext } from '@/layouts';
import { useCallback } from 'react';
export const HeaderHeight = '40px';
export default function IndexPage() {const config = useContext(configContext);const subscribeFn = useCallback(() => {localStorage.setItem('PREVIEWSTATE',JSON.stringify(config.getStore().getData()),);}, [config]);const [state] = useStoreState(config, subscribeFn)return (<div {...innerContainerDragUp(config)}><div style={{ height: HeaderHeight }}>head<buttononClick={() => {window.open('/iframe');}}>go preview</button></div><divstyle={{display: 'flex',justifyContent: 'center',alignItems: 'center',height: `calc(100vh -${HeaderHeight})`,width: '100vw',}}><div style={{ height: '100%' }}><LeftConfig config={config}></LeftConfig></div><ContainerWrapper config={config}><><Controlconfig={config}style={{position: 'fixed',bottom: '60px',right: '450px',zIndex: 100,}}></Control><Container state={state} config={config} context="edit"></Container></></ContainerWrapper><div className="rightrender" style={{ height: '100%' }}><RightConfig state={state} config={config}></RightConfig></div></div></div>);
}

此时启动项目，可以看见编辑器已经显示出来了。拖动组件时，也能正确置入画布。

src的pages下新增对应的页面：

src/pages/preview/index.tsx

import { configContext } from '@/layouts';
import { Preview } from 'dooringx-lib';
import { useContext } from 'react';function PreviewPage() {const data = localStorage.getItem('PREVIEWSTATE');const config = useContext(configContext);if (data) {try {const json = JSON.parse(data);config.resetData([json]);} catch {console.log('err');}}return (<divstyle={{display: 'flex',justifyContent: 'center',alignItems: 'center',}}><Preview config={config}></Preview></div>);
}export default PreviewPage;

src/pages/iframe/index.tsx

function IframePage() {return (<divstyle={{display: 'flex',justifyContent: 'center',alignItems: 'center',}}><iframestyle={{ width: '375px', height: '667px' }}src="/preview"></iframe></div>);
}
export default IframePage;

此时拖拽组件进入画布后，点击按钮进入预览则可看见预览状态也被渲染出来了。

【React】利用Dooringx快速制作H5搭建平台相关推荐

使用模板快速制作H5网页（仅供参考）
#[转载] 使用模板快速制作H5网页(仅供参考) 教程来源: 零基础30分钟学会制作网站--如何使用HTML网页模板(更新P2字幕版) 作者:SolidifieRay 1.HTML整体框架: < ...
利用单片机快速实现家庭智能控制平台
2019独角兽企业重金招聘Python工程师标准>>> 0x00 前言一提到智能家庭,大家可能首先想到的是各种大佬级公司搞的牛逼产品,或者说是创新产品.想想就觉得很复杂,有的用工控 ...
python做工控机_[Micropython]TPYBoard v202 利用单片机快速实现家庭智能控制平台
一提到智能家庭,大家可能首先想到的是各种大佬级公司搞的牛逼产品,或者说是创新产品.想想就觉得很复杂,有的用工控机,有的用树莓派,还有的用arduino,不管用什么,都绕不过服务器进行控制,比如yeel ...
weiit-saas第六篇《如何快速制作与搭建微信公众号商城》
上一篇文章讲到了如何用weiit-saas开源产品搭建微信小程序,今天我们就来讲解一下如何通过公众号授权一键生成公众号商城.其实也跟小程序制作大同小异,有兴趣的小伙伴赶紧来试一下吧! 首先,打开蜗 ...
利用ChatGPT快速制作PPT
目录前言一.ChatGPT是什么? 二.操作步骤 1.通过ChatGPT生成大纲 2.将word导入到ChatPPT中即可快速生成PPT 3.结果展示总结前言目前制作PPT成为许多大学生.以 ...
1分钟利用Excel快速制作随机点名器
首先预览一下效果图制作开始 1,打开一个Excel表格,在第一列[也就是A列]输入姓名,如下图: 2,找一个空白区域,合并一些单元格 , 当做显示姓名的容器如下图:[可以适当的设置一下填充的背景颜色 ...
利用Echarts快速制作表格
1.Echarts图表库 https://echarts.apache.org/zh/index.html 2. 下载echarts.min.js 3. Echarts图表库里面有快速入门,代码可以直 ...
用 Python 快速制作海报级地图
作者:费弗里来源:Python大数据分析 1 简介基于Python中诸如matplotlib等功能丰富.自由度极高的绘图库,我们可以完成各种极富艺术感的可视化作品,关于这一点我在系列文章在模仿中精 ...
利用Python快速绘制海报级别地图
利用Python快速绘制海报级别地图 1.简介 2.利用prettymaps快速制作海报级地图 2.1 prettymaps的几种使用方式 2.1.1 圆形模式 2.1.2 圆角矩形模式 2.1.3 ...
Unreal Engin_画廊制作笔记_001＜设计草图，利用BSP快速搭建简单场景＞
001设计草图,利用BSP快速搭建简单场景本笔记开始记录所学的知识点以及细节操作等,分享下自己学习UE4的经验,也为了巩固知识,便于复习. 接下来我会以模块化的方式,根据步骤来分享学习制作的经验,如 ...

【React】利用Dooringx快速制作H5搭建平台

前言

快速上手

【React】利用Dooringx快速制作H5搭建平台相关推荐

最新文章

热门文章