【微信小程序】可拖拽操作的“树状图”模块的制作和小程序经验的总结

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

去年三月份高中同学拉我做的微信小程序,尽管可能除了高一的时候做网页写过些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"
    },

这时候想起来,一开始后端同学传的数据直接是一棵树。后来改成数组了

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值