目录

窗口系统

Summer框架实现了基于原生技术的多窗口机制，避免了HTML5中单页应用（SPA）的缺陷，又保留了交互的流畅性。在开发层面，开发人员可以自由的控制窗口的打开、关闭、回调等。多窗口机制从客观上对复杂页面逻辑提供了代码分离机制，将一个复杂的业务场景分离成几个独立模块（Frame），每个模块都有自己的视图（HTML）、业务逻辑（JavaScript），也有自己的数据和存储空间，各Frame之间还可以相互通信，充分体现了代码隔离原则、职责单一原则，同时便于后期的维护和升级。

Window

summer.openWin()

打开window

若 window 已存在，则不会再次打开，如果参数 isreload 为 true 时，页面会刷新，但是该 window 里面已经打开的 frame 等不会移除

若当前正在进行 openWin、closeWin 等带动画过渡的 window 操作，调用此方法会失效

语法:

  1. summer.openWin({params})

参数：

  • id：
    • 类型：字符串
    • 默认值：无
    • 描述：（必选项）window 名字，不能为空字符串
  • appid:
    • 类型：字符串
    • 默认值：无
    • 描述：子应用标识（子应用的id），用于打开指定子应用
  • url：
    • 类型：字符串
    • 默认值：无
    • 描述：页面地址，可以为本地文件路径，支持相对路径和绝对路径，也可以为远程地址即http(s)互联网网址路径
  • isKeep：
    • 类型：布尔型
    • 默认值：true
    • 描述：打开一个新win的同时，老的win要不要关闭，默认为true
  • create
    • 类型：布尔型
    • 默认值：true
    • 描述：如果设置为true，打开一个新win时，会等页面加载完成才显示，如果设置为false，会保留原生header，直接打开页面，然后再加载页面内容。默认是为ture
  • show
    • 类型：布尔型
    • 默认值：true
    • 描述：当create为false时，此时设置show值无效。当create为true时，如果设置show为true，在页面加载完后直接显示，如果设置show为false，则页面不显示，需要手动调用summer.showWin()来显示。默认为true
  • pageParam：
    • 类型：JSON 对象
    • 默认值：无
    • 描述：（可选项）页面参数，新页面中可以通过 summer.pageParam 获取

  • type：

    • 类型：字符串
    • 默认值：无
    • 可选值：externalLink，actionBar，tabbar，speechWin（稍后更新），waveSpeech
    • 描述：（可选项）打开Window类型。

    实例1：
    externalLink:通常用于打开外部链接，链接在跳转到二级以上页面时，导航栏出现关闭按钮。

    1. summer.openWin({
    2.       id : 'otherHome',
    3.       url : 'http://www.baidu.com',
    4.       type: "externalLink",//打开外链接，页面跳转二级以上，导航栏出现关闭按钮
    5.       create: false,
    6.       title: "自定义title",
    7.       backText:"返回",//界面上的返回
    8.       closeText:"关闭",//界面上的关闭
    9.       closeImage:"img/back_normal.png",// 界面上关闭按钮图片
    10.       image: "img/back.png", // 在www目录下的图片位置，路径随意放置，返回按钮图片
    11.       titleColor: "#000000", //标题、返回、关闭的字体颜色，注意必须是6位数的颜色值。（3位数颜色值会不正常）
    12.       navigationbgColor: "#ffffff" //导航栏 的背景色，注意必须是6位数的颜色值。（3位数颜色值会不正常）
    13. });

    实例2：
    actionBar:用于给新页面添加原生导航栏，便于页面跳转时更流畅，原生导航栏样式由anctionBar对象决定。

    1. summer.openWin({
    2.   id:'otherHome',
    3.   url:'html/main.html',
    4.   type: "actionBar",
    5.   create: false, //设置保留原生header
    6.   actionBar: {
    7.       title: "TA的信息",
    8.       titleColor: "#333333", //注意必须是6位数的颜色值。（3位数颜色值会不正常）
    9.       backgroundColor: "#ffffff",
    10.       bottomLineColor: "#ffffff",
    11.       leftItem:{
    12.           image: "img/back.png",
    13.           method:"", //返回按钮自定义事件，不传方法时默认点击返回后关闭当前页面，也可在打开的window中自定义事件
    14.           text:"返回按钮文字",
    15.           textColor:"#000000"  //返回文字颜色，注意必须是6位数的颜色值。（3位数颜色值会不正常）
    16.       },
    17.       rightItems:[{
    18.           type:"image",
    19.           image:"img/back.png",
    20.           method:"" //在打开的window中自定义事件
    21.       },{
    22.           type:"text",
    23.           text:"文字",
    24.           textColor:"#333333", //文字颜色，注意必须是6位数的颜色值。（3位数颜色值会不正常）
    25.           method:"" //在打开的window中自定义事件
    26.       }]
    27.   }
    28. });

    实例3：
    tabBar：用于导航栏和tabBar都是原生的情况，可根据theme.json，application.json（暂未开放）文件定制原生的导航栏和tabBar。

    1. summer.openWin({
    2.       id:'otherHome',
    3.       url:'html/main.html',
    4.       type: "tabbar",
    5.       create: false,
    6.       isKeep: false
    7. });

    实例4：
    waveSpeech:语音助手专用，增加两参数 waveBgColor波浪样式，speechCallback成功回调。注意：必须依赖讯飞插件。

    1.   summer.openWin({
    2.       id : "qun",
    3.       url : "comps/robot/index.html",
    4.       addBackListener : "true",
    5.       create : "false",
    6.       waveBgColor : "#f4f4f4",
    7.       speechCallback : "succussCallback()",
    8.       addKeyBoardListener : "addKey()",
    9.       type : "waveSpeech",
    10.       actionBar : {
    11.           title : "沫沫",
    12.           titleColor : "",
    13.           backgroundColor : "",
    14.           leftItem : {
    15.               image : "",
    16.               method : "openWaker()"
    17.           },
    18.           rightItems : [{
    19.               type : "image",
    20.               image : "comps/robot/img/speak.png",
    21.               method : "changeIcon()"
    22.           }]
    23.       },
    24.   });
  • addBackListener：
    • 类型：字符串
    • 默认值：无
    • 描述：（可选项）监听所打开页面的返回键，若值设为”true”，则会去调用所打开页面的keyBack函数（该函数需用户自己定义，函数名必须为keyBack，且必须定义成全局函数，不能定义在summerready中），如果需要关闭页面，可在keyBack函数中调用summer.closeWin()
      实例1
      1. //在当前index页面中去打开main页面，则需要在main页面中定义keyBack方法
      2. summer.openWin({
      3.     id:"main",
      4.     url:"htmlmain.html",
      5.     "addBackListener":"true"
      6. });
      7. //在main页面中定义全局的keyBack函数
      8. function keyBack(){
      9.     summer.closeWin();
      10. }
      实例2
      1. //打开主页面
      2. summer.openWin({
      3.     id:"main",
      4.     url:"htmlmain.html",
      5.     "addBackListener":"true"
      6. });
      7. //在全局的keyBack函数中判断是否连续两次点击返回键，
      8. var turn = 0;
      9. function keyBack(){
      10.     turn++;
      11.     if(turn==2){
      12.         clearInterval(intervalID);
      13.         summer.exitApp()
      14.     }else{
      15.         summer.toast({"msg":"再点击一次退出!"});
      16.     }
      17.     var intervalID = setInterval(function() {
      18.         clearInterval(intervalID);
      19.         turn=0;
      20.     }, 3000);
      21. }
  • bounces：
    • 类型：布尔型
    • 默认值：若在 config.xml 里面配置了pageBounce，则默认值为配置的值，否则为 false
    • 描述：（可选项）页面是否弹动
  • bgColor：
    • 类型：字符串
    • 默认值：若在 config.xml 里面配置了 windowBackground，则默认值为配置的值，否则透明
    • 描述：（可选项）背景色，支持图片和颜色，格式为 #ffffff；（必须是6位）图片路径支持相对路径
  • isreload：
    • 类型：布尔型
    • 默认值：false
    • 描述：（可选项）页面已经打开时，是否重新加载页面，重新加载页面后 summerready 方法将会被执行
  • windowSoftInputMode：
    • 类型：字符串
    • 默认值：auto
    • 描述：（可选项）当键盘弹出时，输入框被盖住时，当前页面的调整方式，详见键盘弹出页面调整方式常量，config.xml中说明。
  • fullScreen：
    • 类型：布尔型
    • 默认值：false
    • 描述：（可选项）打开的window是否全屏显示。如果没有该参数，则默认不全屏。
  • statusBarAppearance：
    • 类型：布尔型
    • 默认值：true
    • 描述：（可选项）打开的window是否显示手机的状态条。如果没有该参数，则默认显示状态条。
    • 组合：fullScreen和statusBarAppearance的组合
