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

作者：黎燃

2022-11-16
内蒙古
本文字数：2404 字
阅读完需：约 8 分钟

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

使用父子网络视图或在同一屏幕上显示多个网络视图会消耗大量性能和资源。如果不必要，建议不要在同一屏幕上使用多个 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.backvar 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)});

复制代码

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/cb58f370b27772f4d2c8274dc】。文章转载请联系作者。

黎燃

关注

前端工程师 2022-05-06 加入

专注学习分享前端知识。

发布

暂无评论

创作场景

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

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

关闭页面'

判断预加载是否成功

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

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

黎燃

评论