實現(xiàn)目標(biāo)：uniapp一套式制作pc端、pad端、手機端。符合國家等保二級標(biāo)準(zhǔn)。

技術(shù)分析

截至目前（2023年3月2日），uniapp對于橫屏的支持，仍舊過于保守，uni-admin在移動端bug不斷，顯示錯位和兼容性很難作為主推產(chǎn)品進(jìn)行呈現(xiàn)。側(cè)邊欄沒有原生動畫（web端可以后期使用css動畫強擼，安裝包無解），排版基本就是被響應(yīng)式布局吊打狀態(tài)。
正常的web界面左側(cè)導(dǎo)航、頂部導(dǎo)航條（或者緩存頁面標(biāo)簽）加載全靠網(wǎng)速。

先加載頁面，再加載側(cè)邊欄和topwindow這個順序讓人絕望。

唯一的好處就是窗口間通訊還好，隔離做的還不錯。

pc端（pad端）與移動端的開發(fā)區(qū)別

1. 用戶操作習(xí)慣。

pc端有鼠標(biāo)右鍵、pad端有拖動、移動端很少有以上操作，一般使用點擊進(jìn)行操作

2. 界面區(qū)別。

pc端界面有1980px，2560px，3890px等，pad端一般在1980,1366等寬度，移動端一般720寬度。
使用rpx的時候，pc端會很吃虧，所以需要兩套css或者設(shè)置最大值
下拉菜單，PC端、pad端和移動端有極大區(qū)別
左下角彈出的提示，有很大區(qū)別

3. 表格區(qū)別

表格控件里面，功能最全的，最好看的目前還是antdv

4. 技術(shù)優(yōu)劣

• uniapp的ide是HbuilderX，隨移動端進(jìn)行升級，相對于idea、vscode差距很大，但是對前端較為友好。Hbuilder的屬于輕量級系統(tǒng)，穩(wěn)定性不如idea等。

• uniapp必須在HbuilderX中進(jìn)行調(diào)試，無法使用命令行vue直接啟動。

• uniapp能夠直接調(diào)用移動端接口，對pad端尤其友好。 其中uview UI、Color UI、Uni
  UI等，對下拉菜單、多選、彈窗等的UI支持尤其不錯。在不同類型終端能夠有不同的表現(xiàn)形式。但是對table表等內(nèi)容較多的支持較差。（可以理解）

• uniapp為多窗口加載模式，有預(yù)加載，打開速度較快，普通vue為單文件加載模式，一次性加載大量js（已經(jīng)不是所有js了），打開速度在大項目中堪憂。（首次加載一般在1.5秒左右，緩存加載超過0.3秒）（說的是哪個框架大家自己猜）

技術(shù)選型

首先，我們要明確一點，手機端和pc端要看的內(nèi)容是不同的
如果內(nèi)容完全相同，不如使用bootstrap的vue版，bootstrap對于響應(yīng)式布局的優(yōu)化可以算是鼻祖級的。

選定了大量技術(shù)模板之后，決定手搓模板。
最后的最后，使用了flex布局+ant design vue+echarts+3.js
因為antdv的table是所有里面做的最好的，我最喜歡v3系列的，直觀。但是框架用的是v1系列，看實際情況吧。

項目架構(gòu)

pc端為主，移動端為輔，PC端做成uniapp+ant design vue + 手搓css，計劃弄一套自己看得過眼的組件。
特殊要求：

• 尋找在pc端和移動端同時支持的組件，這里主要指下拉選擇器、時間選擇器、聯(lián)動選擇器等組件（uni-ui當(dāng)中有，但是不夠好看）
• 尋找能夠自適應(yīng)的響應(yīng)式布局，自動調(diào)整頁面大小，為pad端做適配
• 建立能夠強制pc端、pad端、移動端的全局變量，為開發(fā)者提供方便。

項目目標(biāo)

• 形成完整的前端元組件代碼，要求能夠適應(yīng)互聯(lián)網(wǎng)復(fù)雜環(huán)境（兼容vue之前的跳轉(zhuǎn)系統(tǒng)，比如微信、某第三方的跳轉(zhuǎn)）
• 形成真正自適應(yīng)pc和移動的組件
• 形成自動適應(yīng)窗口大小
• 修改uniapp的leftwindow配置，
• 形成完整的前端開發(fā)代碼框架，讓后來人直接用框架復(fù)制粘貼就可以開發(fā)pc和移動前端。

開源前端代碼

請聯(lián)系wwppp987@qq.com進(jìn)行索取。

催更方式

由于工作較忙，請發(fā)郵件到wwppp987@qq.com進(jìn)行催更。文章來源地址http://www.zghlxwxcb.cn/news/detail-415151.html

開發(fā)日志

項目初始化

• 建立基礎(chǔ)框架，建設(shè)自動路由，引入uni-ui、color-ui、uview-ui等基礎(chǔ)框架
• 引入ant-design-vue
• 引入其他UI內(nèi)容
• 建設(shè)left-window自動開關(guān)動畫
• 設(shè)計基礎(chǔ)框架結(jié)構(gòu)

創(chuàng)建功能

• 尋找頂部標(biāo)簽頁插件
• 尋找流暢的動畫插件
• 尋找快速加載插件
• 尋找下拉框插件
• 尋找消息提醒插件
• 尋找低消耗的前端計算能力插件
• 尋找工業(yè)互聯(lián)網(wǎng)特化UI特點
• 尋找合適的3d引擎（目前在three.js和UE5中取舍）
• 尋找高性能的拖動套件

到了這里，關(guān)于uniapp制作pc端響應(yīng)式布局——帶開源前端【伸手黨福利】【持續(xù)更新】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！