fullScreen为true fullScreen为false
statusBarAppearance为true 状态条和导航栏会重叠，需通过summer.fixedStatusBar方法调整导航栏的位置达到正确效果 非全屏有状态条
statusBarAppearance为false 需通过summer.fixStatusBar方法调整导航栏的位置达到正确效果 错误用法
  • statusBarStyle：
    • 类型：字符串型
    • 默认值：无
    • 描述：（可选项）设置打开window的状态条的样式，取值为”light” 或 “dark”。如果没有该参数，则取系统默认值。
  • orientation：
    • 类型：字符串型
    • 默认值： portrait
    • 描述：（可选项）设置打开window以横屏或竖屏显示，取值为”landscape”（横屏） 或 “portrait”（竖屏）。如果没有该参数，则取系统默认值。
  • useWKWebView：(暂不支持)
    • 类型：布尔
    • 默认值：false
    • 描述：（可选项）是否使用WKWebView来加载页面，只支持iOS8.0及以上系统。WKWebView是iOS8新出的WebKit库中的控件，相比于以前的UIWebView，在性能和功能等方面都有所提升。注意使用WKWebView后，localStorage可能不能和其它未使用WKWebView加载的页面通用。
  • scrollToTop：(暂不支持)
    • 类型：布尔
    • 默认值：false
    • 描述：（可选项）当点击状态栏，页面是否滚动到顶部。若当前屏幕上不止一个页面的 scrollToTop 属性为 true，则所有的都不会起作用。只 iOS 有效
  • vScrollBarEnabled：
    • 类型：布尔
    • 默认值：true
    • 描述：（可选项）是否显示垂直滚动条
  • hScrollBarEnabled：(暂不支持)
    • 类型：布尔
    • 默认值：true
    • 描述：（可选项）是否显示水平滚动条
  • scaleEnabled：(暂不支持)
    • 类型：布尔
    • 默认值：false
    • 描述：（可选项）页面是否可以缩放
  • slidBackEnabled：(暂不支持)
    • 类型：布尔
    • 默认值：true
    • 描述：（可选项）是否支持滑动返回。iOS7.0及以上系统中，在新打开的页面中向右滑动，可以返回到上一个页面，该字段只 iOS 有效
  • slidBackType：(暂不支持)
    • 类型：字符串
    • 默认值：full
    • 描述：（可选项）当支持滑动返回时，设置手指在页面右滑的有效作用区域。取值范围（full:整个页面范围都可以右滑返回，edge:在页面左边缘右滑才可以返回），该字段只iOS有效
  • animation：
    • 类型：JSON 对象
    • 默认值：无
    • 描述：（可选项）动画参数，不传时使用默认动画movein，type：动画类型，subType：动画子类型。
    • 内部字段：
      1. {
      2.     type:"none", //动画类型（详见动画类型常量）
      3.     subType:"from_right", //动画子类型（详见动画子类型常量）
      4.     duration:300 //动画过渡时间，默认300毫秒
      5. }
    • 使用范围
      openFrame
      openWindow
      openFrameGroup
      closeWin
      closeFrame
      closeToWin
    • 动画类型：
      打开 window 或打开 widget 时的动画类型，Android 部分动画不支持，字符串类型
      取值范围：
      none //无动画效果
      push //新视图将旧视图推开
      movein //新视图移到旧视图上面
      fade //交叉淡化过渡（不支持过渡方向）
      flip //翻转效果
      reveal //将旧视图移开,显示下面的新视图
      ripple //滴水效果（不支持过渡方向）
      curl //向上翻一页
      un_curl //向下翻一页
      suck //收缩效果（不支持过渡方向）
      cube //立方体翻滚效果
      可用性：
      iOS系统，Android系统（flip，ripple，curl，un_curl，suck，cube 类型不支持）
    • 动画子类型：
      动画子类型，字符串类型
      部分动画如 fade 可能没有过渡方向
      取值范围：
      from_right //从右边开始动画
      from_left //从左边开始动画
      from_top //从顶部开始动画
      from_bottom //从底部开始动画
      可用性：
      iOS系统，Android系统（仅限于from_right，from_left）
  • progress：(暂不支持)
    • 类型：JSON 对象
    • 默认值：无
    • 描述：（可选项）页面加载进度配置信息，若不传则无加载进度效果
    • 内部字段：
      1. {
      2.     type:"", //加载进度效果类型，默认值为 default，取值范围为 default|page，default 等同于 showProgress 参数效果；为 page 时，进度效果为仿浏览器类型，固定在页面的顶部
      3.     title:"", //type 为 default 时显示的加载框标题
      4.     text:"", //type 为 default 时显示的加载框内容
      5.     color:"" //type 为 page 时进度条的颜色，默认值为 #45C01A，支持#FFFFFF, rgb(255,255,255), rgba(255,255,255,1.0)等格式
      6. }
  • delay：(暂不支持)
    • 类型：数字
    • 默认值：0
    • 描述：（可选项）window 显示延迟时间，适用于将被打开的 window 中可能需要打开有耗时操作的模块时，可延迟 window 展示到屏幕的时间，保持 UI 的整体性
  • allowEdit：(暂不支持)
    • 类型：布尔
    • 默认值：false
    • 描述：（可选项）是否允许长按页面时弹出选择菜单

