评论

小程序pc端全屏(小程序页面横竖屏)的代码实现

在小程序中实现横竖屏的方法,以及pc端全屏显示的解决方案,还有发现的一个小问题。

1、在app.json文件中,与“window”同级别的地方增加配置 "resizable": true;

2、在app.json文件中,“window”模块中增加"pageOrientation":"landscape"。

这样配置后,就可以让小程序的页面呈现横屏状态,然后用户只需要点击右上角的全屏按钮就可以全屏了,赶紧去试试吧。



3、如果有的页面不想横屏显示的话,只需要在这个页面下的json文件中加上配置"pageOrientation":"portrait"即可。

这样配置后,只有页面json文件中配置了portrait的才会竖屏显示,其他的就都默认横屏显示了。


4、发现的问题:如果全局window设为了landscape,而某个页面,比如叫A页面中的json文件中单独设置了portrait(竖屏显示),假如你恰好在A页面加了激励式视频广告,那么你就会发现本来事竖屏显示的A页面,在点击观看激励式视频广告后返回来的时候就被强制显示为横屏了。


以上是我在项目中时间pc端全屏和小程序横竖屏显示配置时的总结和发现的问题,希望能给有需要的人带来帮助。


最后一次编辑于  2023-04-25  
点赞 7
收藏
评论

18 个评论

  • 土壤
    土壤
    2020-08-17

    本地目录是什么,按照你的操作,设置了还是不能全屏,随便新建一个目录都有你说的 project.config.json 和 app.json 文件,关键是保存了放哪里。或者有需要对应目录打开才能实现小程序全屏

    2020-08-17
    赞同 2
    回复 2
    • 烤不死的带鱼
      烤不死的带鱼
      2020-08-29
      用的是微信开发者工具吗?是的话,打开后就在编辑器的目录那块往下滑就对了,文章里说的很清楚了啊。
      2020-08-29
      回复
    • 無與倫比
      無與倫比
      2020-10-11回复烤不死的带鱼
      人家是问普通使用者,如何把微信电脑版小程序实现全屏。
      2020-10-11
      2
      回复
  • null&null
    null&null
    2022-12-02

    我配置都加了,除了横屏的可以,但是无法全屏,我想要竖屏的全屏。最好有个窗口化按钮

    2022-12-02
    赞同 1
    回复 1
    • 阿茄
      阿茄
      2023-03-02
      请问您问题解决了吗?
      2023-03-02
      回复
  • 毛
    2021-07-07

    试了很多次,后来才发现,需要将resizable参数与page和window同一级才可以,如下

    "pages": ["pages/home/home"],

      "resizable": true,

      "window": {"backgroundTextStyle": "dark"}



    2021-07-07
    赞同 1
    回复
  • 付
    2021-01-18

    解释写一半是真的烦

    2021-01-18
    赞同 1
    回复 2
    • 付
      2021-01-18
      就写一部分其他全要别人自己蒙
      2021-01-18
      1
      回复
    • 请输入昵称
      请输入昵称
      2021-07-09
      会了吗?我第一次用,搞了半天没好
      2021-07-09
      回复
  • 王子阳
    王子阳
    2020-09-30

    在哪里更改这些设置啊,我的都是新建了一个小程序

    2020-09-30
    赞同 1
    回复
  • c
    c
    2023-10-20

    横屏微信小游戏 点击->在电脑上打开 无任何反应?点击也没有收到 wx.onHandoff(function listener)回调消息,检测是否符合接力->收到errno:102,errMsg:checkHandoffEnabled:fail:access denide,是需要设置什么?竖版的貌似什么都需要设置,直接会打开?

    2023-10-20
    赞同
    回复 1
    • 烤不死的带鱼
      烤不死的带鱼
      03-15
      这里说的是微信小程序,不涉及微信小游戏哈
      03-15
      回复
  • 洪骏
    洪骏
    2023-07-19

    用的什么组件库实现的啊?有没现成的支持的组件库啊,做界面排版和布局太麻烦了

    2023-07-19
    赞同
    回复
  • 清火
    清火
    2023-03-24

    app.json 里面配置"resizable": true,


    2023-03-24
    赞同
    回复
  • 浪子心声
    浪子心声
    2022-11-27

    请问手机上全屏显示如何实现?谢谢

    2022-11-27
    赞同
    回复
  • if
    if
    2021-08-02

    这个只是横屏呀,而且只在手机生效,但是小程序在PC端还是不能全屏。

    2021-08-02
    赞同
    回复

正在加载...

登录 后发表内容