首页 > 电脑专区 > 微信教程 >

小程序横屏怎么做

来源:互联网 2023-02-21 07:48:19 95

小程序是目前的流行,简单快捷,那么,作为开发者的我们,需要尽可能多的了解如何开发好小程序。今天,就来介绍下,如何让小程序横屏。YjS办公区 - 实用经验教程分享!

关于横屏,这里有两种情况:1、进入对应页面后直接横屏;2将手机横过来之后,自动横屏。这里分别介绍下。YjS办公区 - 实用经验教程分享!

工具/原料

  • 小程序开发者工具
  • Windows10操作系统

方法/步骤

  • 1

    双击小程序开发者工具,打开小程序开发者工具,我们可以看到在启动界面,有很多我们之前开发过得小程序列表。YjS办公区 - 实用经验教程分享!

    小程序横屏怎么做YjS办公区 - 实用经验教程分享!

  • 2

    我们选择其中的一个小程序进行测试,该小程序页面较多,内容较丰富,有利于我们演示横屏。YjS办公区 - 实用经验教程分享!

    小程序横屏怎么做YjS办公区 - 实用经验教程分享!

  • 3

    首先看第一种情况,我们找到一个页面,打开该页面的json文件,可以看到,目前里面没有配置任何关于横屏的设置,界面也是竖的。YjS办公区 - 实用经验教程分享!

    小程序横屏怎么做YjS办公区 - 实用经验教程分享!

  • 4

    然后我们在该json文件里,增加一句话【"pageOrientation": "landscape"】,这句话使得只要进入该页面,界面自动横屏,即不需要手机横过来也会强制横屏。YjS办公区 - 实用经验教程分享!

    小程序横屏怎么做YjS办公区 - 实用经验教程分享!

  • 4此文章未经许可获取自百度经验
  • 5

    然后我们看另一个横屏方法,打开全局变量app.json文件,在window里,目前没有看到关于横屏的设置。YjS办公区 - 实用经验教程分享!

    小程序横屏怎么做YjS办公区 - 实用经验教程分享!

  • 6

    在window里面,加入一句话,【"pageOrientation": "auto"】,这句话加入之后,保存下文件,然后可以看到调试工具上方多了一个【旋转】按钮,如图所示,我们点击该按钮后,界面自动横过来了。YjS办公区 - 实用经验教程分享!

    这里设置了全局变量,在手机横过来时,自动旋转所有的页面。然后我们刚才点击的【旋转】按钮,也是模拟手机的旋转功能,故界面横过来了。YjS办公区 - 实用经验教程分享!

    如果觉得有用,记得点赞或投票!YjS办公区 - 实用经验教程分享!

    小程序横屏怎么做YjS办公区 - 实用经验教程分享!

  • 注意事项

    • 需要小程序更新到较新的版本,高于或等于2.4.0。
    • 这里是用开发者工具模拟的,也可用实际手机测试。
    • 不管何种横屏方式,在实际手机中,都需要手机开启自动横屏设置。

    以上方法由办公区教程网摘抄自百度经验可供大家参考!YjS办公区 - 实用经验教程分享!


    标签: 小程序微信

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码