示例代码：

  1. summer.openWin({
  2.     id: 'page1',
  3.     url: 'html/page1.html',
  4.     pageParam: {
  5.         name: 'test'
  6.     }
  7. });
  9. //在另一个页面（page1.html）中可以通过summer.pageParam.name获取name的值
  10. var name = summer.pageParam.name; //pageParam和openWin时的参数key相同

补充说明：
iOS系统，Android系统

summer.closeWin()

关闭指定 window，无参数时候关闭当前 window。

语法:

  1. summer.closeWin({params})

参数：

  • id:
    • 类型：字符串
    • 默认值：无
    • 描述：window的id
  • animation：(暂不支持)
    • 类型：JSON 对象
    • 默认值：无
    • 描述：（可选项）动画参数，不传时使用默认动画，type：动画类型，subType：动画子类型。
    • 注：关闭页面时的动画和打开页面时的动画相反。
    • 内部字段:
      1. {
      2.     type:"fade", //动画类型（详见动画类型常量）
      3.     subType:"from_right", //动画子类型（详见动画子类型常量）
      4.     duration:300 //动画过渡时间，默认300毫秒
      5. }

示例代码：

  1. summer.closeWin({
  2.     id: 'root'
  3. });

补充说明：
无

summer.closeToWin()

关闭到指定 window，最上面显示的 window 到指定 id 的 window 间的所有 window 都会被关闭。
若当前正在进行 openWin、closeWin 等带动画过渡的 window 操作，调用此方法会失效。

语法:
summer.closeToWin({params})

参数：

  • id:
    • 类型：字符串
    • 默认值：无
    • 描述：window的id
  • animation：(暂不支持)
    • 类型：JSON 对象
    • 默认值：无
    • 描述：（可选项）动画参数，不传时使用默认动画，type：动画类型，subType：动画子类型。
    • 内部字段:
      1. {
      2.     type:"fade", //动画类型（详见动画类型常量）
      3.     subType:"from_right", //动画子类型（详见动画子类型常量）
      4.     duration:300 //动画过渡时间，默认300毫秒
      5. }

示例代码：

  1. summer.closeToWin({
  2.     id: 'root'
  3. });

补充说明：
无

summer.createWin()

创建一个window，此方法不会显示window，需要结合summer.showWin()使用

语法：
summer.createWin({params})

参数：

  • cache：传值类型为true或false，不传值默认为false，true表示创建隐藏的window在显示之后依然保留，下次可以直接调用showWin来显示，false表示创建window在显示之后被删除，下次显示需要重新调用createWin。

该API其他参数与openWin一致。

示例代码：

  1. summer.createWin({
  2.     id: 'page1',
  3.     url: 'html/page1.html',
  4.     cache:'false'
  5.     pageParam: {
  6.         name: 'test'
  7.     }
  8. });

summer.showWin()

显示一个已创建的window(该API与createWin配合使用)

语法：

  1. summer.showWin({params})

参数：

  • id：id为已经完成createWin的页面id.

示例代码:

  1. summer.showWin({
  2.     id: 'page1'
  3. });

createWin和showWin建议使用方式：

  1. cache传值为false，先执行createWin然后在目标页面的summerReady里面调用showWin来显示。（建议在逻辑简单且加载耗时较少的页面使用）;
  2. cache传值为true，提前完成createWin然后在需要显示的时候调用showWin来显示。（此页面只需create一次并会保留该页面关闭时的状态，酌情使用）。

summer.setWinAttr()

设置 window 属性

语法:

  1. summer.setWinAttr({params})

参数：

  • actionBar：
    • 类型：布尔
    • 默认值：无
    • 描述：页面原生UI属性

