codecamp

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


360小程序 创建快捷方式
360小程序 获取小程序窗口状态
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

360小程序 设计指南

360小程序 运营规范

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }