项目解析

目录结构

dist----|------------- 构建结果
        |0.0.1 ----|------- 当次构建时版本
        |index.html|------------- 主站入口
        |wap.html -|----------- 作品入口
src-----|---------- 项目源码
        |components|------------- 公共组件
                   |EditItem----|-- 物料容器组件
                                |index.js ----|--------- 编辑态容器
                                |render.js ---|--------- 渲染态容器
        |core -----|------------ 核心
                   |components.js------------- 物料注册
                   |constants.js-------------- 常量表
        |pages ----|------------ 页面
        |resource -|------------ 物料库
        |router ---|------------ 路由
        |services -|------------ 接口层
        |store ----|------------ 编辑器store数据
        |style ----|------------ 样式
        |tpl ------|------------ 构建生成的html模板
        |utils ----|------------ 工具库
        |wap ------|------------ 作品库源码
        |index.js -|------------ 主站入口
        |wap.js ---|------------ 作品入口
index.html-------------|------------- 本地主站入口
wap.html --------------|------------- 本地作品入口
webpack.build.config.js|------------- 构建时webpack配置
webpack.config.js -----|------------- 开发时webpack配置

拖拽实现

项目的核心在于对物料的拖拽缩放操作 查看生成的作品,会发现就是一个单屏的翻页页面,每个页面由多个元素组成。 那每个元素的如何在编辑时的位置与作品展示时的位置相同呐,可以使用绝对定位控制元素位置。 由此可以得出,我们在编辑单个元素时,就设置其绝对定位,之后再存储这个定位信息,展示时就会和预期一样了

数据结构

// 每个物料节点的数据表示
{
    name: '物料名称,在层级管理中显示',
    type: '物料类型',
    nodeType: '物料节点类型', // 多个物料可以成组
    belong: '归属组的唯一标识',
    // 四维属性
    rect: {
        top: 0,
        left: 0,
        width: 320,
        height: 40,
        // 旋转角度
        rotate: 0,
    },
    // 动画
    animate: {
        // 名称
        name: '',
        // 执行时间
        duration: 1,
        // 延迟
        delay: 0,
        // 循环次数
        repeat: 1,
    },
    // 物料私有属性,可添加特有属性
    attrs: {
        color: 'red',
        fontSize: 12,
        text: '双击编辑文本',
        bgColor: '',
        lineHeight: 1.5,
    },
}
整个编辑器内容的数据表示
{
  // 编辑组件列表
  editList: {
     p0q24p: 物料节点数据表示
  },
  // 当前正在操作的编辑框key
  activeEditKey: [],
  // 组合列表
  groupList: {
    // p0q24p: [
    //   'ftpdy8',
    //   'upivzn',
    // ],
  },
  // 页面列表
  pages: [
    [
      // 'p0q24p',
    ],
  ],
  // 当前激活的页面
  activePage: 0,
  // 当前正在活动的元素尺寸和位置
  moveBoundRect: {},
  // 背景图片
  backGroundImage: '',
  // 背景音效地址
  backMusicUrl: '',
  // 移动标识
  moveInfo: null,
}

页面适配

在编辑设计时,使用的工作尺寸是320*480,而现代的手机各种尺寸层出不穷,如何做到各个手机浏览可以达到预期效果呐。

<meta name="viewport" id="viewport" content="width=320,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

将窗口缩放到width=320,这样就不用再重新计算保存的数据,可以直接原样输出到页面中。 至于高度,一般会大于480,这时我们计算窗口高度,垂直居中视图,上下留白,就可以达到预料中的效果了。