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)
      }
    }
  }
}
相关推荐
小徐_233319 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮1 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw51 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !1 天前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918411 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张1 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张2 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬2 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106322 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq2 天前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app