你听过这个Mobile/PC跨端开发方案嘛？

1.前言

事情是这样的，有个前端同学啊峰准备开发一个中后台管理Web端，涉及到驾驶舱dashboard面板的开发。产品经理提了一个需求：“你能不能让中后台系统兼容移动端？” 后来得知这个需求是老板提的，因为老板要通过手机实时查看数据驾驶舱

啊峰愣了两秒钟，脑里浮现了两种常规操作

• 采用css自适应媒体查询： 用@media语法针对不同尺寸的页面激活不同的css内容，弊端在于只是仅依靠css动态响应实现，很难做好交互体验 比如 👇

• 采用两套代码：pc与mobile分别用两套代码维护，虽然可行，但是后期维护成本极高

这两种方式都不行，那咋整？ 有没有其他可以开箱即用的方式？ 🤔️

最近在github上了解到目前有另外一种解决方案就是：PC = Mobile + Pad 的 自适应布局。

原理是通过优先适配Mobile端，然后再把Mobile端的交互体验和开发模式无缝带入PC端。因此，PC端可以看作是许多Mobile尺寸和Pad尺寸页面组件的组合，另辟蹊径！

而且只需要一套代码，同时还能兼容Mobile端和PC端，最好的保证了Mobile端原生交互体验。 CabloyJS这个全栈框架就是基于上述理念应运而生

2.CabloyJS

2.1 布局管理器

CabloyJS全栈框架内置了一套布局管理器，并且提供了一组 Mobile布局组件和PC布局组件。我们开发的Vue页面组件可以同时支持在Mobile布局/PC布局中显示和使用

• 布局管理器 ：内置Mobile布局/PC布局
• Mobile布局：采用底部Tab页签模式***，达到原生Mobile的交互效果
• PC布局：采用中后台管理系统的布局，同时具备更加强大的定制性和扩展性

开发布局管理器，其实就是开发布局组件，然后修改前端的Config配置即可

2.2 PC布局效果

由于PC端可以看作是许多Mobile尺寸和Pad尺寸页面组件的组合，因此可以实现更加丰富的互动交互体验。在PC布局中，CabloyJS提供了两种页面交互模式：展开式和弹出式 👇

展开式

弹出式

2.3 Mobile布局效果

可以打开F12开发者工具，将页面调整为Mobile尺寸，就可以进入Mobile布局，从而体验原生Mobile的交互效果

3 开源中后台的迭代

Github上大多数Admin一体化中后台管理框架其本质是代码模版。而在具体开发项目时，我们大部分的使用场景是fork后直接在代码模版中编写代码。虽然修改起来很直接，但是不利于模版的持续升级和优化，换句话说就是我们跟原先fork的仓库就中断了“链接”。🤔️ 你是否有下面的经历：当你把代码模版从源码仓库下载下来之后，然后进行一波操作：「增删改」，你从此与代码模版的后续升级版本绝缘了～

而CabloyJS可以称之为真正意义上的框架，采用“对扩展开放,对修改关闭”的开闭原则，既方便框架的持续升级和优化，也方便业务代码的持续沉淀和迁移!

演示站点

可以直接浏览CabloyJS全栈框架的演示站点，增加更直观的感性认知

• 演示站点：test.cabloy.com/
• 演示站点的二维码

相关链接

• 文档：cabloy.com/
• 演示：test.cabloy.com/
• GitHub: github.com/zhennann/ca…

后记

CabloyJS提供的pc = mobile + pad自适应布局是开箱即用的功能，同时又具备二次开发接口，便于灵活定制。本文只能管中窥豹，CabloyJS作者健哥亲自制作了一套免费视频课程，可以更快速更深入的了解和学习CabloyJS全栈框架

• CabloyJS全栈框架：从入门到精通 📖