【mui】窗口管理及窗口之间的数据传递

来源：互联网发布：阿里云 oss 视频封编辑：程序博客网时间：2024/06/04 23:29

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()方法；

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

原文地址：http://www.hcoder.net/tutorials/info_94.html

阅读全文

0 0