评论

小程序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 个评论

  • lpf
    lpf
    2021-05-15

    我请教一下,我是第一次用微信开发者工具,加完语句以后,模拟器的样子变了,但是真正微信的小程序,打开以后没有任何变化。怎么能把修改后的结果,应用到真正的小程序上啊?

    2021-05-15
    赞同
    回复
  • 博洛尼整体厨房+全屋定制
    博洛尼整体厨房+全屋定制
    2021-01-27

    我想知道电脑看微信小程序怎么放大,看你们说的一脸懵,听都听不懂。。好尴尬

    2021-01-27
    赞同
    回复
  • live威
    live威
    2021-01-11

    更正一点:"resizable": true

    要设置成跟window和pages同一级才生效

    2021-01-11
    赞同
    回复 1
    • 请输入昵称
      请输入昵称
      2021-07-09
      新手,可以详细一点吗?不理解同一级的具体意思

      这种东西会的人不会来问的,来问的都是新手和不会的,所以是不是详细一点,不然就和没说一样
      2021-07-09
      回复
  • 刘栋
    刘栋
    2020-12-17

    我看官方的小程序示例里,  "resizable": true 是直接写在app.json里的,试了一下,添加这条后,PC上的小程序窗口就可以放大缩小了,只是没有最大化的图标。

    2020-12-17
    赞同
    回复 5
    • 付
      2021-01-18
      怎么弄的啊,我添加了但是没用
      2021-01-18
      回复
    • 刘栋
      刘栋
      2021-02-07回复
      现在app.json添加这一条,然后需要进到PC版微信里打开小程序,开发工具上是看不出来的。
      2021-02-07
      回复
    • 刘栋
      刘栋
      2021-02-07回复刘栋
      现在开发版预览时候也已经可以显示最大化图标了。
      2021-02-07
      回复
    • 请输入昵称
      请输入昵称
      2021-07-09
      你提到的“官方的小程序实例”哪儿可以找到?你是在哪里看的?可以给个链接吗?谢谢
      2021-07-09
      回复
    • 来财
      来财
      2022-12-02
      需要发版吗?还是体验版也行?我加了配置也不行没反应。
      2022-12-02
      回复
  • yaping🐟
    yaping🐟
    2020-10-27

    请问在开发者工具点预览,如果是扫二维码手机预览,手机端也变横屏了,PC端预览效果还是竖屏,右上角也没出现最大化图标,是要发布到体验版才能看到?开发者工具不生效?

    2020-10-27
    赞同
    回复 2
    • 哄哄
      哄哄
      2020-10-29
      刚试了下,现在确实pc端不行了。之前是好的,后来pc端微信升级了几次版本,现在不行了,严重怀疑是版本的问题。等看后期新版本pc端微信会不会修复这个问题吧
      2020-10-29
      1
      回复
    • 流风
      流风
      2021-06-15
      确实不行了,我还特意用了老版本的微信,可以横屏,现在新的版本不行了。
      2021-06-15
      回复
  • 冰清玉洁
    冰清玉洁
    2020-07-18

    我是初中生,电脑型号和您相同,您说的具体怎么操作呢,您有时间的话能进一步讲一下吗,谢谢您嘞

    2020-07-18
    赞同
    回复 1
    • 哄哄
      哄哄
      2020-07-18
      先下载个微信开发者工具,然后在目录文件中找到上面说的各种文件,按上面说的配置好就行了哈。小朋友加油哦~
      2020-07-18
      回复
  • 源
    2020-07-11

    你好,我想问一下 project.config.json 和 app.json 路径在哪里呀,我win10电脑,微信也是官网下的,可就是找不到这些文件

    2020-07-11
    赞同
    回复 2
    • 哄哄
      哄哄
      2020-07-11
      微信开发者工具-编辑器   使劲儿往下拉。。。
      2020-07-11
      1
      回复
    • 源
      2020-07-11回复哄哄
      原来是要下载工具呢,怪不得找不到,,,
      2020-07-11
      回复
  • 老张
    老张
    2020-06-16

    按此攻略,对我的电脑无效,MAC,是因为mac吗?

    2020-06-16
    赞同
    回复 1
    • 哄哄
      哄哄
      2020-06-16
      mac没试过,我的是win10系统
      2020-06-16
      回复

正在加载...

登录 后发表内容