当前位置: 首页 > news >正文

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

像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.lryc.cn/news/442226.html

相关文章:

  • 你应该掌握的12条饭局规矩!
  • 【541. 反转字符串 II 简单】
  • 基于PHP的丽江旅游管理系统
  • vue3+Element-plus el-input 输入框组件二次封装(支持金额、整数、电话、小数、身份证、小数点位数控制,金额显示中文提示等功能)
  • jQuery 简介 ③ ready()事件函数、jQuery 二个原则及容错机制
  • 选择Alluxio来解决AI模型训练场景数据访问的五大理由
  • POS共识机制简介
  • Spring为什么要用三级缓存解决循环依赖?
  • 【Redis入门到精通三】Redis核心数据类型(List,Set)详解
  • 本科生如何学习机器学习
  • 海康威视摄像机和录像机的监控与回放
  • 校医务室健康服务系统小程序的设计
  • MySQL 中的 UTF-8 与 UTF8MB4:差异解析
  • nvm无法下载npm的问题
  • 数据结构与算法——Java实现 6.递归
  • .Net Core 生成管理员权限的应用程序
  • DAY15:链表实现学生信息管理系统
  • JAVA语法基础 day05-面向对象
  • 关于RabbitMQ重复消费的解决方案
  • 【SSM-Day2】第一个SpringBoot项目
  • 【PyTorch】张量操作与线性回归
  • 情感类智能体——你的微信女神
  • 基于SpringBoot+Vue+MySQL的养老院管理系统
  • 大数据Flink(一百二十二):阿里云Flink MySQL连接器介绍
  • FutureTask源码分析
  • Highcharts甘特图基本用法(highcharts-gantt.js)
  • 【Linux庖丁解牛】—Linux基本指令(上)!
  • node.js 中的进程和线程工作原理
  • Qt/C++ TCP调试助手V1.1 新增图像传输与接收功能(附发布版下载链接)
  • DNS解析流程