uni-app 全屏加横竖屏切换-非APP

发布于 1周前 作者 wuwangju 来自 Uni-App

uni-app 全屏加横竖屏切换-非APP

某个界面可以全屏展示亦可退出全屏，可以旋转

Harmonyos Next教程
3 回复

公司承接项目外包开发、双端（Android，iOS）原生插件开发。
为什么选择我们： 1、1000+项目开发积累，数百种商业模式开发经验，更懂您的需求，沟通无障碍。 2、一年免费技术保障，系统故障或被攻击，2小时快速响应提供解决方案落地。 3、软件开发源码定制工厂，去中间商降低成本，提高软件开发需求沟通效率。 4、纯原生开发，拒绝模板和封装系统，随时更新迭代，增加功能，无需重做系统。 5、APP定制包办软件著作权申请，30天内保证拿到软著证书，知识产权受保护。 6、中软云科技导入严谨的项目管理系统，确保项目准时交付，快速抢占市场商机。 7、软件开发费、维护费、第三方各种费用公开透明，不花冤枉钱，不玩套路。
已有大量双端插件、App、小程序、公众号、PC、移动端、游戏等案例。
行业开发经验：银行、医疗、直播、电商、教育、旅游、餐饮、分销、微商、物联网、零售等
商务QQ：1559653449 商务微信：fan-rising
7x24小时在线，欢迎咨询了解


全屏加横竖屏切换-非APP

在处理uni-app中的全屏显示以及横竖屏切换功能时，我们可以通过配置页面样式和监听设备方向变化来实现。虽然你提到的是“非APP”环境，通常指的是在小程序或H5页面中运行，但原理和方法是类似的。以下是一个基本的实现示例，主要集中在H5和小程序环境中，因为这两个环境较为通用。

1. 全屏显示

在H5中，全屏显示通常是通过JavaScript的Fullscreen API来实现的。在uni-app中，我们可以通过在mounted生命周期钩子中添加全屏请求代码。

export default {
  mounted() {
    if (this.$mp.page.options.platform !== 'app-plus') { // 确保在非APP环境
      if (document.body.requestFullscreen) {
        document.body.requestFullscreen();
      } else if (document.body.mozRequestFullScreen) { // Firefox
        document.body.mozRequestFullScreen();
      } else if (document.body.webkitRequestFullscreen) { // Chrome, Safari & Opera
        document.body.webkitRequestFullscreen();
      } else if (document.body.msRequestFullscreen) { // IE/Edge
        document.body.msRequestFullscreen();
      }
    }
  }
}

2. 横竖屏切换

在H5和小程序中，监听屏幕方向变化通常使用window.addEventListener来监听resize或orientationchange事件。在uni-app中，我们可以在mounted和beforeDestroy生命周期钩子中添加和移除监听器。

export default {
  data() {
    return {
      isLandscape: false
    };
  },
  mounted() {
    if (this.$mp.page.options.platform !== 'app-plus') {
      window.addEventListener('resize', this.handleOrientationChange);
      window.addEventListener('orientationchange', this.handleOrientationChange);
      this.handleOrientationChange(); // 初始化时立即检测一次
    }
  },
  beforeDestroy() {
    if (this.$mp.page.options.platform !== 'app-plus') {
      window.removeEventListener('resize', this.handleOrientationChange);
      window.removeEventListener('orientationchange', this.handleOrientationChange);
    }
  },
  methods: {
    handleOrientationChange() {
      this.isLandscape = window.innerWidth > window.innerHeight;
      console.log('Screen Orientation:', this.isLandscape ? 'Landscape' : 'Portrait');
    }
  }
}

以上代码展示了如何在非APP环境下实现全屏显示和横竖屏切换的基本方法。全屏显示部分通过Fullscreen API请求全屏，而横竖屏切换则通过监听窗口大小变化来判断当前屏幕方向。注意，这些代码在非APP环境下（如H5和小程序）运行，且需要针对小程序做额外的适配，因为小程序对全屏和屏幕方向的控制可能有所不同。

回到顶部