大屏開發的學習和部署總結

本文全文發表于公司内部技術論壇，本處釋出删除了對公司内部産品的介紹和使用部分。

去年12月份，我和一個同僚受命去學習傳說中的大屏開發技術。但我對最新的前端知識不精，對node.js語言不懂，于是我們開始了一段奇妙的旅程。這裡是近期學習開發工作的小結，很多僅僅是個人了解，并不一定正确。

這裡不講led點陣大屏那種比較粗糙的單色大屏，隻講彩色的。大屏我的了解就是定制化的大型螢幕，這塊螢幕首先是大，一般按照米來計算長寬，每一塊大屏通常由很多小螢幕拼接起來并進行整體的控制。這種大屏一般是定制化的，長寬比例不固定，裡面有多少塊小屏也說不好，分辨率或粗或細。廣義上，比如機場候機口座位旁豎放的單塊顯示器螢幕、會議室裡的大螢幕顯示器等都屬于廣義上的大屏，大屏上的頁面一般都是web網頁。

大屏一般為了展示，互動性較少。一般一個完整的大屏系統分為三塊：

大屏：也就是大家看到的大螢幕，一般以展現為主，有一塊螢幕一直展示，也有幾塊螢幕輪播，但極少有與使用者互動的成分；

控制界面（可選）：大屏的一些簡單配置、控制顯示的系統，有在pc上，也有在pad上。當然，如果是一塊死的，沒有任何互動、輪播選擇的大屏，可以是沒有控制界面的。

查詢界面（可選）：大屏中展示的資料如果有任何疑問，大屏本身是不負責解答和更詳細的根據需求下鑽展示的。而查詢界面說白了其實就是普通的應用系統，能夠進行資料探索、下鑽、分析，發現問題，解答疑問。

做大屏和做普通的pc、mobile端界面還是有差別的，主要表現在：

定制性高。因為分辨率、長款比、螢幕規格比較特殊，通用性低，一般具體的大屏項目化多于産品化，産品化的大屏開發難度要高于項目化的大屏開發難度。不同的情況下有不同的考慮要點：

長寬比：一般的螢幕可以自适應，但是如果長寬比嚴重失調的時候，自适應後顯示效果大打折扣，需要去根據實際比例去針對性的設計；

分辨率：同樣面積下，像素大小差别大，甚至有的顆粒感比較明顯，這時候如果顯示細膩的圖形，則不會有良好的效果；

螢幕色彩表現力：如果能有16位色、24位色最好，有的螢幕色彩表現力若，色域有偏差，顯示偏色，那麼就該慎重考慮漸變色的使用，對于背景色，保險起見多數用暗色，如黑色、湛藍，這樣也更能視覺聚焦；

度量機關選擇的不同。一般來說pc顯示器用px為度量機關的居多，這種度量方式開發最為友善。近距離觀看的裝置（pc顯示器、移動裝置，甚至包括電視）上均需适配的則用pt居多。在大屏項目中，如果需要适配不同大小的大屏則需要考慮使用相對度量機關，如em、rem，使頁面在不同大小的螢幕上能等比放大、縮小。

空間局限 大屏界面沒有互動，甚至連滾動條都不能存在，是以，一屏就是一屏，一屏多少像素一個點都不會多，一個點都不會少。在這空間内要盡可能多的把資訊有主次的傳遞出來。

顯示控制分離：大屏展現出來的部分沒有互動，不代表整個大屏解決方案沒有互動的成分，大屏的控制端和展現端分離，控制端是一個富互動的子產品。

長時間顯示：網頁在使用者觀看時打開，使用者浏覽後關閉，而大屏則有可能十幾個小時甚至幾十天連續不斷在一個頁面運作而不關閉。在這種情況下，功能上需要支援定時重新整理，這個重新整理不是全頁面的重新整理而是異步的資料上的重新整理，性能上要求沒有記憶體洩露，一旦記憶體洩露長時間運作必定會導緻網頁崩潰。