360小程序 大小屏交互

2019-07-08 13:09 更新

360小程序支持大小屏交互,

全局配置大小屏


通过小程序根目录下的 app.json 文件下,Windows配置用来配置小程序大小屏样式。文件内容为一个 JSON 对象,有以下属性:

属性 类型 说明 默认值 是否必填
enableLargeWindow boolean 是否全部页面支持切换至大窗口,支持则在窗口顶部显示切换按钮 false
showRefreshButton boolean 是否显示刷新按钮,false为不显示,true为显示 false
windowWidth number 默认大窗口的尺寸-宽度 1138
windowHeight number 默认大窗口的尺寸-高度 640
minWindowWidth number 大窗口最小尺寸-宽度 400
minWindowHeight number 大窗口最小尺寸-高度 400
enableResize boolean 是否支持用户手动拖动窗口边线改变窗口大小 true

代码示例

{
    "window": {
        "enableLargeWindow": false,
        "showRefreshButton": false,
        "windowWidth": 1138,
        "windowHeight": 640,
        "minWindowWidth": 400,
        "minWindowHeight": 400,
        "enableResize": true
    }
}

通过接口调用大小屏


除了通过全局配置文件配置显示大小屏切换方式外,还可通过调用接口的方式实现大小屏的切换。

qihoo.SetScreenState()

调用qihoo.SetScreenState(true, false),将当前侧边栏小屏切换为大屏,该页面只支持大屏样式,不显示大小屏切换按钮

调用qihoo.SetScreenState(true, true),将当前侧边栏小屏切换为大屏,该页面需要同时适配大小屏,显示大小屏切换按钮,点击按钮时在大小屏之间相互切换。

调用qihoo.SetScreenState(false, true),将当前侧边栏大屏切换为小屏,该页面需要同时适配大小屏,显示大小屏切换按钮,点击按钮时在大小屏之间相互切换。

浏览器记住用户操作逻辑:

为方便用户使用,浏览器会记住用户主动切换的窗口大小。

如小程序默认小窗口为小窗口,用户使用过程中,手动点击窗口顶部切换按钮将窗口切换为独立大窗口。关闭窗口时,浏览器会记住当前窗口大小,下次打开小程序时,会默认打开同样大小的新窗口。
如果只有部分页面支持大窗口,通过调用js接口切换为大小窗口,浏览器不会记住当前窗口大小,需要开发者通过js接口保证窗口大小。 可通过生命周期回调函数window.onload()、window.nAppShow()、window.onAppHide()配合qihoo.SetScreenState()设置每个页面的固定窗口大小。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号