位置: 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)

  • ipad2020分屏怎么设置一半一半(ipad2020分屏怎么变大)

    ipad2020分屏怎么设置一半一半(ipad2020分屏怎么变大)

  • win7字体大小怎么设置(win7 字体大小)

    win7字体大小怎么设置(win7 字体大小)

  • 朋友圈只给一个人看对方知道吗(朋友圈只给一个人看全部)

    朋友圈只给一个人看对方知道吗(朋友圈只给一个人看全部)

  • 小米手机闹钟如何关闭(小米手机闹钟如何设置一小时一响)

    小米手机闹钟如何关闭(小米手机闹钟如何设置一小时一响)

  • 小米10青春版如何拍延时摄影(小米10青春版如何强制关机)

    小米10青春版如何拍延时摄影(小米10青春版如何强制关机)

  • oppoace多少寸(oppoace2多少寸)

    oppoace多少寸(oppoace2多少寸)

  • 手机壳四周黑了怎么办(手机壳边上黑了怎么办)

    手机壳四周黑了怎么办(手机壳边上黑了怎么办)

  • lbm是什么笔记本电脑(笔记本lb rb)

    lbm是什么笔记本电脑(笔记本lb rb)

  • word淡色80%怎么设置(word淡色80%怎么设置2010)

    word淡色80%怎么设置(word淡色80%怎么设置2010)

  • 为什么微信个性签名改了还是原来的那个(为什么微信个性化广告关闭了还有广告)

    为什么微信个性签名改了还是原来的那个(为什么微信个性化广告关闭了还有广告)

  • 腾讯会议可以共享视频吗(腾讯会议可以共享屏幕和视频一起吗)

    腾讯会议可以共享视频吗(腾讯会议可以共享屏幕和视频一起吗)

  • 陌陌性别错了怎么修改(陌陌性别选错了)

    陌陌性别错了怎么修改(陌陌性别选错了)

  • 4g技术是哪个国家的(4g技术是哪个国家研发的)

    4g技术是哪个国家的(4g技术是哪个国家研发的)

  • 系统软件包括哪三类(系统软件包括哪些主要软件)

    系统软件包括哪三类(系统软件包括哪些主要软件)

  • 电热水袋水少了怎么办(电热水袋水少了还可以充电吗)

    电热水袋水少了怎么办(电热水袋水少了还可以充电吗)

  • 投影仪有黑点怎么清理(投影仪有黑点怎么回事)

    投影仪有黑点怎么清理(投影仪有黑点怎么回事)

  • 手机上面的显示栏没了(手机上面的显示栏怎么隐藏)

    手机上面的显示栏没了(手机上面的显示栏怎么隐藏)

  • 手机掉在地上会不会对手机有影响(手机掉在地上会摔坏听筒吗)

    手机掉在地上会不会对手机有影响(手机掉在地上会摔坏听筒吗)

  • 惠普笔记本无法开机怎么办(惠普笔记本无法开机)

    惠普笔记本无法开机怎么办(惠普笔记本无法开机)

  • 小米8手机sn码多少位(小米8imei和sn码)

    小米8手机sn码多少位(小米8imei和sn码)

  • 微信不开流量能计步吗(微信不用流量)

    微信不开流量能计步吗(微信不用流量)

  • 微信等待验证是什么意思(微信等待验证是被对方拒绝了吗)

    微信等待验证是什么意思(微信等待验证是被对方拒绝了吗)

  • 苹果手机如何关闭wlan(苹果手机如何关屏幕)

    苹果手机如何关闭wlan(苹果手机如何关屏幕)

  • oppoa11x怎么设置解锁密码(OPPOA11X怎么设置锁屏壁纸)

    oppoa11x怎么设置解锁密码(OPPOA11X怎么设置锁屏壁纸)

  • 华为手机hd怎么关闭(华为手机hd怎么关闭掉、怎么找不到高清通话呢?)

    华为手机hd怎么关闭(华为手机hd怎么关闭掉、怎么找不到高清通话呢?)

  • 手机服务密码被别人知道了怎么办(手机服务密码被盗后果)

    手机服务密码被别人知道了怎么办(手机服务密码被盗后果)

  • pd接口是什么(pd接口是什么意思)

    pd接口是什么(pd接口是什么意思)

  • macbook128g够用吗(mac128g实际多少g可用)

    macbook128g够用吗(mac128g实际多少g可用)

  • vivo x6d是全网通吗(vivoy67全网通)

    vivo x6d是全网通吗(vivoy67全网通)

  • 随机附赠的Windows如何更换微软帐户(随机赠送是啥意思)

    随机附赠的Windows如何更换微软帐户(随机赠送是啥意思)

  • 将在MAC电脑屏幕上的操作录制下来制成Gif格式动画(macbook直接显示桌面)

    将在MAC电脑屏幕上的操作录制下来制成Gif格式动画(macbook直接显示桌面)

  • 长期零申报的公司容易注销吗
  • 计入税金及附加的税种口诀
  • 企业所得税如何抵扣
  • 广告费的明细
  • 分公司可以独立承担法律责任吗
  • 工会经费税前扣除凭证
  • 出口的港杂费包括哪些
  • 季度申报残保金怎么填写
  • 汇算清缴报告和审计报告有什么区别
  • 现金流量表余额等于货币资金吗
  • 招待用烟的会计处理
  • 职工取暖费计入什么科目
  • 收到加工劳务发票怎么做
  • 建安企业需要交环保税吗
  • 商品销售税金及附加会计分录
  • 税盘显示已过开票截止日期
  • 劳务派遣企业差额扣除占比过高怎么办
  • 哪些项目可以享受简易征收
  • 美国税改“梦想”很丰满,显示很骨感
  • 本期准予扣除税额是什么
  • 福利费提取后未使用能否税前扣除?
  • 房租收入如何结转成本
  • 门窗属于建材吗还是材料
  • 没有金税盘怎么查询已开发票
  • 企业计提的工资如何算
  • 软件 摊销
  • 外观专利的价值
  • 购入办公楼按多少折算
  • php框架怎么写
  • 二手车增值税专用发票税率
  • macos使用方法
  • 外购货物用于职工奖励
  • 股东怎么签合同
  • 私募股权基金备案流程
  • 应收账款的主要功能包括哪些
  • 建筑企业跨区域还需预缴增值税吗
  • 企业支付给员工的一次性伤残就业补助金计入哪项费用
  • 建筑安装企业核定征收企业所得税
  • 年底有留抵税额怎么结转
  • 稽查查补销售额后补开票如何申报
  • 会计记账凭证摘要如何编写
  • 企业销售旧固定产品
  • 财政补贴收入账务处理
  • 建筑企业未按规定预缴增值税
  • mongodb快速入门
  • 驱动开发:内核是什么
  • 向境外股东分配股息预提所得税
  • 电子承兑提示付款提前几天
  • sql2000错误9003
  • sql 判断字符串中是否包含数字
  • 房地产开发企业增值税怎么算
  • 扣供应商的货款进项税要转出吗
  • 资产负债表可以反映的具体信息有
  • 职工基本医疗保险怎么用
  • 付款申请单如何管理
  • 对公支付的款项没有发票怎么报销
  • 单位发放职工2000元慰问金申请怎么写
  • 缴纳社保需要办理什么手续
  • 免费样品要交税么
  • 消耗性生物资产属于非流动资产吗
  • 盈余公积根据什么确定
  • 采取分期收款方式
  • 大数据量分页查询
  • bios如何设置
  • xp系统管理员账户
  • win7系统怎么备份文件
  • linux操作系统b
  • ftp自动上传文件到服务器
  • win7系统如何清理c盘空间
  • win7共享失败
  • sql2000停止拒绝访问
  • 如何删除win8系统
  • pm2使用手册
  • 自定义控件英文
  • jQuery+Ajax实现无刷新操作
  • JavaScript设置字体颜色
  • 十万元版增值税税率13发票最高开多少
  • 企业所得税年度申报时间
  • 双公开双反馈什么意思
  • 税务ukey版商品编码怎么添加
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设