MUI对于原生导航栏的新页面与关闭页面的预加载的底层代码深入运用【MUI】

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

使用父子网络视图或在同一屏幕上显示多个网络视图会消耗大量性能和资源。如果不必要，建议不要在同一屏幕上使用多个Web视图。建议使用本机导航栏。它可以加快表单的输入速度，并使用更少的内存。
通过mui设置openWindow的styles节点中titleNView节点的相关参数来绘制本地导航栏控件。有关详细信息，请参阅5+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 OpenWindowWithTitle已被废除。

关闭页面’

mui框架将窗口关闭函数封装在mui中。back方法。具体执行逻辑为：
如果当前Web视图是预加载的页面，则隐藏当前Web视图；
否则，关闭当前网络视图；
在mui框架中，有三个操作触发页面关闭（执行mui.back方法）：
单击包含的控件。mui动作后台
在屏幕上快速向右滑动
Android手机按下后退按钮:

<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">标题</h1>
</header>

在hbuilder中单击mheader生成的代码块将自动生成带有返回导航箭头的标题栏。单击返回箭头关闭当前页面，因为返回箭头包含。梅艳芳动作背课。代码如下：

<button type="button" class='mui-btn mui-btn-danger mui-action-back'>关闭</button>

iOS平台的本机支持从屏幕右边缘滑出
iOS平台可以通过popGesture参数从屏幕边缘向右滑动Web视图。请参阅5+规格。如果要禁用此函数，可以通过setStyle方法将popGesture设置为none。

默认情况下，由mui框架封装的页面的右滑动关闭功能不启用。要使用向右滑动关闭功能，需要单击mui。初始化（）；在方法中设置swipeBack参数，如下所示：

mui.init({
	swipeBack:true //启用右滑关闭功能
});

mui框架默认会监听Android手机的back按键，然后执行页面关闭逻辑； 若不希望mui自动处理back按键，可通过如下方式关闭mui的back按键监听；

mui.init({
	keyEventBind: {
		backbutton: false  //关闭back按键监听
	}
});

除了以上三种操作外，您还可以直接调用mui。方法执行窗口关闭逻辑；
梅。Back（）仅处理窗口逻辑。如果要在关闭窗口之前处理其他一些业务逻辑，可以将业务逻辑抽象到特定函数中，然后将其注册为mui的beforeback参数。init方法；beforeback的执行逻辑是：
如果beforeback参数对应的函数返回false，则mui。back（）方法将不再执行；
否则（返回true或无返回值），继续执行mui。back（）方法；
示例：从列表中打开详细信息页面，然后从详细信息页面返回以刷新列表界面。此时，您可以注册beforeback参数，然后通过自定义事件通知列表页面刷新数据。示例代码如下：

mui.init({
	beforeback: function(){
		//获得列表界面的webview
		var list = plus.webview.getWebviewById('list');
		//触发列表界面的自定义事件（refresh）,从而进行数据刷新
		mui.fire(list,'refresh');
		//返回true，继续页面关闭逻辑
		return true;
	}
});

注意：beforeback的执行返回必须是同步的（阻塞模式）。如果使用异步js，如原生UI（非阻塞模式），可能会出现意外结果；例如：通过加号。nativeUI Confirm（）弹出一个确认框，用户可能没有选择，但页面已经返回（beforeback同步完成后，没有返回值，继续执行mui.back（）方法，原生UI不会阻塞js流程）：在这种情况下，如果要自定义业务逻辑，需要复制mui back方法；下面是一个自定义示例。在用户每次确认之前，当前页面不会关闭。

//备份mui.back，mui.back已将窗口关闭逻辑封装的比较完善（预加载及父子窗口），因此最好复用mui.back
var old_back = mui.back;
mui.back = function(){
  var btn = ["确定","取消"];
  mui.confirm('确认关闭当前窗口？','Hello MUI',btn,function(e){
    if(e.index==0){
    	//执行mui封装好的窗口关闭逻辑；
    	old_back();
    }
  });
}

判断预加载是否成功

方法1：通过视觉现象分析

预加载页面将立即打开，并且不会显示等待框；默认情况下，未预加载的页面将首先显示等待框，然后显示新页面；

方法2：添加日志以分析是否已创建预加载页面

例如，如果Page A预加载Page B，则在Page A完全加载后（通过setTimeout模拟），打印当前应用程序的所有Web视图，查看它是否包含Page B的URL以供分析。
例如：在A页面增加如下代码：

mui.plusReady(function(){
	setTimeout(function(){
		var array = plus.webview.all();
		if(array){
			for(var i=0,len=array.length;i<len;i++){
			    	console.log(array[i].getURL());
		        }
		}
	},5000)
});