示例代码：

  1. summer.setWinAttr({
  2.     actionBar: {
  3.         title: "TA的信息",
  4.         titleColor: "#333333",
  5.         backgroundColor: "#ffffff",
  6.         leftItem:{
  7.             image: "img/back.png",
  8.             method:"",//返回按钮自定义事件，不传方法时默认点击返回后关闭当前页面，也可在打开的window中自定义事件
  9.             text:"返回按钮文字",
  10.             textColor:"#000000"  //返回文字颜色
  11.         },
  12.         rightItems:[{
  13.             type:"image",
  14.             image:"img/back.png",
  15.             method:"" //自定义事件
  16.         },{
  17.             type:"text",
  18.             text:"文字",
  19.             textColor:"#333333",
  20.             method:""  //自定义事件
  21.         }]
  22.     }
  23. });

补充说明：
无

可用性：
iOS系统，Android系统
可提供的1.0.0及更高版本

Frame

summer.openFrame()

打开frame

若 frame 已存在，则会把该窗口显示到最前面并显示，如果 url 和之前的 url 有变化，或者 isreload 为 true 时，页面会刷新

此方法对 frameGroup 里面的 frame 不起作用

语法：

  1. summer.openFrame({params})

参数：

  • id
    • 类型：字符串
    • 默认值：无
    • 描述：frame 的唯一标示，打开一个已经打开过的id的frame时，表示将该frame显示到当前屏幕
  • url：
    • 类型：字符串
    • 默认值：无
    • 描述：页面地址，可以为本地文件路径，支持相对路径和绝对路径，也可以为远程地址，如http(s)网址
  • pageParam：
    • 类型：JSON 对象
    • 默认值：无
    • 描述：（可选项）页面参数，在新页面通过 summer.pageParam 获取
  • bounces：
    • 类型：布尔
    • 默认值：若在 config.xml 里面配置了 pageBounce，则默认值为配置的值，否则为 true
    • 描述：（可选项）页面是否弹动
  • bgColor：
    • 类型：字符串
    • 默认值：若在 config.xml 里面配置了 frameBackgroundColor，则默认值为配置的值，否则透明
    • 描述：（可选项）背景色，支持图片和颜色，格式为#ffffff，图片路径支持支持相对路径
  • scrollToTop：
    • 类型：布尔
    • 默认值：true
    • 描述：（可选项）当点击状态栏，页面是否滚动到顶部。若当前屏幕上不止一个页面的 scrollToTop 属性为 true，则所有的都不会起作用。只iOS有效
  • vScrollBarEnabled：
    • 类型：布尔
    • 默认值：true
    • 描述：（可选项）是否显示垂直滚动条
  • hScrollBarEnabled：
    • 类型：布尔
    • 默认值：true
    • 描述：（可选项）是否显示水平滚动条
  • scaleEnabled：
    • 类型：布尔
    • 默认值：false
    • 描述：（可选项）页面是否可以缩放
  • rect or position：
    • 类型：JSON 对象
    • 默认值：如果没有该参数时则新打开的frame充满整个父页面
    • 描述：（可选项）frame 的位置和大小，设置 margin 后，在不同手机上面会保持与父页面的各方向边距一致，而中间区域会自动扩充。
    • 内部字段:
      1. //用法1：frame为固定大小
      2. {
      3.     left:0, //左上角x坐标，左边距离父win的距离
      4.     top:0, //左上角y坐标，上边距离父win的距离
      5.     width:320, //宽度，若传'auto'，页面从x位置开始自动充满父页面宽度
      6.     height:480 //高度，若传'auto'，页面从y位置开始自动充满父页面高度
      7. }
      8. //用法2：frame为宽高为auto，或width、height未指定
      9. {
      10.     left:0, //左上角x坐标，左边距离父win的距离
      11.     top:44, //左上角y坐标，上边距离父win的距离
      12.     width:'auto', //宽度，若传'auto'，页面从left位置开始自动充满父页面宽度
      13.     height:'auto' //高度，若传'auto'，页面从top位置开始自动充满父页面高度
      14. }
      15. //或
      16. {
      17.     left:0, //左上角x坐标，左边距离父win的距离
      18.     top:44, //左上角y坐标，上边距离父win的距离
      19. }
      20. //用法3：frame为弹性大小，外边距（父win）为固定大小
      21. {
      22.     top:20,
      23.     buttom:20,
      24.     left:10,
      25.     right:10
      26. }
    • 特别说明：top、buttom、left、right和width、height同时设置时，以top、buttom、left、right为准
      最高优先级
      top、bottom、left、right
      第二优先级
      top、left、width、height
      top、right、width、height
      bottom、left、width、height
      bottom、right、width、height
  • showProgress：
    • 类型：布尔
    • 默认值：false
    • 描述：（可选项）是否显示等待框，此参数即将废弃，使用 progress 参数代替。若传了 progress 参数，此参数将忽略
  • progress：
    • 类型：JSON 对象
    • 默认值：无
    • 描述：（可选项）页面加载进度配置信息，若不传则无加载进度效果
    • 内部字段：
      1. {
      2.     type:"", //加载进度效果类型，默认值为default，取值范围为default|page，default等同showProgress参数效果；为page时，进度效果为仿浏览器类型，固定在页面的顶部
      3.     title:"", //type为default时显示的加载框标题
      4.     text:"", //type为default时显示的加载框内容
      5.     color:"" //type为page时进度条的颜色，默认值为#45C01A，支持#FFFFFF格式
      6. }
  • isreload：
    • 类型：布尔
    • 默认值：false
    • 描述：（可选项）页面已经打开时，是否重新加载页面
  • windowSoftInputMode：
    • 类型：字符串
    • 默认值：auto
    • 描述：（可选项）当键盘弹出时，输入框被盖住时，当前页面的调整方式，详见键盘弹出页面调整方式常量，config.xml中说明。
  • animation：（暂不支持）
    • 类型：JSON 对象
    • 默认值：无
    • 描述：（可选项）动画参数，不传时无动画，type：动画类型，subType：动画子类型。
    • 内部字段：
      1. {
      2.     type:"none", //动画类型（详见动画类型常量）
      3.     subType:"from_right", //动画子类型（详见动画子类型常量） duration:300//动画过渡时间，默认300毫秒
      4. }
      具体参见openWin里定义的动画类型、动画子类型

