別具一格的Mobile/PC跨端開發(fā)方案，前端架構(gòu)可以借鑒一波
中后臺(tái)管理系統(tǒng)如何更優(yōu)雅的支持移動(dòng)端？
隨著移動(dòng)終端的普及和升級(jí)換代，大量業(yè)務(wù)場(chǎng)景都需要Mobile端的支持，比如：
管理層：需要通過手機(jī)查看統(tǒng)計(jì)數(shù)據(jù)、審核業(yè)務(wù)單據(jù)
運(yùn)維人員：通過手機(jī)遠(yuǎn)程查看服務(wù)器狀態(tài)，并進(jìn)行調(diào)整優(yōu)化
我們知道，市面上大多數(shù)中后臺(tái)管理系統(tǒng)，都是優(yōu)先適配 PC 端，然而Mobile端交互體驗(yàn)卻不佳，處于勉強(qiáng)可用，但不好用的階段
傳統(tǒng)的做法
傳統(tǒng)的做法一般而言有兩個(gè)：
1. 采用css自適應(yīng)媒體查詢
css自適應(yīng)媒體查詢：具體而言，就是采用@media語法針對(duì)不同尺寸的頁面激活不同的css內(nèi)容，從而達(dá)到動(dòng)態(tài)適配樣式的目的。比如：
1@media screen and (max-569px) {
2 .list-group {
3 width: 100%;
4 }
5}
6@media screen and (min-570px) and (max-879px) {
7 .list-group {
8 width: 50%;
9 }
10}
11@media screen and (min-880px) {
12 .list-group {
13 flex: 1;
14 }
15}
然而，PC端和Mobile端的界面交互體驗(yàn)不同，頁面的布局也必然不同。因此，僅僅依靠css的動(dòng)態(tài)響應(yīng)，只是讓PC端的頁面在Mobile端可用，但遠(yuǎn)遠(yuǎn)達(dá)不到原生Mobile端的效果
2. 采用兩套代碼
由于采用css自適應(yīng)媒體查詢有很大的局限性，很多項(xiàng)目采用兩套代碼來分別處理PC端和Mobile端的布局顯示。這樣雖然解決了問題，但是同樣的業(yè)務(wù)邏輯需要開發(fā)兩套代碼，成本、時(shí)間、精力都是加倍
解決之道：pc = mobile + pad自適應(yīng)布局
方案：CabloyJS全?？蚣苁讋?chuàng)
pc = mobile + pad自適應(yīng)布局機(jī)制效果：只需要一套代碼，同時(shí)兼容Mobile端和PC端，并且Mobile端達(dá)到原生交互體驗(yàn)
原理：優(yōu)先適配Mobile端，然后再把Mobile端的交互體驗(yàn)和開發(fā)模式無縫帶入PC端。因此，PC端可以看作是許多Mobile尺寸和Pad尺寸頁面組件的組合
布局管理器
CabloyJS全?？蚣軆?nèi)置了一套布局管理器，并且提供了一組 Mobile布局組件和PC布局組件。我們開發(fā)的Vue頁面組件可以同時(shí)支持在Mobile布局/PC布局中顯示和使用
布局管理器：根據(jù)當(dāng)前頁面尺寸決定采用何種布局：Mobile布局/PC布局
Mobile布局：采用底部Tab頁簽?zāi)Ｊ?，達(dá)到原生Mobile的交互效果
PC布局：采用中后臺(tái)管理系統(tǒng)的布局，同時(shí)具備更加強(qiáng)大的定制性和擴(kuò)展性
PC布局效果
由于PC端可以看作是許多Mobile尺寸和Pad尺寸頁面組件的組合，因此可以實(shí)現(xiàn)更加豐富的互動(dòng)交互體驗(yàn)。在PC布局中，CabloyJS提供了兩種頁面交互模式：
展開式
彈出式
1. 展開式
2. 彈出式
Mobile布局效果
可以打開F12開發(fā)者工具，將頁面調(diào)整為Mobile尺寸，就可以進(jìn)入Mobile布局，從而體驗(yàn)原生Mobile的交互效果
演示站點(diǎn)
可以直接瀏覽CabloyJS全?？蚣艿难菔菊军c(diǎn)，增加更直觀的感性認(rèn)知
演示站點(diǎn)：https://test.cabloy.com/
演示站點(diǎn)的二維碼
相關(guān)視頻
為了能更進(jìn)一步的了解pc = mobile + pad自適應(yīng)布局的實(shí)現(xiàn)機(jī)制，我們還可以參考以下兩個(gè)視頻課程：
1.分別在Mobile端/PC端實(shí)現(xiàn)博客文章的CRUD和審批工作流：
2.學(xué)習(xí)Mobile布局/PC布局的頁面結(jié)構(gòu)與頁面打開方式：
相關(guān)鏈接
文檔：https://cabloy.com/
演示：https://test.cabloy.com/
GitHub: https://github.com/zhennann/cabloy
后記
CabloyJS提供的pc = mobile + pad自適應(yīng)布局是開箱即用的功能，同時(shí)又具備二次開發(fā)接口，便于靈活定制。本文只能管中窺豹，CabloyJS作者健哥親自制作了一套免費(fèi)視頻課程，可以更快速更深入的了解和學(xué)習(xí)CabloyJS全?？蚣?/p>
CabloyJS全棧框架：從入門到精通
https://course.cabloy.com/zh-cn/articles/A-001.html
也可以直接點(diǎn)擊閱讀原文進(jìn)入查看