uniapp支持App横竖屏开发总结

一、需求:

app要支持重力感应自动切换横竖屏,并切换后样式不能错乱

二、实现

官方文档
官方Git
manifest.json文件中

"app-plus" : {"screenOrientation" : ["portrait-primary","portrait-secondary","landscape-primary","landscape-secondary"],
}

pages.json文件中

"globalStyle": {"pageOrientation": "auto"},
"app-plus": {"screenOrientation": ["portrait-primary",     //可选,字符串类型,支持竖屏"portrait-secondary",   //可选,字符串类型,支持反向竖屏"landscape-primary",    //可选,字符串类型,支持横屏"landscape-secondary"   //可选,字符串类型,支持反向横屏]
},

三、额外补充

3.1 合理性

我感觉这东西官方uniapp应该默认配置里就有,而不应该让程序员再手动添加,因为自动旋转大部分APP都支持,不需要的人手动置为false比较合理

3.2 旋转后的样式问题

旋转后可能出现样式问题或者白屏,导致问题点原因有很多,有一大部分原因是uniapp对涉及安卓原生交互的东西处理的其实并不太好,我这里只列一下我了解到的
①不要使用rpx,使用px,因为rpx是根据屏幕尺寸来计算的,回到首页时候,页面获取到的屏幕尺寸还是横屏的尺寸;如果非要使用rpx,要加定时器实时监控页面尺寸
②不要使用uni.navigateBack()返回,监听页面返回使用uni.redirectTo跳转或uni.switchTab,如果直接跳回想要跳转的页面还是出现样式问题,可以尝试先跳转一个空白页面,在空白页面跳转至想要跳回的页面就好了

3.2 如果你要强制APP所有页面都是横屏:

pages.json

"globalStyle": {"pageOrientation": "landscape",
}

manifest.json

"distribute" : {"orientation" : [ "portrait-primary" ]
},

3.3 如何在页面里手动旋转页面(单独让某个页面支持旋转)

export default {mounted() {// 监听屏幕方向变化window.addEventListener('orientationchange', this.handleOrientationChange)},destroyed() {// 移除屏幕方向变化的监听window.removeEventListener('orientationchange', this.handleOrientationChange)},methods: {handleOrientationChange() {// 横屏if (window.orientation === 90 || window.orientation === -90) {this.lockOrientation('landscape')}// 竖屏else {this.lockOrientation('portrait')}},lockOrientation(orientation) {if (typeof plus !== 'undefined' && typeof plus.screen !== 'undefined') {plus.screen.lockOrientation(orientation)}}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/63749.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flink如何基于数据版本使用最新离线数据

业务场景 假设批量有一张商户表,表字段中有商户名称和商户分类两个字段。 批量需要将最新的商户名称和分类的映射关系推到hbase供实时使用。 原实现方案 a.原方案内容 为解决批量晚批问题,批量推送hbase表时一份数据产生两类rowkey:T-1和…

在 Spring Boot 项目中使用 Thymeleaf 时,通常情况下,你需要配置热加载(Hot Reload)来在开发过程中更快速地看到页面的变化。

配置步骤&#xff1a; 1. 添加 DevTools 依赖 在 pom.xml 中添加 spring-boot-devtools 依赖。DevTools 提供了自动重启、LiveReload、模板热加载等功能。 <dependencies><!-- Spring Boot DevTools (用于热加载) --><dependency><groupId>org.spri…

基于事件驱动的websocket简单实现

websocket的实现 什么是websocket&#xff1f; WebSocket 是一种网络通信协议&#xff0c;旨在为客户端和服务器之间提供全双工、实时的通信通道。它是在 HTML5 规范中引入的&#xff0c;可以让浏览器与服务器进行持久化连接&#xff0c;以便实现低延迟的数据交换。 WebSock…

F5-TTS文本语音合成模型的使用和接口封装

F5-TTS文本语音生成模型 1. F5-TTS的简介 2024年10月8日&#xff0c;上海交通大学团队发布&#xff0c;F5-TTS (A Fairytaler that Fakes Fluent and Faithful Speech with Flow Matching) 是一款基于扩散Transformer和ConvNeXt V2的文本转语音 (TTS) 模型。F5-TTS旨在生成流…

elementui table子级tree懒加载bug

1. 删除子级刷新列表子级依然显示 2.更新状态子级列表未刷新 3.编辑子级后刷新页面显示状态未变更 el-table 树表格load源码 首先&#xff0c;load可以执行&#xff0c;但是只剩一个子节点就有问题&#xff0c;那么就直接可以定位bug在load方法里&#xff1a; 文件路径&am…

SQL语句错误号:Incorrect integer value: ‘‘ for column ‘poi_id‘ at

SQL语句错误号&#xff1a;Incorrect integer value: for column poi_id at通用解决方案 在MySQL 5.7中&#xff0c;如果你遇到 Incorrect integer value: for column poi_id at row 1 错误&#xff0c;这通常意味着你尝试将一个空字符串插入到需要整数值的字段中。以下是几…

在springBoot项目如何对本地配置文件和云服务配置文件独立配置

springBoot中配置文件本地和云服务配置文件独立配置 1.首先我们创建好一个springBoot项目后&#xff0c;需要再创建两个application.yml配置文件&#xff0c;如图 2.然后在各自的配置文件中配置各自环境的信息&#xff0c;注意的是在创建各自环境的yml文件时&#xff0c;必须…

【分布式事务】二、NET8分布式事务实践: DotNetCore.CAP 框架(本地消息表) 、 消息队列(RabbitMQ)、 多类型数据库(MySql、MongoDB)

介绍 DotNetCore.CAP简称CAP, [CAP]是一个用来解决微服务或者分布式系统中分布式事务问题的一个开源项目解决方案, 同样可以用来作为 EventBus 使用,CAP 拥有自己的特色,它不要求使用者发送消息或者处理消息的时候实现或者继承任何接口,拥有非常高的灵活性。我们一直坚信…

aippt:AI 智能生成 PPT 的开源项目

aippt&#xff1a;AI 智能生成 PPT 的开源项目 在现代办公和学习中&#xff0c;PPT&#xff08;PowerPoint Presentation&#xff09;是一种非常重要的展示工具。然而&#xff0c;制作一份高质量的PPT往往需要花费大量的时间和精力。为了解决这一问题&#xff0c;aippt项目应运…

一文说清flink从编码到部署上线

引言&#xff1a;目前flink的文章比较多&#xff0c;但一般都关注某一特定方面&#xff0c;很少有一个文章&#xff0c;从一个简单的例子入手&#xff0c;说清楚从编码、构建、部署全流程是怎么样的。所以编写本文&#xff0c;自己做个记录备查同时跟大家分享一下。本文以简单的…

在VMWare上安装openEuler 22.03-LTS

文章目录 1. openEluer 22.03-LTS概述2. 安装openEluer 22.03-LTS2.1 安装配置虚拟机2.2 安装openEuler2.3 配置虚拟机静态IP地址 3. 使用yum和dnf3.1 使用dnf安装软件包3.2 使用dnf卸载软件包3.3 使用yum安装软件包3.4 使用yum卸载软件包 4. 利用FinalShell连接Server015. Bas…

短信验证码burp姿势

首先声明&#xff0c;本文仅仅作为学习使用&#xff0c;因个人原因导致的后果&#xff0c;皆有个人承担&#xff0c;本人没有任何责任。 在之前的burp学习中&#xff0c;我们学习了图片验证码的突破&#xff0c;但是现实中还有很多短信验证码&#xff0c;在此我介绍几种短信验…

Spring Security-记住我的实现原理

Spring Security 5.7.5版本 RememberMeAuthenticationFilter.doFilter方法包含了核心逻辑。 RememberMeAuthenticationFilter在UsernamePasswordAuthenticationFilter之后执行。 从SecurityContextHolder获取的Authentication为null时&#xff0c;会执行rememberMeServices.…

【软件测试面试题】测试理论/基础面试(持续更新)

Hi&#xff0c;大家好。最近很多朋友都在说今年的互联网行情不好&#xff0c;面试很难&#xff0c;不知道怎么复习&#xff0c;我最近总结了一份在软件测试面试中比较常见的测试理论/基础面试面试题合集&#xff0c;希望对大家有帮助。建议点赞收藏再阅读&#xff0c;防止丢失&…

渗透测试学习笔记(二)kali相关

一.kali 基础工具 NetCat -网络工具中的瑞士军刀&#xff1a;允许用户通过 TCP 或 UDP 协议发送和接收数据。WireShark-开源抓包软件TCPdump-命令行抓包分析工具 二. 被动信息收集 2.1 被动信息收集指从公开渠道获取信息&#xff0c;主要是已经公开的信息。 要点&#xff1…

在 Windows WSL 上部署 Ollama 和大语言模型:从镜像冗余问题看 Docker 最佳实践20241208

&#x1f6e0;️ 在 Windows WSL 上部署 Ollama 和大语言模型&#xff1a;从镜像冗余问题看 Docker 最佳实践 ⭐ 引言 随着大语言模型&#xff08;LLM&#xff09;和人工智能技术的迅猛发展&#xff0c;开发者们越来越多地尝试在本地环境中部署模型进行实验。 但部署过程中常…

《人工智能安全:挑战与破局之路》

《人工智能安全&#xff1a;挑战与破局之路》 一、人工智能安全现状二、人工智能安全面临的挑战&#xff08;一&#xff09;技术层面的挑战&#xff08;二&#xff09;伦理与社会层面的挑战 四、人工智能安全未来发展趋势&#xff08;一&#xff09;技术创新引领发展&#xff0…

ContOS7安装完成后的一系列问题

问题1&#xff1a;constos7,安装完后&#xff0c;无法使用yum,导致无法安装任何东西&#xff0c; 解决&#xff1a;原因是国外的镜像地址有问题&#xff0c;改为国内的地址。 查看yum的状态 yum repolist 2.执行如下命令&#xff0c;更换yum源 bash <(curl -sSL https://…

使用JavaScrip和HTML搭建一个简单的博客网站系统

搭建一个简单的博客网站系统&#xff0c;我们需要创建几个基本的页面和功能&#xff1a;登录、注册、文章发布等。这里我们先实现一个基础版本&#xff0c;包括用户登录、注册以及文章发布的功能。由于这是一个简化版的示例&#xff0c;我们将所有逻辑集成在一个HTML文件中&…

跨域 Cookie 共享

跨域请求经常遇到需要携带 cookie 的场景&#xff0c;为了确保跨域请求能够携带用户的认证信息或其他状态&#xff0c;浏览器提供了 withCredentials 这个属性。 如何在 Axios 中使用 withCredentials 为了在跨域请求中携带 cookie&#xff0c;需要在 Axios 配置中设置 withCr…