视频直播app开发网站,什么样建网站,东营网站优化,电商网站支付接口1、进入页面默认是竖屏当手机横着的时候页面也跟着横着 进入页面开启定时器调用相关api去触发横屏竖屏#xff0c;主要核心代码都在onShow()里面和onHide()里 template
view classmonitoru-no-network/u-no-networkweb-view …1、进入页面默认是竖屏当手机横着的时候页面也跟着横着 进入页面开启定时器调用相关api去触发横屏竖屏主要核心代码都在onShow()里面和onHide()里 template
view classmonitoru-no-network/u-no-networkweb-view :srcurl v-ifurl :webview-styleswebviewStyles/web-view
/view
/templatescriptlet watchScheen;import {getProjectHref} from /api/api.jsexport 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-PLUSplus.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)// #endifuni.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-PLUSlet timer setInterval((){uni.setNavigationBarTitle({title:监控})},300)setTimeout((){uni.hideLoading()clearInterval(timer)timer nullvar currentWebview this.$mp.page.$getAppWebview() //获取当前页面的webview对象var wv currentWebview.children()[0]wv.setStyle({scalable:true,})},1000*3)// #endifuni.hideLoading()}else{this.url uni.hideLoading()this.utils.toast(此项目暂未配置超链接)}})}}}
/scriptstyle langscss scopediframe {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属性 3、App端配置找到manifest.json文件找到源码视图添加如下配置
//app-plus-screenOrientation
/* ios横屏配置 */
screenOrientation : [portrait-primary, //可选字符串类型支持竖屏portrait-secondary, //可选字符串类型支持反向竖屏landscape-primary, //可选字符串类型支持横屏landscape-secondary //可选字符串类型支持反向横屏
],打包部署测试后发现Android和ios都能正常旋转但是后面测试发现在ios16版本以上会出现会横屏但是旋转手机竖屏回不来只有ios16(苹果最新版)版本以上有这个问题在需要在配置中添加flexible: true,完美解决。 效果截图如下
