uniapp制作pc端响应式布局——带开源前端【伸手党福利】【持续更新】

这篇具有很好参考价值的文章主要介绍了uniapp制作pc端响应式布局——带开源前端【伸手党福利】【持续更新】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

实现目标：uniapp一套式制作pc端、pad端、手机端。符合国家等保二级标准。

技术分析

截至目前（2023年3月2日），uniapp对于横屏的支持，仍旧过于保守，uni-admin在移动端bug不断，显示错位和兼容性很难作为主推产品进行呈现。侧边栏没有原生动画（web端可以后期使用css动画强撸，安装包无解），排版基本就是被响应式布局吊打状态。
正常的web界面左侧导航、顶部导航条（或者缓存页面标签）加载全靠网速。

先加载页面，再加载侧边栏和topwindow这个顺序让人绝望。

唯一的好处就是窗口间通讯还好，隔离做的还不错。

pc端（pad端）与移动端的开发区别

1. 用户操作习惯。

pc端有鼠标右键、pad端有拖动、移动端很少有以上操作，一般使用点击进行操作

2. 界面区别。

pc端界面有1980px，2560px，3890px等，pad端一般在1980,1366等宽度，移动端一般720宽度。
使用rpx的时候，pc端会很吃亏，所以需要两套css或者设置最大值
下拉菜单，PC端、pad端和移动端有极大区别
左下角弹出的提示，有很大区别

3. 表格区别

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

4. 技术优劣

uniapp的ide是HbuilderX，随移动端进行升级，相对于idea、vscode差距很大，但是对前端较为友好。Hbuilder的属于轻量级系统，稳定性不如idea等。
uniapp必须在HbuilderX中进行调试，无法使用命令行vue直接启动。
uniapp能够直接调用移动端接口，对pad端尤其友好。其中uview UI、Color UI、Uni
UI等，对下拉菜单、多选、弹窗等的UI支持尤其不错。在不同类型终端能够有不同的表现形式。但是对table表等内容较多的支持较差。（可以理解）
uniapp为多窗口加载模式，有预加载，打开速度较快，普通vue为单文件加载模式，一次性加载大量js（已经不是所有js了），打开速度在大项目中堪忧。（首次加载一般在1.5秒左右，缓存加载超过0.3秒）（说的是哪个框架大家自己猜）