位置: IT常识 - 正文

uniapp制作pc端响应式布局——带开源前端【伸手党福利】【持续更新】(uniapp实战视频教程)

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

推荐整理分享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. 表格区别uniapp制作pc端响应式布局——带开源前端【伸手党福利】【持续更新】(uniapp实战视频教程)

表格控件里面,功能最全的,最好看的目前还是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中取舍)寻找高性能的拖动套件
本文链接地址:https://www.jiuchutong.com/zhishi/293744.html 转载请保留说明!

上一篇:奥杜邦中心的一只靛蓝彩鹀,美国宾夕法尼亚州 (© Vicki Jauron/Getty Images)(奥杜邦的祈祷经典语录)

下一篇:[YOLOv7/YOLOv5系列算法改进NO.11]主干网络C3替换为轻量化网络MobileNetV3(yolov5m)

  • 金税开票软件怎么修改开票人
  • 税务基本任务和稽查范围?
  • 企业清算所得税申报
  • 房产税的税收优惠政策
  • 税捷财税官网
  • 为职工垫付的水电费应计入
  • 进项税额结转不结转
  • 小规模免税销售额是含税还是不含税
  • a3软件怎么反记账
  • 软件行业个人所得税
  • 建筑企业劳务分包税务筹划
  • 新会计准则最大变化
  • 申报专项资金项目是什么
  • 一般纳税人能否享受残保金优惠
  • 存根联和记账联丢失有影响吗
  • 收到机动车发票怎么认证
  • 递延和摊销
  • 汇兑损益减少怎么记账
  • 购买债券投资的交易费用
  • 增值税纳税申报实训心得体会
  • 当期应交所得税怎么计算
  • 对公账户是否有银行卡号
  • win11 zen2
  • 查补以前年度企业所得税的申报处理
  • 在建工程进项税额转出
  • 支付给代理机构的手续费计入
  • 睿因无线路由器怎么设置
  • 销售退回的处理方法
  • 国外进口增值税税率
  • 世界著名气泡酒公司
  • php获取get
  • 纳税申报表填写说明
  • vue实例完整项目源码
  • 蓝桥杯c题库及答案
  • 命令压缩文件
  • 税务企业类型分为哪几种
  • mysql的启动方法(windows 平台)
  • 所得税预缴政策
  • 外购产品用于职工福利企业所得税视作销售吗
  • 金税盘抵扣的结转会计分录
  • 售后维修的会计分录
  • 小规模纳税人劳务派遣可以差额征税吗
  • 铁路运费印花税谁承担
  • 银行利息回单怎么报账审核
  • 销售货物海运费会计分录
  • 企业红包是什么骗局吗
  • 简易计税转出
  • 无形资产摊销能加计扣除吗
  • 旅游业营业税税率
  • 财务建账应关注哪些内容
  • 物流公司会计工作内容
  • 数据库left joins
  • 腾讯云centos7有界面吗
  • win7系统开启telnet服务
  • win10邮件和日历怎么更新新版outlook
  • ubuntu系统如何安装
  • Mac如何使用clash上外网
  • centos bz
  • Ubuntu keylin 14.04 怎么使用root用户登录?
  • console打开
  • win10每周更新
  • win8语言设置
  • linux内核怎么使用
  • js正则用法
  • fetch怎么用
  • 关于extjs4如何获取grid修改后的数据的问题
  • jquery的用处
  • nodejs stdin
  • Android异常重启保护机制
  • 用python做
  • jquery简单例子
  • jqueryui dialog
  • unity unite
  • python程序解读举例
  • 四川省地方税务局
  • 江苏宿迁个体户那个园区好
  • 纳税申报的期限是多久
  • 威海个人社保余额查询
  • 个人所得税年申报流程
  • 转租土地合法吗现在
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设