评论

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

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

1、在project.config.json文件中,“setting”模块中增加配置 "resizable": true

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

这样配置后,就可以让小程序的页面呈现横屏状态,在pc端就是“全屏”状态了(注:这里的全屏并非真的铺满整个电脑桌面,而是占了一大半屏幕的效果),赶紧去试试吧。



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

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


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


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

最后一次编辑于  2020-06-14  
点赞 4
收藏
评论

13 个评论

  • 土壤
    土壤
    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
      1
      回复
  • 王子阳
    王子阳
    2020-09-30

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

    2020-09-30
    赞同 1
    回复
  • if
    if
    星期一 11:01

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

    星期一 11:01
    赞同
    回复
  • 毛
    07-07

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

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

      "resizable": true,

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



    07-07
    赞同
    回复
  • lpf
    lpf
    05-15

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

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

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

    01-27
    赞同
    回复
  • 付
    01-18

    解释写一半是真的烦

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

    更正一点:"resizable": true

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

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

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

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

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

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

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

正在加载...

登录 后发表内容