功能整理:
店铺装修移动化目前需求主要是以下几个:
- 模拟手机端预览装修效果
- 拖拽装修??榻だ来?/li>
- 对??榻胁季炙承蛐薷模ㄉ弦葡乱粕境龋?/li>
- 对??榻惺粜孕薷?/strong>
- 装修备份功能(即读取指定数据并在预览处展示指定效果)
其中??槭粜孕薷模喽员冉细丛?,主要包含几个功能:
- 根据需求上传指定格式的图片
- 裁剪图片(每个模块都有指定的尺寸)
- 链接选择小工具(弹窗形式,选择已有的链接并填充到表单中)
- 服务选择 (弹窗形式,选择已有的服务,并填充到表单中)
- 案例选择 (弹窗形式,选择已有的案例,并填充到表单中)
前提:
参考淘宝的移动店铺装修功能,只支持Chrome和UC浏览器,所以经过产品同意,可以不考虑兼容性的问题,也意味着可以选择更多。
开发周期:
约两周
选型:
手机端预览效果
因为这个项目功能比较独立,所以迁入fis项目进行构建。同时考虑到涉及交互还比较多,所以参考使用框架来帮助我们更好的完成开发??悸强⒅芷?,经过初步筛选,决定入坑Vuejs。
我们这里使用这个框架主要是拿它来实现需求中手机端的预览效果:把手机端预览中的每个??槎嫉背蒫omponent进行组装,通过改变数据来控制展示(拖拽功能即多塞了一条数据,改变属性就相当于改变其中一个数据)。
备份
备份功能也可以使用预览的相同机制实现。
表单功能
至于表单部分功能比较多,可能还是要使用现有的组件来完成部分功能(如选择服务)。
扩展
以后扩展其他模块的话,其实也就相当于多注册几个component,扩展起来比较随意,也比较独立。
其他问题
- Vuejs的文档相对比较友好,容错度也较高,入手使用并不会那么痛苦(就算日后有人接手也相对来说不会那么无从着手)。
- Vuejs本身组件并不丰富。Github上实用的组件也就是vue-crop(包装的jCrop)和vue-validator。 但是经过测试其实也可以使用其他组件,如rake中正在使用的弹窗组件,如拖拽使用的Sortable插件。这些都可以在测试中正常使用。