Hbuilder------窗口管理

Posted 2022-11-13 suyun1219

------页面初始化

　　在app开发中，若要使用html5+扩展api，必须等plusready事件发生后才能正常使用，mui将该事件封装成了mui.plusReady()方法，涉及到HTML5+的api，建议都写在mui.plusReady方法中.

　　打印当前页面URL的示例：

　　　　mui.plusReady(fouction()

　　　　　　console.log("当前页面URL："+plus.webview.currentWebview().getURL());

　　　　　　　　);

------扩展阅读：

　　　mui.init()     mui插件初始化
　　　mui.ready()     当DOM准备就绪时，指定一个函数来执行
           代码块激活字符：minit

------创建子页面

　　在mobile app开发过程中，经常会出现共用的导航栏或者选项卡，每次打开页面都需要重新渲染，而且容易出现卡头卡尾的现象。并且此时若使用局部滚动，在android手机上会出现滚动不流畅的问题；

　　mui提供的两种解决方案：
　　第一种：在plus环境下，使用原生titleNView以及原生tabbar来替换页面的导航栏或者选项卡。在页面打开时，渲染已经完成，让你的应用更接近原生app。     原生titleNView参考mui.openWindow，原生tabbar可参考ask教程示例。

　　第二种：通过双webview模式解决，此种情况适用于需要上下拉刷新的列表页面。将需要滚动的区域通过单独的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表示窗口属性，特别注意，height和width两个属性，即使不设置，也默认按100%计算；因此若设置了top值为非"0px"的情况，建议同时设置bottom值，否则5+ runtime根据高度100%计算，可能会造成页面真实底部超出屏幕范围的情况；left、right同理。
　　　index.html-----作用为显示固定导航
　　　list.html----显示具体列表内容，列表项的滚动实在list.html所在webview中使用原生滚动，既保证了滚动条不会穿透顶部导航，list.html是index.html的子页面。创建代码简单，如下：

　　　　mui.init(
　　　　　　subpages:[
　　　　　　　　url:"list.html",
　　　　　　　　id:"list.html",
　　　　　　　　styles:
　　　　　　　　　　top:"45px",//mui标题栏默认高度为45px；
　　　　　　　　　　bottom:"0px"  //默认为0px，可不定义
　　　　　　　　　　
　　　　　　　　　]
　　　　　　　　);

------扩展阅读：

　　　代码块激活字符：misubpage

------打开新页面（针对web app）