点击空白处退出提示
作品详情
技术栈:react hooks、Ant Pro、TypeScript、ahooks、immerjs、lodash、less、axios、xlsx-js、hrml2canvas、react-beautiful-dnd、react-rnd
工作内容及部分亮点:
(1)负责CG后台活动模块、任务有礼模块,参与页面管理模块的typescript、需求、功能设计和实现;
(2)使用拖拽组件、模板的概念生成小程序页面数据,小程序端解析数据生成小程序页面
•页面配置中页面编辑器,拖拽(react-beautiful-dnd)左侧模板到页面,多个模板(模板由基础组件构成,基础组件按照小程序组件设计,模板又分为平面层和窗口层)拼成小程序的页面,展示在页面编辑器上,展示效果同小程序页面,页面中的模板实现拖拽后调整模板的排序;
•右侧展示当前选中模板的映射表单(表单由原子表单项构成,表单内存在两种递归,一是动作的递归,可以无限设置动作和动作回调,二是表单整体的递归,弹窗动作会继续触发一个动作表单)。映射选中模板的属性(样式、事件、热区、置顶、移动等),修改映射表单会同步修改选中组件的属性,实时查看效果;
•映射表单中的事件原子表单项,设置当前组件触发的事件类型和动作(样式修改、路由跳转、弹窗事件、微信开放能力);
•映射表单中的热区原子表单项,会圈出选中组件,在其之上绘制热区,双击热区后设置热区事件列表,热区通过react-rnd优化,实现绘制后可拖拽移动修改位置;
•模板收藏功能,可以让用户收藏自己设置的模板,收藏后的模板可用于拖拽生成下一个页面。
(3)页面管理功能实现页面的预上线、正式版、推送上线、历史版本回滚管理;
(4)主题页面功能控制小程序端的不同人群包在不同时间下展示不同的页面;
(5)使用js-xlsx,利用 class 的形式封装导出工具类和接口数据格式化方法实现表格的导出;
(6)封装公共组件,如二维码预览组件、可编辑表格、ProForm中的穿梭框组件等。
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态
评论