360小程序 大小屏交互
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()设置每个页面的固定窗口大小。