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为单位的;如果用的是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)
      }
    }
  }
}
相关推荐
2501_916007476 小时前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone
砺能8 小时前
uniapp生成的app添加操作日志
前端·uni-app
2501_9159214312 小时前
iOS 应用代上架流程,多工具组合与使用 开心上架 跨平台自动化上传指南
android·ios·小程序·uni-app·自动化·cocoa·iphone
知识分享小能手12 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
雪芽蓝域zzs12 小时前
uniapp 修改android包名
android·uni-app
芒果沙冰哟12 小时前
uniapp canvas实现手写签字功能(包括重签,撤回等按钮)
uni-app
爱折腾的小码农12 小时前
uni-app 小程序开发避坑:诡异的 `module ‘...‘ is not defined` 错误与我的解决方案
uni-app
Q_Q196328847512 小时前
python+uniapp基于微信小程序的助眠小程序
spring boot·python·小程序·django·flask·uni-app·node.js
不知名的前端专家13 小时前
UniApp USB存储设备U盘操作、读写原生插件
uni-app
coldriversnow14 小时前
uni-app从后端返回的富文本中的视频截取一帧为封面
uni-app