小程序编辑器

🌰 示例

1.安装

  yarn add applets-make
  或者
  npm install applets-make

引用组件

import * as ReactDOM from "react-dom";
import React, { memo, useState } from "react";
import { Layout } from "antd";
import produce from "immer";
import { css } from "@emotion/core";
import {
  $$button,
  $$text,
  $$picture,
  $$swiper,
  $$video,
  $$form,
  $$article
  AmCanvas,
  AmEdit
} from "applets-make";

/**
 * 接口
 *
 * 1. ui 数据源
 * 2. choose 当前操作组件
 * 3. ajax 接口
 * 接口功能
 * 1. ui 数据源
 * - 获取针对组件数据源，完善组件数据源设置（定位，函数需求的数据），choose 设置为当前组件位置
 * - 提供数据源修改函数
 *
 * 2. choose 当前操作组件
 * - choose 设置回调函数
 */
const Index = memo(() => {
  // ==============使用示例，后期请用redux替换===================

  // 1.  ui 数据源
  const [ui, setUi] = useState([]); // ui数据集
  const onUi = name => {
    // 初始化组件值
    const uiData = {
      button: $$button({
        theme: { color: "", background: "" },
        top: 10,
        left: 10
      }),
      text: $$text({ top: 10, left: 10, id: `${new Date().getTime()}` }),
      picture: $$picture({ top: 10, left: 10 }),
      swiper: $$swiper({ top: 10, left: 10 }),
      video: $$video({ top: 10, left: 10 }),
      form: $$form({ top: 10, left: 10 }),
      article: $$article({ top: 10, left: 10 })
    };
    // 将值推送至组件数据集
    setUi(
      produce(ui, draftState => {
        draftState.push(uiData[name]);
      })
    );
    setChoose(ui.length);
  }; // 添加ui数据
  const onRestUi = ui => {
    setUi(ui);
  }; // ui数据重置，用于后期修改

  // 2. choose 当前操作组件
  const [choose, setChoose] = useState(0); // content 选择ui
  const onChoose = (index: number) => {
    setChoose(index);
  }; // 选择回调函数

  // 3. ajax 接口
  const ajax: any = {
    del: "",
    upload: "",
    user_img: ""
  };
  // ========================================================
  const uiItem = [
    "button",
    "text",
    "picture",
    "swiper",
    "video",
    "form",
    "article"
  ]; // 侧边栏ui选项
  const { Sider, Content } = Layout;
  const style = {
    layout: css`
      height: 100vh;
    `,
    content: css`
      position: relative;
      padding: 20px 300px;
    `,
    sider: css`
      background: white;
    `,
    uiItem: css`
      width: 100%;
      height: 60px;
      text-align: center;
    `
  };

  return (
    <Layout css={style.layout}>
      <Sider css={style.sider}>
        {uiItem.map((data, index) => {
          return (
            <div css={style.uiItem} key={index} onClick={() => onUi(data)}>
              {data}
            </div>
          );
        })}
      </Sider>
      <Content css={style.content}>
        <AmCanvas ui={ui} choose={onChoose} restUi={onRestUi} />
      </Content>
      <Sider css={style.sider} width={500}>
        <AmEdit ui={ui} choose={choose} restUi={onRestUi} ajax={ajax} />
      </Sider>
    </Layout>
  );
});

ReactDOM.render(<Index />, document.getElementById("root"));

📦 包管理

外部必须包含的强依赖包

• @emotion/core,
• antd,
• axios,
• immer,
• react,
• react-dom

内置捆绑包

• antd-mobile,
• braft-editor,
• braft-extensions,
• react-color,
• react-qmap，
• @emotion/styled

🚚 API

画板组件，实现功能：

1. 展示 ui ✅
2. fn() => 回调选择的 ui ✅
3. fn() => 鼠标右键操作,同步 ui 数据源 ✅
4. 键盘操作 🚧
5. 鼠标移动 ✅
6. 对齐线，吸附 🚧

接口

    // ui数据源
    ui?: Array<IButton | IText | IPicture | ISwiper | IVideo | IForm>;
    // 返回在画板中选中的需要操作组件的下标
    choose?(index: number): void;
    // 内部更新数据源后同步数据
    restUi?(ui: any): void;

针对组件的编辑栏

1. 相应组件编辑器显示 ✅
2. 数据重置同步 ✅

接口

  // ui数据源
    ui?: Array<IButton | IText | IPicture | ISwiper | IVideo | IForm>;
    // 当前操作的组件下标
    choose?: number;
    // ajax 接口
    ajax?: {
      del?: string;
      upload?: string;
      user_img?: string;
    };
    // 数据源数据重置同步
    restUi?(ui?: Array<IButton | IText>): void;

数据源函数

   $$button({
        theme: { color: "", background: "" },
        top: 10,
        left: 10
   }),
   $$text({ top: 10, left: 10, id: `${new Date().getTime()}` }),
   $$picture({ top: 10, left: 10 }),
   $$swiper({ top: 10, left: 10 }),
   $$video({ top: 10, left: 10 }),
   $$form({ top: 10, left: 10 }),
   $$article({ top: 10, left: 10 })

``

🐛 待修复

• 编辑栏 list 样式问题 ✅
• 编辑栏表单类报错
• 数据源包含多个组件删除时报错问题 ✅
• 文章列表组件完善 ✅
• 默认主设置页 （配色，底色） ✅