接到一个需求，要把一套现有的网页端管理系统完整的复制到小程序上。开始我是拒绝的，想想网页端那些表格要在手机、特别是小程序上复现就头疼。最后甲方给了我一个可以接受的理由：有了小程序就不用做app了啊。

虽然有难度，但是工作还是要做的，有问题就一点一点来解决。先说一个优势，这个网页端是我最近刚重构过的，改成了前后端分离，接口上用了jwt做登录校验（关于jwt的介绍可以移步：【接口相关】聊一聊数据接口的登录态校验以及JWT），可以直接拿到小程序里来用。接下来说一下实际遇到的问题和我的解决方案。

菜单

这个简单，把网页端左侧菜单栏里筛选出常用的放到小程序的tabBar里就可以了，直接用原生的tabBar，没什么花头。

测试的时候发现了一个bug，已经提交给了官方：XS Max真机调试、预览，原生tabBar上的线不显示？

数据表格

网页端数据列表基本都是使用表格来展现，到了小程序端就不适合再用表格了。一方面是小程序没有原生的表格组件，另一方面是手机屏幕不适合展示很宽的表格（横屏什么的从来不在我的考虑范围内）。

我最终采用的解决方案是用卡片列表的形式来展现数据列表。下图是网页端表格和小程序里对应的卡片列表。

模态框+表单

网页端列表中用到的各种表单基本是在弹出模态框里使用表单，这个在小程序上我改成了放到从底部弹出的半屏弹窗。具体效果对比直接看图，小程序里为了防止弹窗内容太多超出屏幕限制，弹窗加了最大高度限制。

日历

由于需求需要，这个项目有一个通过日历展示一个月的日程安排，先看网页端的效果，这里用的是antd的Calendar日历组件。

由于手机屏幕的限制，就算能在小程序页面上展现日历，也没办法合适的展现需要的内容。最终决定小程序端只展示某一日的内容，通过从底部弹出的半屏弹窗里显示的日历来切换日期。

还是要有取舍

虽然经过各种修改后，绝大多数功能都改成了适合小程序端展现的方式，但是还是有一些功能实在是不适合放到小程序端，或者从功能上来说没必要放到小程序端，这些就只能放弃了。