UniApp如何打包成客户端应用程序

embedded/2024/9/23 15:48:39/

像flutter是支持PC宽屏、桌面平台(Windows/macOS/Linux),我一直在期望UniApp什么时候也支持PC,桌面平台,终于盼到了。

1、支持PC宽屏

uni-app 2.9起,支持PC宽屏的适配。

uni-app提供的屏幕适配方案,包括3部分:

1.1 页面窗体级适配方案:leftWindow、rightWindow、topWindow

以目前手机屏幕为主window,在左右上,可新扩展 leftWindow、rightWindow、topWindow,这些区域可设定在一定屏幕宽度范围自动出现或消失。这些区域各自独立,切换页面支持在各自的window内刷新,而不是整屏刷新。

各个window之间可以交互通信。

1.2 组件级适配方案:match-media组件

uni-app提供了 match-media组件 和配套的 uni.createMediaQueryObserver 方法。

1.3 内容缩放拉伸的处理

除了根据屏宽动态显示和隐藏内容,其实还有一大类屏幕适配需求,即:内容不会根据屏宽动态显示隐藏,而是缩放或拉伸。

具体来说,内容适应又有两种细分策略:

  1. 局部拉伸:页面内容划分为固定区域和长宽动态适配区域,固定区域使用固定的px单位约定宽高,长宽适配区域则使用flex自动适配。当屏幕大小变化时,固定区域不变,而长宽适配区域跟着变化
  2. 等比缩放:根据页面屏幕宽度缩放。rpx其实属于这种类型。在宽屏上,rpx变大,窄屏上rpx变小。

2、支持桌面客户端

有了宽屏适配,uni-app的应用就可以方便的通过electron(第三方工具还有NW.js/Capacitor/Tauri)打包为电脑客户端应用,支持windows、mac、linux。

开发者可以随意调用electron的API,以调用更多操作系统的能力(为方便多端兼容,可以将这些特殊API写在自定义的条件编译里)。

首先得将UniApp导出web版本,再web配置electron打包里exe程序,同样也可以打包mac,linux下的桌面应用,具体操作见electron官网。若是能支持导出exe程序,那就更方便了,不用去学习electron,目前看可能性不大,毕竟UniApp是以手机为主的,PC只是辅助的。

electron官网:https://www.electronjs.org/zh/docs/latest/

注:具体去UniApp看官方文档


http://www.ppmy.cn/embedded/115667.html

相关文章

Leetcode 2464. 有效分割中的最少子数组数目

1.题目基本信息 1.1.题目描述 给定一个整数数组 nums。 如果要将整数数组 nums 拆分为 子数组 后是 有效的,则必须满足: 每个子数组的第一个和最后一个元素的最大公约数 大于 1,且 nums 的每个元素只属于一个子数组。 返回 nums 的 有效 子数组拆分中…

Matlab|电-气-热综合能源系统耦合优化调度

1 主要内容 程序主要做的是一个考虑电、热、气网耦合调度的综合能源系统优化调度模型,考虑了电网与气网,电网与热网的耦合,电网部分为10机39节点的综合能源系统,热网为6节点,气网部分为比利时20节点气网,潮…

python机器人编程——用手机web远程视频监控并控制小车驾驶(上篇vrep仿真)

目录 一、前言二、技术架构三、设备端实现四、服务控制端实现(1)摄像头服务模块(2)web服务器 五、web端实现(1)视频显示(2)驾驶盘的实现(3)心跳 六、总结七、…

MongoDB 关系

MongoDB 关系 MongoDB 是一种流行的 NoSQL 数据库,它使用文档存储数据。与传统的关系型数据库不同,MongoDB 不使用表格和行来存储数据,而是使用集合和文档。在 MongoDB 中,一个文档是一个 BSON(二进制 JSON)对象,它类似于 JSON 对象,但包含更多的数据类型。 MongoDB …

了解华为云容器引擎(Cloud Container Engine)

1.什么是云容器引擎? 云容器引擎(Cloud Container Engine,简称CCE)提供高度可扩展的、高性能的企业级Kubernetes集群。借助云容器引擎,您可以在华为云上轻松部署、管理和扩展容器化应用程序。云容器引擎是一个企业级的…

去耦合的一些建议

尽量少用全局变量,以减少状态共享和潜在的副作用。 模块化设计:将代码分成小模块,每个模块独立实现特定功能,减少模块之间的相互依赖。 封装:将数据和操作封装在类中,控制对内部状态的访问,避…

【系统架构设计师】特定领域软件架构(经典习题)

更多内容请见: 备考系统架构设计师-核心总结索引 文章目录 【第1~2题】【第3~4题】【第5~6题】【第7~8题】【第9~10题】【第11~12题】【第13~14题】【第15~17题】【试题一(共25分)】【问题 1】(13 分)【第1~2题】 特定领域软件架构(Domain Specific Software Architecture…

【python】字面量

字面量 学习目标: 掌握字面量的含义了解常见的字面量类型基于print语句完成各类字面量的输出 什么是字面量: 字面量:在代码中,被写下来的固定的值,称之为字面零 Python中有哪些值可以被写下来? 如何在…