uniapp启动时禁止横屏

uniapp yekong

在UniApp中禁止应用启动时横屏,可以通过修改manifest.json配置文件以及在App.vueonLaunch生命周期方法中设置来实现。以下是具体的步骤:

  1. 修改manifest.json文件:在manifest.json文件中,找到app-plus节点,然后在其下添加或修改distribute节点,设置orientation["portrait-primary"],这表示应用只允许竖屏模式。

    修改前的manifest.json配置可能没有明确指定orientation,修改后应该如下所示:

    "app-plus": {
      "distribute": {
        "orientation": ["portrait-primary"]
      }
    }
    
  2. App.vue中设置不允许横屏:在App.vueonLaunch生命周期方法中,使用plus.screen.lockOrientation("portrait-primary")方法锁定屏幕方向为竖屏。这需要在条件编译块#ifdef APP-PLUS中进行,以确保只在App平台上执行。

    示例代码如下:

    <script>
    export default {
      onLaunch: function() {
        console.log('App Launch');
        // #ifdef APP-PLUS
        plus.screen.lockOrientation("portrait-primary");
        // #endif
      },
      onShow: function() {
        console.log('App Show');
      },
      onHide: function() {
        console.log('App Hide');
      }
    }
    </script>
    

通过上述两个步骤,可以确保UniApp应用在启动时只能以竖屏模式运行,即使用户尝试将手机横置,应用的界面也不会随之旋转.

喜欢