当前位置: 首页 > 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看官方文档

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • [Linux]Vi和Vim编辑器
  • 电脑远程启动Wol
  • 【Linux篇】网络编程基础(笔记)
  • 【VLM小白指北 (1) 】An Introduction to Vision-Language Modeling
  • ER论文阅读-Decoupled Multimodal Distilling for Emotion Recognition
  • CV之OCR:GOT-OCR2.0的简介、安装和使用方法、案例应用之详细攻略
  • (学习总结)STM32CubeMX HAL库 学习笔记撰写心得
  • 微服务漏洞最小化:CKS考试核心实践指南
  • 深度学习后门攻击分析与实现(一)
  • “滑动窗口”思想在算法里面的应用
  • JavaWeb--纯小白笔记04:Tomcat整合IDEA
  • 解决 TortoiseGitPlink Fatal Error:深入解析
  • 【QT】系统-下
  • MacOS升级Ruby版本的完整指南
  • 基于机器学习的区域能源生产与消费的分析与预测系统实现,前端layui,后端flask,可视化echarts
  • .pyc 想到的一些问题
  • 2017 年终总结 —— 在路上
  • 345-反转字符串中的元音字母
  • ECMAScript 6 学习之路 ( 四 ) String 字符串扩展
  • JS题目及答案整理
  • Laravel Mix运行时关于es2015报错解决方案
  • MyEclipse 8.0 GA 搭建 Struts2 + Spring2 + Hibernate3 (测试)
  • node入门
  • sessionStorage和localStorage
  • Web标准制定过程
  • 今年的LC3大会没了?
  • 聊聊springcloud的EurekaClientAutoConfiguration
  • 使用Gradle第一次构建Java程序
  • 学习笔记TF060:图像语音结合,看图说话
  • 深度学习之轻量级神经网络在TWS蓝牙音频处理器上的部署
  • AI又要和人类“对打”,Deepmind宣布《星战Ⅱ》即将开始 ...
  • gunicorn工作原理
  • scrapy中间件源码分析及常用中间件大全
  • 说说我为什么看好Spring Cloud Alibaba
  • 曜石科技宣布获得千万级天使轮投资,全方面布局电竞产业链 ...
  • #HarmonyOS:Web组件的使用
  • #nginx配置案例
  • #pragma once
  • #pragma 指令
  • #Ubuntu(修改root信息)
  • #基础#使用Jupyter进行Notebook的转换 .ipynb文件导出为.md文件
  • (145)光线追踪距离场柔和阴影
  • (52)只出现一次的数字III
  • (day18) leetcode 204.计数质数
  • (vue)el-tabs选中最后一项后更新数据后无法展开
  • (WSI分类)WSI分类文献小综述 2024
  • (层次遍历)104. 二叉树的最大深度
  • (二十六)Java 数据结构
  • (附源码)ssm考生评分系统 毕业设计 071114
  • (附源码)流浪动物保护平台的设计与实现 毕业设计 161154
  • (三)c52学习之旅-点亮LED灯
  • (删)Java线程同步实现一:synchronzied和wait()/notify()
  • (一)Neo4j下载安装以及初次使用
  • (一)基于IDEA的JAVA基础10
  • (终章)[图像识别]13.OpenCV案例 自定义训练集分类器物体检测