楼层开发概念简述

简述

楼层分为PC端和WAP端，两端在布局上和数据结构有差异，但在开发逻辑上是一致的。

模板

在首页里，如果每个楼层的布局和样式都一样，那就太千篇一律了，这个时候我们就想让楼层能多有一些样式和布局。\ 所以，就可以用楼层模板来定义不同的样式和布局。\ 我们目前在PC端目前提供了3个楼层模板，在WAP端提供了12个楼层模板。\ 如果需要自己添加自定义的楼层模板，就需要通过写代码的方式来增加模板了。

模板的通用性

在后台管理中，模板会用于维护整个楼层。而在前台中，模板又起到了展示楼层的作用。\ 所以，模板的开发会在后台管理的工程中进行，当开发好后，复制一份到前台的对应目录即可。\ 下面会讲到具体是哪些目录。

楼层开发的目录

这里我们的根目录为ui

• PC端楼层的目录为：

  ui/manager-admin/src/views/page/pc-decoration/templates
  

• WAP端楼层的目录为：

  ui/manager-admin/src/views/page/mobile-decoration/templates
  

  在templates目录下，有两个文件夹common

/common   #已有模板目录
/customs  #自定义模板目录
/floor-pc.scss #模板的样式文件
/index.js #导出模板的入口
/mixin.js #一些通用的混入

在这里我们主要关注/customs文件下的内容。

具体开发

PC端请看 PC端楼层开发\ WAP端请看WAP端楼层开发

当后台管理的的楼层开发好后

当模板开发好后，我们将整个templates文件夹复制到前台项目的pages/-index下即可。\ WAP也是一样的路径。