位置: IT常识 - 正文
uniapp制作pc端响应式布局——带开源前端【伸手党福利】【持续更新】(uniapp实战视频教程)
编辑：rootadmin推荐整理分享uniapp制作pc端响应式布局——带开源前端【伸手党福利】【持续更新】(uniapp实战视频教程)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:uniapp做pc端,uniapp开发pc,uniapp开发pc端,uniapp dialog,uniapp做pc端,uniapp 提示音,uniapp怎么运行,uniapp怎么运行,内容如对您有帮助，希望把文章链接给更多的朋友！
实现目标：uniapp一套式制作pc端、pad端、手机端。符合国家等保二级标准。
目录技术分析pc端（pad端）与移动端的开发区别1. 用户操作习惯。2. 界面区别。3. 表格区别4. 技术优劣技术选型项目架构项目目标开源前端代码催更方式开发日志项目初始化创建功能技术分析截至目前（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秒）（说的是哪个框架大家自己猜）
技术选型首先，我们要明确一点，手机端和pc端要看的内容是不同的 如果内容完全相同，不如使用bootstrap的vue版，bootstrap对于响应式布局的优化可以算是鼻祖级的。
选定了大量技术模板之后，决定手搓模板。 最后的最后，使用了flex布局+ant design vue+echarts+3.js 因为antdv的table是所有里面做的最好的，我最喜欢v3系列的，直观。但是框架用的是v1系列，看实际情况吧。
项目架构pc端为主，移动端为辅，PC端做成uniapp+ant design vue + 手搓css，计划弄一套自己看得过眼的组件。 特殊要求：
寻找在pc端和移动端同时支持的组件，这里主要指下拉选择器、时间选择器、联动选择器等组件（uni-ui当中有，但是不够好看）寻找能够自适应的响应式布局，自动调整页面大小，为pad端做适配建立能够强制pc端、pad端、移动端的全局变量，为开发者提供方便。项目目标形成完整的前端元组件代码，要求能够适应互联网复杂环境（兼容vue之前的跳转系统，比如微信、某第三方的跳转）形成真正自适应pc和移动的组件形成自动适应窗口大小修改uniapp的leftwindow配置，形成完整的前端开发代码框架，让后来人直接用框架复制粘贴就可以开发pc和移动前端。开源前端代码请联系wwppp987@qq.com进行索取。
催更方式由于工作较忙，请发邮件到wwppp987@qq.com进行催更。
开发日志项目初始化建立基础框架，建设自动路由，引入uni-ui、color-ui、uview-ui等基础框架引入ant-design-vue引入其他UI内容建设left-window自动开关动画设计基础框架结构创建功能寻找顶部标签页插件寻找流畅的动画插件寻找快速加载插件寻找下拉框插件寻找消息提醒插件寻找低消耗的前端计算能力插件寻找工业互联网特化UI特点寻找合适的3d引擎（目前在three.js和UE5中取舍）寻找高性能的拖动套件上一篇：奥杜邦中心的一只靛蓝彩鹀，美国宾夕法尼亚州 (© Vicki Jauron/Getty Images)(奥杜邦的祈祷经典语录)
下一篇：[YOLOv7/YOLOv5系列算法改进NO.11]主干网络C3替换为轻量化网络MobileNetV3(yolov5m)