示例代码：

  1. summer.openFrame({
  2.     id: 'page2',
  3.     url: './page2.html',
  4.     rect: {
  5.         left: 0,
  6.         top: 0,
  7.         width: 320,
  8.         height: 480
  9.     },
  10.     pageParam: {
  11.         name: 'test'
  12.     },
  13.     bounces: true,
  14.     bgColor: '#e3e3e3',
  15.     vScrollBarEnabled: true,
  16.     hScrollBarEnabled: true
  17. });

补充说明：
无

可用性：
iOS系统，Android系统
可提供的1.0.0及更高版本

summer.closeFrame()

关闭指定 frame，无参数时候关闭当前 frame。

语法：

  1. summer.closeFrame({params})

参数：

  • id:
    • 类型：字符串
    • 默认值：无
    • 描述：frame的id

示例代码：

  1. summer.closeFrame({
  2.     id: 'root'
  3. });

补充说明：
无

summer.setFrameAttr()

设置frame属性

语法:

  1. summer.setFrameAttr({params})

参数：

  • id：
    • 类型：字符串
    • 默认值：无
    • 描述：frame 名称
  • bounces：
    　 类型：布尔 　 默认值：无
    　*描述：（可选项）页面是否弹动
  • hidden：
    • 类型：布尔
    • 默认值：无
    • 描述：（可选项）本 frame 是否隐藏（隐藏即从屏幕上移除，但不销毁）
  • bgColor：
    • 类型：字符串
    • 默认值：无
    • 描述：（可选项）背景色，支持图片和颜色，格式为#ffffff，图片支持相对路径
  • scrollToTop：
    • 类型：布尔
    • 默认值：无
    • 描述：（可选项）当点击状态栏，页面是否滚动到顶部。若当前屏幕上不止一个页面的 scrollToTop 属性为 true，则所有的都不会起作用。只iOS有效
  • vScrollBarEnabled：
    • 类型：布尔
    • 默认值：无
    • 描述：（可选项）是否显示垂直滚动条
  • hScrollBarEnabled：
    • 类型：布尔
    • 默认值：无
    • 描述：（可选项）是否显示水平滚动条
      -scaleEnabled：
    • 类型：布尔
    • 默认值：无
    • 描述：（可选项）页面是否可以缩放
  • rect：
    • 类型：JSON 对象
    • 默认值：无
    • 描述：（可选项）窗口区域
    • 内部字段：
      1. {
      2.     x:0, //左上角x坐标
      3.     y:0, //左上角y坐标
      4.     w:320, //宽度，若传'auto'，页面从x位置开始自动充满父页面宽度
      5.     h:480 //高度，若传'auto'，页面从y位置开始自动充满父页面高度
      6. }
  • softInputMode：
    • 类型：字符串
    • 默认值：无
    • 描述：（可选项）当键盘弹出时，输入框被盖住时，当前页面的调整方式，详见键盘弹出页面调整方式常量；只iOS有效，Android请在 config.xml 里面配置并云编译使用

示例代码：

  1. summer.setFrameAttr({
  2.     id: 'page2',
  3.     rect: {
  4.         x: 0,
  5.         y: 0,
  6.         w: 320,
  7.         h: 480
  8.     },
  9.     bounces: true,
  10.     bgColor: '#ffffff',
  11.     vScrollBarEnabled: true,
  12.     hScrollBarEnabled: true
  13. });

补充说明：
设置 frame 属性

可用性：
iOS系统，Android系统
可提供的1.0.0及更高版本

summer.openFrameGroup()

打开 frame 组

frame 组打开后，当前页面加载完成后，页面会预加载后面指定个数页面

语法：

  1. summer.openFrameGroup({params}, suceesFn , errFn)

参数:

  • id：
    • 类型：字符串
    • 默认值：无
    • 描述：frame 组id
  • background：
    • 类型：字符串
    • 默认值：无
    • 描述：（可选项）frame 组背景，颜色（#ffffff（必须为6位）,rgba(r,g,b,a)）或图片（支持文件路径协议和相对路径）
  • scrollEnabled：
    • 类型：布尔
    • 默认值：true
    • 描述：（可选项）frame 组是否能够左右滚动
  • position：
    • 类型：JSON 对象
    • 默认值：充满整个父页面
    • 描述：（可选项）frameGroup 的位置和大小，设置 margin 后，在不同手机上面会保持与父页面的各方向边距一致，而中间区域会自动扩充。
    • 内部字段：
      1. {
      2.     left:0, //左上角x坐标
      3.     top:0, //左上角y坐标
      4.     width:320, //宽度，若传'auto'，页面从x位置开始自动充满父页面宽度
      5.     height:480， //高度，若传'auto'，页面从y位置开始自动充满父页面高度
      6.     marginLeft:0, //相对父window左外边距的距离
      7.     marginTop:0, //相对父window上外边距的距离
      8.     marginBottom:0, //相对父window下外边距的距离
      9.     marginRight:0 //相对父window右外边距的距离
      10. }
  • index：
    • 类型：数字
    • 默认值：0
    • 描述：（可选项）默认显示的页面索引
  • preload：
    • 类型：数字
    • 默认值：1
    • 描述：（可选项）预加载的 frame 个数，默认加载当前页后面一个
  • frames：
    • 类型：数组
    • 默认值：无
    • 描述：frame 数组
    • 内部字段
      1. [{
      2.     id:'', //frame id，字符串类型，不能为空字符串
      3.     url:'', //页面地址，字符串类型
      4.     bounces:true, //（可选项）是否弹动，布尔型，默认值：若在 config.xml 里面配置了pageBounce，则默认值为配置的值，否则为false
      5.     bgColor:'#ffffff', //（可选项）背景色，支持图片和颜色
      6.     scrollToTop:true //（可选项）当点击状态栏，页面是否滚动到顶部。若当前屏幕上不止一个页面的scrollToTop属性为true，则所有的都不会起作用。默认值：true。只iOS有效
      7.     vScrollBarEnabled:true, //（可选项）是否显示垂直滚动条，布尔型，默认值：true
      8.     hScrollBarEnabled:false, //（可选项）是否显示水平滚动条，布尔型，默认值：false
      9.     scaleEnabled:true, //（可选项）页面是否可以缩放，布尔型，默认值：false
      10.     allowEdit:false, //（可选项）是否允许长按页面时弹出选择菜单
      11.     softInputMode:'auto' //（可选项）当键盘弹出时，输入框被盖住时，当前页面的调整方式，参考键盘弹出页面调整方式常量，只iOS有效
      12. }]
  • callback(ret, err)
    • ret：
    • 类型：JSON 对象
    • 描述：当前显示在屏幕上的 frame 变化时会回调
    • 内部字段：
      1. {
      2.     id:'', //当前 frame id
      3.     index:0 //当前 frame 索引
      4. }

