design

一个简单易用，方便扩展和集成的移动端页面编辑器。

• 安装
• 特点
• 运行原理
• 在线体验
• 快捷键支持
• 使用
• 交流群

安装

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>

在线体验

http://design.service.dux.cn/

• 体验地址中的模板相关功能需要自行实现

快捷键支持

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