十三.MUI - 窗口管理及窗口之间的数据传递

最新推荐文章于 2019-12-27 10:03:32 发布

夏河始溢

最新推荐文章于 2019-12-27 10:03:32 发布

阅读量630

点赞数

文章标签： MUI 布局页面跳转传参预加载

MUI 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1、mui插件初始化
使用 mui.init(); 进行mui插件初始化。

2、页面初始化

在app开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，mui将该事件封装成了mui.plusReady()方法，涉及到HTML5+的api，建议都写在mui.plusReady方法中。如下为打印当前页面URL的示例：

mui.plusReady(function(){
     console.log("当前页面URL："+plus.webview.currentWebview().getURL());
});

3、创建子页面
在移动app开发过程中，经常遇到卡头卡尾的页面，此时若使用局部滚动，在android手机上会出现滚动不流畅的问题； mui的解决思路是：将需要滚动的区域通过单独的webview实现，完全使用原生滚动。具体做法则是：将目标页面分解为主页面和内容页面，主页面显示卡头卡尾区域，比如顶部导航、底部选项卡等；内容页面显示具体需要滚动的内容，然后在主页面中调用mui.init方法初始化内容页面。

mui.init({
    subpages:[{
        url:your-subpage-url,//子页面HTML地址，支持本地地址和网络地址
        id:your-subpage-id,//子页面标志
        styles:{
            top:subpage-top-position,//子页面顶部位置
            bottom:subpage-bottom-position,//子页面底部位置
            width:subpage-width,//子页面宽度，默认为100%
            height:subpage-height,//子页面高度，默认为100%
        },
    extras:{}//额外扩展参数
    }]
});

参数说明：styles表示窗口属性，参考5+规范中的WebviewStyle；特别注意，height和width两个属性,即使不设置，也默认按100%计算；因此若设置了top值为非"0px"的情况，建议同时设置bottom值，否则5+ runtime根据高度100%计算，可能会造成页面真实底部位置超出屏幕范围的情况；left、right同理。

代码样例
主页面index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">hello</h1>
</header>
</body>
<script type="text/javascript">
mui.init({
     subpages:[{
         url   :'sub.html',
         id    : 'sub.html',
         styles:{
            top    : '45px',//子页面顶部位置
            bottom : '0px',//子页面底部位置
            width  : '100%',
            height : '100%'
          },
     }]
});
</script>
</html>

子页面 sub.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
<div class="mui-content">
    <div class="mui-card">
        <!--页眉，放置标题-->
        <div class="mui-card-header mui-card-media">
            <img src="imgs/logo.png" />
            <div class="mui-media-body">
                小M
                <p>发表于 2016-06-30 15:30</p>
            </div>
        </div>
        <!--内容区-->
        <div class="mui-card-content" style="overflow:hidden; padding:0px; line-height:0px;">
            <img src="imgs/1.jpg" width="100%" />
        </div>
        <!--页脚，放置补充信息或支持的操作-->
        <div class="mui-card-footer">页脚</div>
    </div>
    <div class="mui-card">
        <!--页眉，放置标题-->
        <div class="mui-card-header mui-card-media">
            <img src="imgs/logo.png" />
            <div class="mui-media-body">
                小M
                <p>发表于 2016-06-30 15:30</p>
            </div>
        </div>
        <!--内容区-->
        <div class="mui-card-content" style="overflow:hidden; padding:0px;">
            <img src="imgs/1.jpg" width="100%" />
        </div>
        <!--页脚，放置补充信息或支持的操作-->
        <div class="mui-card-footer">页脚</div>
    </div>
</div>
</body>
</html>

4、打开新页面
做web app，一个无法避开的问题就是转场动画；web是基于链接构建的，从一个页面点击链接跳转到另一个页面，如果通过有刷新的打开方式，用户要面对一个空白的页面等待；如果通过无刷新的方式，用Javascript移入DOM节点（常见的SPA解决方案），会碰到很高的性能挑战：DOM节点繁多，页面太大，转场动画不流畅甚至导致浏览器崩溃； mui的解决思路是：单webview只承载单个页面的dom，减少dom层级及页面大小；页面切换使用原生动画，将最耗性能的部分交给原生实现.

mui.openWindow({
    url:new-page-url,
    id:new-page-id,
    styles:{
      top:newpage-top-position,//新页面顶部位置
      bottom:newage-bottom-position,//新页面底部位置
      width:newpage-width,//新页面宽度，默认为100%
      height:newpage-height,//新页面高度，默认为100%
      ......
    },
    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,//等待框背景区域高度，默认根据内容自动计算合适高度
        ......
      }
    }
})

代码样例
主页面index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">hello</h1>
</header>
<div class="mui-content">
    <button type="button" class="mui-btn" onclick="openWindow();">点击这里打开新窗口</button>
</div>
</body>
<script type="text/javascript">
function openWindow(){
    mui.openWindow({
	url    : 'test.html',
	extras : {'name':'小明', 'age':18}
    });
}
</script>
</html>

子页面test.html（接收附加参数）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">test</h1>
</header>
<div class="mui-content">
    <div>姓名 : <span id="name"></span></div>
    <div>年龄 : <span id="age"></span></div>
</div>
</body>
<script type="text/javascript">
mui.init();
mui.plusReady(function(){
    var sData = plus.webview.currentWebview();
    var nameObj = mui('#name');
    nameObj[0].innerHTML = sData.name;
    var ageObj = mui('#age');
    ageObj[0].innerHTML = sData.age;
});
</script>
</html>

5、预加载

所谓的预加载技术就是在用户尚未触发页面跳转时，提前创建目标页面，这样当用户跳转时，就可以立即进行页面切换，节省创建新页面的时间，提升app使用体验。mui提供两种方式实现页面预加载。

方式一：通过mui.init方法中的preloadPages参数进行配置.

mui.init({
    preloadPages:[{
      url:prelaod-page-url,
      id:preload-page-id,
      styles:{},//窗口参数
      extras:{},//自定义扩展参数
      subpages:[{},{}]//预加载页面的子页面
    }],
    preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
});

该种方案使用简单、可预加载多个页面，但不会返回预加载每个页面的引用，若要获得对应webview引用，还需要通过plus.webview.getWebviewById方式获得；另外，因为mui.init是异步执行，执行完mui.init方法后立即获得对应webview引用，可能会失败，例如如下代码：

mui.init({
    preloadPages:[{
      url:'list.html',
      id:'list'
    }]
});
var list = plus.webview.getWebviewByid('list');//这里可能返回空；

方式二：通过mui.preload方法预加载.

var page = mui.preload({
    url:new-page-url,
    id:new-page-id,//默认使用当前页面的url作为id
    styles:{},//窗口参数
    extras:{}//自定义扩展参数
});

通过mui.preload()方法预加载，可立即返回对应webview的引用，但一次仅能预加载一个页面；若需加载多个webview，则需多次调用mui.preload()方法；

如上两种方案，各有优劣，需根据具体业务场景灵活选择；

夏河始溢

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录