示例代码：

  1. summer.openFrameGroup({
  2.     id: 'group1',
  3.     background: '#ffffff',
  4.     scrollEnabled: false,
  5.     position: {
  6.         top: 0,
  7.         left: 0,
  8.         width: 'auto',
  9.         height: 'auto'
  10.     },
  11.     index: 0,
  12.     frames: [{
  13.         id: 'frame1',
  14.         url: 'frame1.html',
  15.         bgColor: '#ffffff',
  16.         hidden: true
  17.     }, {
  18.         id: 'frame2',
  19.         url: 'frame2.html',
  20.         bgColor: '#ffffff',
  21.         hidden: false
  22.     }, {
  23.         id: 'frame3',
  24.         url: 'frame3.html',
  25.         bgColor: '#ffffff',
  26.         hidden: true
  27.     }],
  28.     pageParam:[{
  29.         "frame1":"1"
  30.     },{
  31.         "frame2":"2"
  32.     },{
  33.         "frame3":"3"
  34.     }], //（可选项）页面参数，页面中可以通过summer.pageParam获取，JSON对象
  35. }, function(ret, err) {
  36.     var index = ret.index;
  37. });
  39. //获取参数
  40. var firstParam = summer.pageParam[0].frame1; //获取第一个frame的参数，值为1

补充说明：
openFrameGroup的时候默认按照数组的有序顺序打开，数组中最后的frame显示在最上面。
如果frame中设置了hidden属性，则hidden属性的值优先级最高
最后打开的非隐藏frame显示在最上层

可用性:
iOS系统，Android系统
可提供的1.0.0及更高版本

summer.closeFrameGroup()

关闭frame组

语法:

  1. summer.closeFrameGroup({params})

参数：

  • name：
    • 类型：字符串
    • 默认值：无
    • 描述：frame 组名字

示例代码:

  1. summer.closeFrameGroup({
  2.     id: 'group1'
  3. });

补充说明:
无

可用性:
iOS系统，Android系统
可提供的1.0.0及更高版本

summer.setFrameGroupAttr()

设置 frameGroup上的属性

注意1：这里的属性是frameGroup本省的属性，而不是组内的单个frame的属性

注意2：Android 6以上版本使用此API时需要手动申请权限,权限申请参考 Summer API -> 应用管理 -> 应用权限 下的 API summer.getPermission()（仅Android）

Android需申请的权限:

语法:

  1. summer.setFrameGroupAttr({params})

参数：

  • id：
    • 类型：字符串
    • 默认值：无
    • 描述：frame 组的id
  • hidden：
    • 类型：布尔
    • 默认值：无
    • 描述：（可选项）frame 组是否隐藏
  • index：
    • 类型：整数
    • 默认值：无
    • 描述：（可选项）组内索引号为index的frame作为当前显示页面
      当设置index属性时，等价于setFrameGroupIndex方法
  • position：
    • 类型：JSON 对象
    • 默认值：无
    • 描述：（可选项）frame 组区域
    • 内部字段：
      1. {
      2.     left:0, //左上角x坐标
      3.     top:0, //左上角y坐标
      4.     width:320, //宽度，若传'auto'，frame组从x位置开始自动充满父页面宽度
      5.     height:240 //高度，若传'auto'，frame组从y位置开始自动充满父页面高度
      6. }

示例代码1:

  1. //设置整个frameGroup隐藏
  2. summer.setFrameGroupAttr({
  3.     id: 'group1',
  4.     hidden: true
  5. });

示例代码2:

  1. //设置frameGroup内某个frame作为当前显示页显示，可通过组上的index属性来控制
  2. //等价于summer.setFrameGroupIndex(),index是frameGroup的一个属性而已
  3. summer.setFrameGroupAttr({
  4.     id: 'group1',
  5.     index: 2
  6. });

补充说明:
无

可用性:
iOS系统，Android系统
可提供的1.0.0及更高版本

summer.setFrameGroupIndex()

设置 frame 组内指定索引号的Frame为当前组的可见frame

语法：

  1. summer.setFrameGroupIndex({params})

参数：

  • id：
    • 类型：字符串
    • 默认值：无
    • 描述：frame 组id
  • index：
    • 类型：数字
    • 默认值：无
    • 描述：frame 索引
  • reload：
    • 类型：布尔
    • 默认值：false
    • 描述：（可选项）是否刷新 frame

示例代码：

  1. //将id为group1的frame组内，index为2的frame显示在屏幕最上面
  2. summer.setFrameGroupIndex({
  3.     id: 'group1',
  4.     index: 2,
  5.     reload: false
  6. });

补充说明：
无

可用性：
iOS系统，Android系统
可提供的1.0.0及更高版本

summer.bringFrameToFront()(暂不支持)

调整 frame 到前面
当参数里没有to的时候，等价于setFrameGroupAttr方法中升至index为0的情况

语法:

  1. summer.bringFrameToFront({params})

