Uniapp_app端使用重力感应实现横屏竖屏自动切换

1、进入页面默认是竖屏当手机横着的时候页面也跟着横着

进入页面开启定时器调用相关api去触发横屏竖屏，主要核心代码都在onShow()里面和onHide()里

<template>
<view class="monitor">
	<u-no-network></u-no-network>
	<web-view :src="url" v-if="url" :webview-styles="webviewStyles"></web-view>
</view>
</template>

<script>
	let watchScheen;
	import {
		getProjectHref
	} 
	from '@/api/api.js'
	
	export default {
		data() {
			return {
				url:'',
				webviewStyles:{
					progress:{
						background:'#FF3333',
					},
				},
			}
		},
		
		watch: {
			projectInfo(newVal,oldVal) {
				this.init();
			}
		},
		computed:{
			// 项目详情
			projectInfo(){
				return this.$store.state.projectInfo || {}
			},
		},
		onShow() {
			// 进入web-view页面
			// unlockOrientation => 解锁
			// lockOrientation => 锁定
			// "portrait-primary", //可选，字符串类型，支持竖屏
			// "portrait-secondary", //可选，字符串类型，支持反向竖屏
			// "landscape-primary", //可选，字符串类型，支持横屏
			// "landscape-secondary" //可选，字符串类型，支持反向横屏
			// #ifdef APP-PLUS
			plus.screen.unlockOrientation('portrait-primary');
			/* 5+环境屏幕旋转 */
			watchScheen = setInterval(()=>{
				// 屏幕方向数值： HOME键在右, 0 - 竖屏； 90 - 横屏；  HOME'键在左, 180 - 反向竖屏； -90 - 反向横屏;
				let c = plus.navigator.getOrientation();
				if(c == 0){
					console.log('竖屏',c)
					plus.screen.lockOrientation('portrait-primary'); //锁定竖屏
					plus.navigator.setStatusBarStyle('dark');
					plus.screen.unlockOrientation();
					uni.showTabBar()
				} else if(c == 180){
					console.log('反向竖屏',c)
					plus.screen.lockOrientation('portrait-secondary'); //锁定横屏
					plus.navigator.setStatusBarStyle('dark');
					plus.screen.unlockOrientation();
					uni.hideTabBar()
				} else if(c == -90){
					console.log('反向横屏',c)
					plus.screen.lockOrientation('landscape-secondary'); //锁定反向横屏
					plus.navigator.setStatusBarStyle('dark');
					plus.screen.unlockOrientation();
					uni.hideTabBar()
				} else {
					console.log('横屏',c)
					plus.screen.lockOrientation('landscape-primary'); //锁定反向横屏
					plus.navigator.setStatusBarStyle('dark');
					plus.screen.unlockOrientation();
					uni.hideTabBar()
				}
			},200)
			
			// #endif
			uni.setNavigationBarTitle({
				title:"监控"
			})
			this.init()
		},
		
		onHide() {
			clearInterval(watchScheen)
			// #ifdef APP-PLUS
			/* 5+环境锁定屏幕方向 */
			plus.screen.lockOrientation('portrait-primary'); //锁定
			// #endif
		},
		
		methods:{
			init(){
				uni.showLoading({
					title:"加载中..."
				})
				getProjectHref({
					projectId:this.projectInfo.id,
					hyperLinkAddressType :2
				}).then(res=>{
					if(res){
						this.url = this.$u.trim(res.hyperLinkAddress)
						console.log(this.url);
						// #ifdef APP-PLUS
						let timer = setInterval(()=>{
							uni.setNavigationBarTitle({
								title:"监控"
							})
						},300)
						setTimeout(()=>{
							uni.hideLoading()
							clearInterval(timer)
							timer = null
							var currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
							var wv = currentWebview.children()[0]
							wv.setStyle({
								scalable:true,
							})
						},1000*3)
						// #endif
						uni.hideLoading()
					}else{
						this.url = ''
						uni.hideLoading()
						this.utils.toast("此项目暂未配置超链接")
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	iframe {
		background-color: #111934;
	}
</style>

2、调用重力感应相关api还要在pages.json中添加如下配置

uniapp文档中screenOrientation地址

"globalStyle": {
		"backgroundColor": "#F8F8F8",
		"navigationBarBackgroundColor": "#F8F8F8",
		"navigationBarTextStyle": "white", // 状态栏字体为白色，只能为 white-白色，black-黑色 二选一
		"pageOrientation": "auto" //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
	},
	"app-plus": {
		"screenOrientation": [
			"portrait-primary",     //可选，字符串类型，支持竖屏
			"portrait-secondary",   //可选，字符串类型，支持反向竖屏
			"landscape-primary",    //可选，字符串类型，支持横屏
			"landscape-secondary"   //可选，字符串类型，支持反向横屏
		],
		"background":"#111934"
	},

因为我是开发app和小程序一起的，小程序主要的配置是在page.json里面添加这些属性，只开发小程序只需要加globalStyle中的pageOrientation属性。如果开发的是app端则要添加app-plus中的相关配置。

3、App端配置找到manifest.json文件找到源码视图添加如下配置

//app-plus->screenOrientation
/* ios横屏配置 */
"screenOrientation" : [
   "portrait-primary", //可选，字符串类型，支持竖屏
   "portrait-secondary", //可选，字符串类型，支持反向竖屏
   "landscape-primary", //可选，字符串类型，支持横屏
   "landscape-secondary" //可选，字符串类型，支持反向横屏
],

打包部署测试后发现Android和ios都能正常旋转，但是后面测试发现在ios16版本以上会出现会横屏但是旋转手机竖屏回不来，只有ios16(苹果最新版)版本以上有这个问题在需要在配置中添加"flexible": true,完美解决。

效果截图如下：