开始
一个简单易用,方便扩展和集成的移动端页面编辑器。
安装
yarn duxapp app add design
此模块需要在 duxapp 框架 中运行
此模块只包含了编辑器的核心代码,如果你需要开箱即用,可以安装 designExample
模块
yarn duxapp app add designExample
然后运行下面的命令,即可查看到效果
yarn dev:h5 --app=designExample
特点
- 你可以方便的编写一个组件在这个编辑器中运行,或者将你现有的组件经过简单修改运行在编辑器中。
- 编辑后的数据同时支持小程序、H5、React Native,需在Taro3的项目中使用。
- 组件样式遵循以React Native样式为基础的Flex布局,可以同时给设计师和开发人员使用。
- 导出为React组件后,可以继续进行二次开发。
- 提供模板导入组件,添加模板和模板管理功能需要您进行后续开发
- 默认提供导出代码组件,您需要手动添加支持,比如在节点右键菜单上
运行原理
你编辑的后的数据以json的方式运行和存储,下面的示例将一个text组件嵌套在一个view组件的json。
[
{
"child": [
{
"attr": {
"style": {},
"children": "文本内容"
},
"tag": "Text",
"key": "2e0l1-19tg00",
"child": []
}
],
"attr": {
"style": {}
},
"tag": "Column",
"key": "2e0l1VzIiw00"
}
]
对应的JSX代码如下
<Column>
<Text>文本内容</Text>
</Column>
在线体验
- 体验地址中的模板相关功能需要自行实现
快捷键支持
ctrl + z 撤销操作
ctrl + shift + z 恢复操作
ctrl + c 复制节点
ctrl + v 粘贴节点
delete 删除节点
使用
- 编辑器使用示例
import Taro from '@tarojs/taro'
import { Column, Row } from '@/duxui'
import { Design, ComponentList, Editor, Layer, Attr, defineComponentConfigs } from '@/design/Design'
import { defineComponents } from '@/design'
import { getMedia } from '@/duxapp/utils/net/util'
import * as form from '@/duxuiDesign/components/form/config'
import * as layout from '@/duxuiDesign/components/layout/config'
import * as show from '@/duxuiDesign/components/show/config'
import '../../../theme.scss'
import '../../../app.scss'
import './index.scss'
defineComponents({
...layout.comps,
...form.comps,
...show.comps,
})
defineComponentConfigs({
...layout.config,
...form.config,
...show.config,
})
Taro.initPxTransform({
designWidth: 375,
deviceRatio: {
375: 1.25
}
})
export default function DuxDesign({ config, ...props }) {
return <Design config={{ ...defaultConfig, ...config }} {...props}>
<Row grow justify='between' className='design-page'>
<ComponentList />
<div className='center'>
<div className='editor'>
<div className='phone'>
<Editor />
</div>
</div>
</div>
<Column className='attr-layer'>
<Layer />
<Attr />
</Column>
</Row>
</Design>
}
const defaultConfig = {
upload: async (type, option) => {
const res = await getMedia(type, option)
return res.map(item => item.path)
},
theme: {
dark: false,
},
link: [
]
}
注意 编辑器仅支持编译成h5使用,请勿在小程序或者app端调用,以及所有从 @/design/Design
导出的函数和组件都一样。
- 渲染模式使用示例
import { TopView, Render } from '@/design'
export default function PageName() {
return <TopView>
<Render nodes={[]} />
</TopView>
}
将组件添加到编辑器使用
关于此部分的内容可查看 designExample
模块
交流群
816711392