参数：

  • from：
    • 类型：字符串
    • 默认值：无
    • 描述：待调整显示顺序的 frame 名字
  • to：
    • 类型：字符串
    • 默认值：无
    • 描述：（可选项）frame 名字，不传时调整 from 对应 frame 到最前面，否则调整 from 对应 frame 到此 frame 前面示例代码

示例代码：

  1. //将id为page1的window调整设置到最前面显示出来
  2. summer.bringFrameToFront({
  3.     from: 'page1',
  4. });
  5. //将id为page1的window调整设置到id为page2的window的前面，
  6. //如果page2为调整前显示页，则调整后page1的window则显示出来
  7. summer.bringFrameToFront({
  8.     from: 'page1',
  9.     to: 'page2'
  10. });

补充说明：
调整 frame 到前面

summer.sendFrameToBack()(暂不支持)

调整 frame 到指定的frame的后面

语法:

  1. summer.sendFrameToBack({params})

参数：

  • from：
    • 类型：字符串
    • 默认值：无
    • 描述：frame 名字
  • to：
    • 类型：字符串
    • 默认值：无
    • 描述：（可选项）frame 名字，不传时调整 from 对应 frame 到最后面，否则调整 from 对应 frame 到此 frame 后面

示例代码:

  1. summer.sendFrameToBack({
  2.     from: 'page1',
  3.     to: 'page2'
  4. });

补充说明：
调整 frame 到后面

加载刷新

summer.setRefreshHeaderInfo()

显示顶部下拉刷新组件，页面必须设置为弹动。

语法：

  1. summer.setRefreshHeaderInfo({params}, callback(ret))

参数：

  • visible：
    • 类型：布尔
    • 默认值：true
    • 描述：（可选项）是否可见
  • loadingImg：
    • 类型：字符串
    • 默认值：旋转箭头图片
    • 描述：（可选项）上拉下拉时的图片地址
  • bgColor：
    • 类型：字符串
    • 默认值：rgba(187, 236, 153, 1.0)
    • 描述：（可选项）背景颜色
  • textColor：
    • 类型：字符串
    • 默认值：rgba(109, 128, 153, 1.0)
    • 描述：（可选项）文本颜色
  • textDown：
    • 类型：字符串
    • 默认值：下拉可以刷新…
    • 描述：（可选项）下拉文字描述
  • textUp：
    • 类型：字符串
    • 默认值：松开可以刷新…
    • 描述：（可选项）松开时文字描述
  • textLoading：
    • 类型：字符串
    • 默认值：加载中…
    • 描述：（可选项）加载状态文字描述
  • textTime：
    • 类型：字符串
    • 默认值：最后更新加日期时间
    • 描述：（可选项）更新时间文字描述
  • showTime：
    • 类型：布尔
    • 默认值：true
    • 描述：（可选项）是否显示更新时间
  • callback(ret)
    • 描述：处于下拉刷新状态的回调

示例代码：

  1. summer.setRefreshHeaderInfo({
  2.     visible: true,
  3.     loadingImg: 'img/refresh.png',
  4.     bgColor: '#cccccc',
  5.     textColor: '#ffffff',
  6.     textDown: '下拉刷新...',
  7.     textUp: '松开刷新...',
  8.     showTime: true
  9. }, function(ret, err) {
  10.     //通常在这里从服务器加载数据，
  11.     //加载完成后调用summer.refreshHeaderLoadDone()方法恢复组件到默认状态
  12. });

补充说明：
下拉刷新

可用性：
iOS系统，Android系统
可提供的1.0.0及更高版本

summer.refreshHeaderLoadDone()

通知顶部下拉刷新数据加载完毕，组件会恢复到默认状态

语法：

  1. summer.refreshHeaderLoadDone()

示例代码：

  1. summer.refreshHeaderLoadDone()

补充说明：
通知顶部刷新数据加载完毕

可用性：
iOS系统，Android系统

summer.setRefreshFooterInfo()

显示顶部上拉刷新组件，页面必须设置为弹动。

语法：

  1. summer.setRefreshFooterInfo({params}, callback(ret))

参数：

  • visible：
    • 类型：布尔
    • 默认值：true
    • 描述：（可选项）是否可见
  • loadingImg：
    • 类型：字符串
    • 默认值：旋转箭头图片
    • 描述：（可选项）上拉下拉时的图片地址
  • bgColor：
    • 类型：字符串
    • 默认值：rgba(187, 236, 153, 1.0)
    • 描述：（可选项）背景颜色
  • textColor：
    • 类型：字符串
    • 默认值：rgba(109, 128, 153, 1.0)
    • 描述：（可选项）文本颜色
  • textDown：
    • 类型：字符串
    • 默认值：上拉可以刷新…
    • 描述：（可选项）下拉文字描述
  • textUp：
    • 类型：字符串
    • 默认值：松开可以刷新…
    • 描述：（可选项）松开时文字描述
  • textLoading：
    • 类型：字符串
    • 默认值：加载中…
    • 描述：（可选项）加载状态文字描述
  • textTime：
    • 类型：字符串
    • 默认值：最后更新加日期时间
    • 描述：（可选项）更新时间文字描述
  • showTime：
    • 类型：布尔
    • 默认值：true
    • 描述：（可选项）是否显示更新时间
  • callback(ret)
    • 描述：处于下拉刷新状态的回调

示例代码：

  1. summer.setRefreshFooterInfo({
  2.     visible: true,
  3.     loadingImg: 'img/refresh.png',
  4.     bgColor: '#cccccc',
  5.     textColor: '#ffffff',
  6.     textDown: '上拉刷新...',
  7.     textUp: '松开刷新...',
  8.     showTime: true
  9. }, function(ret, err) {
  10.     //通常在这里从服务器加载数据，
  11.     //加载完成后调用summer.refreshFooterLoadDone()方法恢复组件到默认状态
  12. });

补充说明：
上拉刷新

可用性：
iOS系统，Android系统
可提供的1.0.0及更高版本

summer.refreshFooterLoadDone()

