大屏开发的学习和部署总结

本文全文发表于公司内部技术论坛，本处发布删除了对公司内部产品的介绍和使用部分。

去年12月份，我和一个同事受命去学习传说中的大屏开发技术。但我对最新的前端知识不精，对Node.js语言不懂，于是我们开始了一段奇妙的旅程。这里是近期学习开发工作的小结，很多仅仅是个人理解，并不一定正确。

大屏是什么

这里不讲LED点阵大屏那种比较粗糙的单色大屏，只讲彩色的。大屏我的理解就是定制化的大型屏幕，这块屏幕首先是大，一般按照米来计算长宽，每一块大屏通常由很多小屏幕拼接起来并进行整体的控制。这种大屏一般是定制化的，长宽比例不固定，里面有多少块小屏也说不好，分辨率或粗或细。广义上，比如机场候机口座位旁竖放的单块显示器屏幕、会议室里的大屏幕显示器等都属于广义上的大屏，大屏上的页面一般都是Web网页。

做一个大屏要哪些系统

大屏一般为了展示，交互性较少。一般一个完整的大屏系统分为三块：

1. 大屏：也就是大家看到的大屏幕，一般以展现为主，有一块屏幕一直展示，也有几块屏幕轮播，但极少有与用户交互的成分；
2. 控制界面（可选）：大屏的一些简单配置、控制显示的系统，有在PC上，也有在Pad上。当然，如果是一块死的，没有任何交互、轮播选择的大屏，可以是没有控制界面的。
3. 查询界面（可选）：大屏中展示的数据如果有任何疑问，大屏本身是不负责解答和更详细的根据需求下钻展示的。而查询界面说白了其实就是普通的应用系统，能够进行数据探索、下钻、分析，发现问题，解答疑问。

做大屏需要考虑什么

做大屏和做普通的PC、Mobile端界面还是有区别的，主要表现在：

1. 定制性高。因为分辨率、长款比、屏幕规格比较特殊，通用性低，一般具体的大屏项目化多于产品化，产品化的大屏开发难度要高于项目化的大屏开发难度。不同的情况下有不同的考虑要点：

   • 长宽比：一般的屏幕可以自适应，但是如果长宽比严重失调的时候，自适应后显示效果大打折扣，需要去根据实际比例去针对性的设计；
   • 分辨率：同样面积下，像素大小差别大，甚至有的颗粒感比较明显，这时候如果显示细腻的图形，则不会有良好的效果；
   • 屏幕色彩表现力：如果能有16位色、24位色最好，有的屏幕色彩表现力若，色域有偏差，显示偏色，那么就该慎重考虑渐变色的使用，对于背景色，保险起见多数用暗色，如黑色、湛蓝，这样也更能视觉聚焦；
2. 度量单位选择的不同。一般来说PC显示器用px为度量单位的居多，这种度量方式开发最为方便。近距离观看的设备（PC显示器、移动设备，甚至包括电视）上均需适配的则用pt居多。在大屏项目中，如果需要适配不同大小的大屏则需要考虑使用相对度量单位，如em、rem，使页面在不同大小的屏幕上能等比放大、缩小。
3. 空间局限 大屏界面没有交互，甚至连滚动条都不能存在，因此，一屏就是一屏，一屏多少像素一个点都不会多，一个点都不会少。在这空间内要尽可能多的把信息有主次的传递出来。
4. 显示控制分离：大屏展现出来的部分没有互动，不代表整个大屏解决方案没有互动的成分，大屏的控制端和展现端分离，控制端是一个富交互的模块。
5. 长时间显示：网页在用户观看时打开，用户浏览后关闭，而大屏则有可能十几个小时甚至几十天连续不断在一个页面运行而不关闭。在这种情况下，功能上需要支持定时刷新，这个刷新不是全页面的刷新而是异步的数据上的刷新，性能上要求没有内存泄露，一旦内存泄露长时间运行必定会导致网页崩溃。