【应用大赛】实力应用开源解析！干货满满！

lovert

本帖最后由 phoben 于 2021-3-6 21:44 编辑

论坛很多人都知道我一直在做一套MCN管理系统，这个行业首先今年也比较火，本人也是做传媒行业多年，所以学习活字格开发一套让自己满意的应用，是我这一年来一直奋斗的目标。
我做应用有两个特点：
1、注重UI设计和用户体验，死抠细节，如果你的应用细节完善程度不够，可以参考下！
2、系统功能完成度高，每做一个新功能的背后，都有不为人知的难度和困扰，但是最终都能解决，如果你经常被某个看似不可能完成的功能困扰，可以参考下！

这次参加了活字格的“低代码应用大赛(用微信打开)”，也是本着交流学习为主，比赛第二的精神参加，发此贴记录开发过程，与大家学习交流，公开自己学到的一些技巧，给大家提供一些现成的方法和代码，是这次的目的！

这次打算从设计（CSS）、逻辑（命令）、代码（JS C#)三个层面和大家分享应用开发过程中的坑，还有一些干货技巧。
最后大家如果想看系统的基本介绍，请移步应用介绍页面(用微信打开)，先投票后介绍~谢谢！

下面开始先放图，看看应用到底长啥样！

第一张：PC端页面
PC端简单演示.gif

第二张：手机端页面

第三张：部分页面截图
扫码登录演示2.gif

————————————————————————————————————
兼职活字格开发，欢迎各位大佬联系！ VX:13972707111

秋秋 · 秋秋

djs521720 · djs521720

投了！系统做的真不错！

djs521720 · djs521720

djs521720 发表于 2020-7-29 17:31
投了！系统做的真不错！

237135513@qq.com

phoben · phoben

本帖最后由 phoben 于 2020-7-29 18:02 编辑

1、页面和表结构

先看下页面的分类，这里跟新人分享下，设计页面最好是能分门别类，名字取得易懂，字数不宜过多，不然到了这个页面量的时候，就知道多痛苦了。
image.png924952392.png

数据表：

表我用的并不多，出去系统基础，目前表和页面的比例是14:52，也就是14张表，52个页面，预计页面还要增加，表应该不会再增了。
所以，基本上遵循一表多用，怎么理解？就是一张表能搞定的绝不用两张，比如在基础信息表中加一个字段就可以，没必要再开子表，表越多会导致后面组合数据的困难度增加，而且逻辑也变得更复杂，但是增加字段一定要考虑清楚，这个字段是不是有这个价值，增加到主表中。

页面设计技巧：
image.png470437011.png

这里根据各人习惯分享，据上图所示，是一个手机页面的设计，我习惯将“隐藏区域”做的比较大，这个就需要用大的显示器了，起始我建议官方可以增加一个专门用来存放数据调用的视图，不要和页面掺杂一起，这样调整行高和删除行的时候，容易删掉调用数据。
另外对于隐藏区域的布局，也要讲究，虽然看不见，但是也要统一字体大小和排版整齐，多用备注，不然隔一段时间再进去，复杂点的逻辑，自己都会看不懂。再次强烈建议官方出调用页面的单独视窗！
对于调用，一个原则，多做减法，一张表能搞定绝不用两张，至于ODATA还是表格，建议单条数据用ODATA,多行数据计算用表格+公式，过于复杂和过于简单的数据，都用ODATA，但是ODATA不可视，不方便调试，常规的数据多半还是用表格居多。

phoben · phoben

本帖最后由 phoben 于 2020-7-29 18:06 编辑

2、母版设计

PC端母版设计
image.png274298094.png

我只做过很多类型的母版,最终还是觉得简单的好,一般大家都是用来开发OA、CRM、进销存之类的居多，管理平台还是不适合太复杂的WEB页面，但是在配色，边框、线条、宽度方面要多多测试，还是细节第一，经过我测试31*50的格子数，在1920*1080的分辨率下还是比较完美的。另外导航栏建议要么横向，要么竖向，尽量不要两种都有，那么显示区域就显得很小，上方我的母版设计，尽量吧显示区域做大，因为活字格不支持隐藏侧边栏，所以尽量窄一些！

手机端母版设计

image.png396597899.png

因为手机是宽度固定，高度随意的特性，所以母版设计跟PC端完全不同,因为没有伸缩菜单,所以我没有放菜单,在母版上放了一个首页图表，毕竟页面深度不多，就返回首页很方便，格子是采用33*18格，每格18PX，这样显示效果还是比较完美！
首页导航的处理方式我是单独做一个首页，用来放入口链接，简单好看，而且非常好用。
效果如下：
TIM截图20200723082150.png