通知顶部上拉刷新数据加载完毕，组件会恢复到默认状态

语法：

  1. summer.refreshFooterLoadDone()

示例代码：

  1. summer.refreshFooterLoadDone()

补充说明：
通知顶部刷新数据加载完毕

可用性：
iOS系统，Android系统

跨页面执行方法

summer.execScript()

在指定 window 或者 frame 中执行脚本，对于 frameGroup 里面的 frame 也有效（如支持frameGroup的情况下）；
若 winId 和 frameId 都未指定，则在当前 window 中执行脚本，具体执行逻辑见补充说明。

使用场景：
1、在当前win内，一个frame可以执行其他frame的一个js方法，即frame—>frame
2、在当前win内，一个frame可以调用当前win的一个js方法，即frame—>win

语法：

  1. summer.execScript({params})

参数：

  • winId：
    • 类型：字符串
    • 默认值：无
    • 描述：（可选项）window 的id，若要跨 window 执行脚本，该字段必须指定。若没有指定，则表示在当前的win中
  • appid:
    • 类型：字符串
    • 默认值：无
    • 描述：子应用标识（子应用的id），打开子应用指定页面时需要此参数
  • frameId：
    • 类型：字符串
    • 默认值：无
    • 描述：（可选项）frame名称；若没有该参数，表示执行的脚本在win上
  • script：
    • 类型：字符串
    • 默认值：无
    • 描述：js代码

示例代码1：

  1. //在名为winName的window中执行jsfun脚本
  2. var jsfun = 'funcGoto();';
  3. summer.execScript({
  4.     winId: 'winName',
  5.     script: jsfun
  6. });
  8. //在名为winName的window中找到名为frmName的frame，并在该frame中执行jsfun脚本
  9. var jsfun = 'funcGoto();';
  10. summer.execScript({
  11.     winId: 'winId',
  12.     frameId: 'frmId',
  13.     script: jsfun
  14. });

或

  1. summer.execScript({
  2.     winId: 'homeFixed',
  3.     frameId : 'frame1',
  4.     script : 'myCall('+num+');'    //运行时script：'mycall(13810012233)'
  5. });
  7. //在当前window中找到名为frmId的frame，并在该frame中执行jsfun脚本var jsfun = 'funcGoto();';
  8. summer.execScript({
  9.     frameId: 'frmId',
  10.     script: jsfun
  11. });

示例代码2：（子应用）

  1. //在名为winName的window中执行jsfun脚本
  2. var jsfun = 'funcGoto();';
  3. summer.execScript({
  4.     appid: 'moli',
  5.     winId: 'winName',
  6.     script: jsfun
  7. });
  9. //在名为winName的window中找到名为frmName的frame，并在该frame中执行jsfun脚本
  10. var jsfun = 'funcGoto();';
  11. summer.execScript({
  12.     appid: 'moli',
  13.     winId: 'winId',
  14.     frameId: 'frmId',
  15.     script: jsfun
  16. });

补充说明：

统一处理逻辑为：exec->window->frame

winId参数： 当 id 不传值，或者传空字符串的情况下，execScript 对象为调用 execScript 的window（该 window 可能位于屏幕或者后台），在该 window 中继续 frameId 的逻辑；
当 id 传值且非空字符串，但并未找到名为 id 的 window，则直接返回不处理（不论 frameId是否有值）;若找到了对应的 window，则在该 window 中继续 frameName 的逻辑；

frameId 参数： 当 frameId 不传值，或者传空字符串的情况下，execScript 对象为调用 execScript 的 window（该 window 可能位于屏幕或者后台），在该 window 中执行 script； 当 frameId 传值且非空字符串，但并未找到名为 frameId 的 frame，则直接返回不处理。若找到了该 frame，则在该 frame 中执行 script。

可用性：
iOS系统，Android系统

启动图控制

summer.hideLaunch()

页面加载完成之后，用于控制启动图隐藏。

注：
前提需要在config.xml文件中配置autoHideLaunch属性，否则是系统自动控制启动隐藏。

  1. <autoHideLaunch>false</autoHideLaunch>

语法：

  1. summer.hideLaunch();

初始化窗口

summer.initializeWin()

初始化窗口，用于打开深层级的页面后，关闭中间多级页面，同时初始化新页面。
注意：
对于android：关闭当前页面到toId指定页面间的所有页面。
对于ios：关闭除当前指定id页面外的所有页面。（toId参数对于ios无效）

语法：

  1. summer.initializeWin({
  2.     id: '',
  3.     url: '',
  4.     toId: ''
  5. })

参数：

  • id：
    • 类型：字符串
    • 默认值：无
    • 描述：（可选项）window 的id，若要跨 window 执行脚本，该字段必须指定。若没有指定，则表示在当前的win中
  • url：
    • 类型：字符串
    • 默认值：无
    • 描述：（必选）需要初始化窗口的文件路径
  • toId：
    • 类型：字符串
    • 默认值：无
    • 描述：（必选）需要关闭到相应window的id。仅android有效

示例代码：

  1. summer.initializeWin({
  2.     id: 'login',
  3.     url: 'comps/login/index.html',
  4.     toId: 'homePage'
  5. });

Moli专属

summer.setTabbarIndex()

切换Moli中原生Tabbar索引页，用于切换Tabbar页签

语法：

  1. summer.setTabbarIndex({
  2.     index: 2,
  3.     isreload: false
  4. }, function(){}, function(){})

参数：

  • index：
    • 类型：整数
    • 默认值：无
    • 描述：表示Tabbar的索引号，从0开始计数；如：切换到第二个页签，index的值为1
  • isreload：
    • 类型：布尔，可选
    • 默认值：false
    • 描述：表示对新打开的页面是否重新加载，true:重新加载，false:不重新加载

示例代码：

  1. summer.setTabbarIndex({
  2.     index: 1,
  3.     isreload: false
  4. }, function(ret){
  5.     console.log(ret);
  6. }, function(err){
  7.     console.log(err);
  8. });
文档更新时间: 2018-12-17 14:56