去年三月份高中同学拉我做的微信小程序,尽管可能除了高一的时候做网页写过些js以后就再也没碰过(甚至高一时因为觉得“以后肯定不会做程序员”而拒绝学习代码),但得到了“你就写写前端、做做页面和好看的图片就行了”的答复后便开开心心地开始写了。
——谁也不会想到在Deadline前两天,我一个卑微的前端,大晚上地在用putty跟高中同学调试数据库,并且一晚上遇到奇诡的问题就立刻删库……互相吐槽自己写的代码是shit,想想也是有趣的体验啊哈哈。
5、6月份就写完了(虽然依然有大量的bug),一直想写个博客记录一下开发过程中遇到的问题,以及难得完成了一个算是网上找不到类似案例的“树状图”模块。差不多一年后的今天,补完一些js基础后,回头看看当年写的代码,应该也会有有趣的体验吧。(大概)
在wxa-comp-canvas-drag的基础上进行修改,使用了该模块封装的画布的拖拽、移动函数,诸如缩放、旋转的功能没有用到。
成果预览



有点儿类似思维导图。点击结点可以编辑节点信息(这儿有个index-z的问题),删除节点后会标记该节点的属性,点击“执行删除”后才真正的删除。
主要思路
数据格式
首先复习一下Canvas的主要方法。
save:用来保存Canvas的状态。save之后,可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。
restore:用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。
传入组件的后端数据格式形如:
"Tree": [{
"Task": {
"TaskID": "testopenidtaskid1",
"Title": "欢迎使用咕咕Teamwork",
"Pusher": "咕老板",
"Content": "利用树状图进行团队任务的管理和可视化",
"Status": false,
"PushDate": "2019-04-01 00:00:00",
"DeadLine": "2100-01-01 00:00:00",
"Urgency": 3
},
"Self": 0,
"Child": [
1,2,3
],
"TeamMates": [
"咕老板"
]
},
{
"Task": {
"TaskID": "testopenidtaskid2",
"Title": "建立总任务树",
"Pusher": "咕组长",
"Content": "根据实际情况建立相应的任务树",
"Status": 1,
"PushDate": "2019-04-01 00:00:00",
"DeadLine": "2100-01-01 00:00:00",
"Urgency": 3
},
"Self": 1,
"Child": [
4,5
],
"TeamMates": [
"咕组长"
]
},
{
"Task": {
"TaskID": "testopenidtaskid3",
"Title": "提交和审批",
"Pusher": "咕秘书",
"Content": "每个子任务的成员均需要分别提交并进行审批",
"Status": -1,
"PushDate": "2019-04-01 00:00:00",
"DeadLine": "2100-01-01 00:00:00",
"Urgency": 3
},
"Self": 2,
"Child": [
0
],
"TeamMates": null
},
{
"Task": {
"TaskID": "testopenidtaskid4",
"Title": "数据分析",
"Pusher": "咕技术",
"Content": "通过图表直观地观察自己和团队的完成情况",
"Status": -1,
"PushDate": "2019-04-01 00:00:00",
"DeadLine": "2100-01-01 00:00:00",
"Urgency": 3
},
"Self": 3,
"Child": [
0
],
"TeamMates": ["咕技术"]
},
{
"Task": {
"TaskID": "testopenidtaskid5",
"Title": "前期工作",
"Pusher": "咕组长",
"Content": "任务的前期工作",
"Status": 1,
"PushDate": "2019-04-01 00:00:00",
"DeadLine": "2100-01-01 00:00:00",
"Urgency": 3
},
"Self": 4,
"Child": [
0
],
"TeamMates": [
"咕员工A", "咕员工B", "咕员工C"
]
},
{
"Task": {
"TaskID": "testopenidtaskid5",
"Title": "后期工作",
"Pusher": "咕老板",
"Content": "任务的后期工作",
"Status": -1,
"PushDate": "2019-04-01 00:00:00",
"DeadLine": "2100-01-01 00:00:00",
"Urgency": 3
},
"Self": 5,
"Child": [
0
],
"TeamMates": ["咕员工D","咕员工E"]
},
],
"TreeId": "testtasktree",
"TreeName": "testproject"
},
这时候想起来,一开始后端同学传的数据直接是一棵树。后来改成数组了

本文介绍了作者在微信小程序中制作一个可拖拽操作的树状图模块的过程,包括数据格式的设计、Canvas的使用、模块类的实现以及遇到的问题,如Canvas层级和编辑节点信息的交互。作者分享了在开发中如何解决这些问题,并回顾了一年的开发经验。
最低0.47元/天 解锁文章
1万+

被折叠的 条评论
为什么被折叠?



