草庐IT

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

三个人工作室 2023-10-11 原文

实现目标: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秒)(说的是哪个框架大家自己猜)

技术选型

首先,我们要明确一点,手机端和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中取舍)
  • 寻找高性能的拖动套件

有关uniapp制作pc端响应式布局——带开源前端【伸手党福利】【持续更新】的更多相关文章

  1. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep,它会中断应用程序。否则,计算机将持续运行数周,直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗?欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数,使应用程序能够通知系统它正在使用中,从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  2. ruby-on-rails - 每次我尝试部署时,我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手,我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目,而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  3. ruby - nanoc 和多种布局 - 2

    是否可以为特定(或所有)项目使用多个布局?例如,我有几个项目,我想对其应用两种不同的布局。一个是绿色的,一个是蓝色的(但是)。我想将它们编译到我的输出目录中的两个不同文件夹中(例如v1和v2)。我一直在玩弄规则和编译block,但我不知道这是怎么回事。因为,每个项目在编译过程中只编译一次,我不能告诉nanoc第一次用layout1编译,第二次用layout2编译。我试过这样的东西,但它导致输出文件损坏。compile'*'doifitem.binary?#don’tfilterbinaryitemselsefilter:erblayout'layout1'layout'layout2'

  4. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  5. jenkins部署1--jenkins+gitee持续集成 - 2

    前置步骤我们都操作完了,这篇开始介绍jenkins的集成。话不多说,看操作1、登录进入jenkins后会让你选择安装插件,选择第一个默认的就行。安装完成后设置账号密码,重新登录。2、配置JDK和Git都需要执行路径,所以需要先把执行路径找到,先进入服务器的docker容器,2.1JDK的路径root@69eef9ee86cf:/usr/bin#echo$JAVA_HOME/usr/local/openjdk-82.2Git的路径root@69eef9ee86cf:/#whichgit/usr/bin/git3、先配置JDK和Git。点击:ManageJenkins>>GlobalToolCon

  6. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题,今天小编就来解答与大家分享一下动漫制作流程,为了帮助有兴趣的同学理解,大多数人会选择动漫培训机构,那么今天小编就带大家来看看动漫制作要掌握哪些技巧?一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性,以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料,可以是手绘也可以是3d软件创建。在此步骤中,要注意的问题是色彩和平面布局。三、动漫制作制作完成后,加工成型。完成不同的表现形式后,就要对设计稿进行加工处理,使加工的难易度降低,并得到一些基本准确的概念,以便于后续的大样、准确的尺寸制定。四、

  7. ruby-on-rails - 在 Ruby on Rails 中发送响应之前如何等待多个异步操作完成? - 2

    在我做的一些网络开发中,我有多个操作开始,比如对外部API的GET请求,我希望它们同时开始,因为一个不依赖另一个的结果。我希望事情能够在后台运行。我找到了concurrent-rubylibrary这似乎运作良好。通过将其混合到您创建的类中,该类的方法具有在后台线程上运行的异步版本。这导致我编写如下代码,其中FirstAsyncWorker和SecondAsyncWorker是我编写的类,我在其中混合了Concurrent::Async模块,并编写了一个名为“work”的方法来发送HTTP请求:defindexop1_result=FirstAsyncWorker.new.async.

  8. ruby - Sinatra session 未按预期持续 - 2

    我正在尝试使用Sinatra中的重定向和session在网站周围传递一些数据。这是一个简化的示例,使用PrettyPrint进行调试:require'pp'require'rubygems'require'sinatra'enable:sessionsget'/'dosession[:foo]='12345'puts'session1'ppsessionredirectto('/redir')endget'/redir'doputs'session2'ppsession'helloworld'end查看Thin的输出,我看到:>>Listeningon0.0.0.0:4567,CTRL

  9. ruby - 如何在ruby中制作动态多维数组? - 2

    我有一个关于多维数组的初学者ruby​​问题。我想按年份和月份对条目进行排序。所以我想创建一个包含年->月->月条目的多维数组所以数组应该是这样的:2009->08->Entry1->Entry209->Entry32007->10->Entry5现在我有:@years=[]@entries.eachdo|entry|timeobj=Time.parse(entry.created_at.to_s)year=timeobj.strftime("%Y").to_imonth=timeobj.strftime("%m").to_itmparr=[]tmparrentry}@years.pu

  10. ruby - 如何在不使用 HERE-DOCUMENT 语法的情况下在 Ruby 中制作多行字符串文字? - 2

    问题总结我想尝试使用Ruby来完成我在Python中所做的事情。在Python中它有r"""syntaxtosupportrawstrings,这很好,因为它允许将原始字符串与代码内联,并以更自然的方式连接它们,而无需特殊缩进。在Ruby中,当使用原始字符串时,必须使用其次是EOT在单独的行中,这会破坏代码布局。你可能会问,为什么不使用Ruby的%q{}?嗯,因为%q{}与Python的r"""相比有局限性因为它不会转义多个\\\并且只处理单个\.我正在动态生成Latex代码并写入一个文件,该文件稍后用pdflatex编译。Latex代码包含类似\\\的内容在许多地方。如果我使用Rub

随机推荐