MUI框架—窗口管理

页面初始化、创建子页面、关闭页面、预加载我们在 init() 方法中已经说明了，这里不再赘述。

打开新页面

我们在做APP时，与WEB不同的，无论是用点击链接跳转还是JS 动态加载DOM节点，都会碰到很高的性能挑战；MUI框架解决思路：单 webview 只承载单个页面的dom，减少dom层级及页面大小；页面切换使用原生动画，将最耗性能的部分交给原生实现。

mui.openWindow({
    url:new-page-url,
    id:new-page-id,
    styles:{},//窗口参数，参考H5+ API规范中的WebviewStyle
    extras:{},.//自定义扩展参数，可以用来处理页面间传值
    createNew:false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示
    show:{//窗口显示控制参数
      autoShow:true,//页面loaded事件发生后自动显示，默认为true
      aniShow:animationType,//页面显示动画，默认为”slide-in-right“；
      duration:animationTime//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
    },
    waiting:{//系统等待框参数
      autoShow:true,//自动显示等待框，默认为true
      title:'正在加载...',//等待对话框上显示的提示内容
      options:{
        width:waiting-dialog-widht,//等待框背景区域宽度，默认根据内容自动计算合适宽度
        height:waiting-dialog-height,//等待框背景区域高度，默认根据内容自动计算合适高度
        ......
      }
    }
})

打开带原生导航栏的新页面

通过在 mui.openWindow 的styles节点中设置 titleNView 节点的相关参数，可实现绘制原生导航栏控件，可参考H5+ API webviewStyles 中的titleNView 节点中的 WebviewTitleNViewStyles 文档。

mui.openWindow({
  url: webviewUrl,
  id: webviewId,
  styles: {                             // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
    titleNView: {                       // 窗口的标题栏控件
      titleText:"标题栏",                // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题
      titleColor:"#000000",             // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
      titleSize:"17px",                 // 字体大小,默认17px
      backgroundColor:"#F7F7F7",        // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
      progress:{                        // 标题栏控件的进度条样式
        color:"#00FF00",                // 进度条颜色,默认值为"#00FF00"  
        height:"2px"                    // 进度条高度,默认值为"2px"         
      },
      splitLine:{                       // 标题栏控件的底部分割线，类似borderBottom
        color:"#CCCCCC",                // 分割线颜色,默认值为"#CCCCCC"  
        height:"1px"                    // 分割线高度,默认值为"2px"
      }
    }
  }
});

参考文档

• MUI官方文档