MUI 实战之页面初始化与创建子页面对于新页面的实战心得

作者：黎燃

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

页面初始化

在应用程序开发中，如果你想使用 HTML5+扩展 api，你必须等待 plusready 事件发生后才能正常使用。MUI 将事件封装到 MUI 中。plusReady（）方法，它涉及 HTML5+api。建议您将其写在 mui 中。plusReady 方法。以下是打印当前页面 URL 的示例：

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

复制代码

创建子页面

在移动应用程序开发过程中，常见的导航栏或选项卡经常出现。每次打开页面时，都需要重新渲染，很容易卡住。此时，如果使用部分滚动，Android 手机将出现滚动不顺畅的问题；mui 现在提供两种解决方案：第一个（官方推荐）：在 plus 环境中，使用原生标题 NView 和原生选项卡栏替换页面的导航栏或选项卡。当页面打开时，渲染已完成，使您的应用程序更接近本机应用程序。具体方法：关于原生标题 NView，请参阅 mui 的示例 3。打开窗口；对于本机选项卡，请参阅 ask 教程的示例第二种是通过双网络视图模式解决问题，这种模式适用于需要从上到下刷新的列表页面。要滚动的区域通过单独的 Web 视图实现，完全使用本地滚动。具体方法是：目标页面分为主页面和内容页面，主页面显示卡片头和卡片尾区域，如顶部导航、底部选项卡等；内容页面显示要滚动的特定内容，然后调用 mui。初始化内容页。

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:{}//额外扩展参数    }]  });

复制代码

参数说明：样式表示窗口属性。请参考 5+规范中的 WebviewStyle；请注意，默认情况下，高度和宽度属性按 100%计算，即使它们未设置；因此，如果顶部值设置为“0px”以外的值，建议同时设置底部值。否则，5+运行时将基于 100%的高度计算，这可能会导致页面的实际底部位置超出屏幕范围；左边和右边也是如此。例如：梅艳芳的主页实际上是索引的组合。html 和列表。html，如下所示：

指数 html 用于显示固定导航、列表。html 显示特定的列表内容，列表项在列表中滚动。html 所在的 webview 中使用本地滚动，这不仅确保滚动条不会穿透顶部导航，这符合应用程序的体验，还确保列表平滑滚动，解决了区域滚动堵塞的问题。列表 html 是 index.html 的子页面。创建代码相对简单，如下所示：

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

复制代码

打开新页面

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,//等待框背景区域高度，默认根据内容自动计算合适高度        ......      }    }})

复制代码

样式

窗口参数请参考 5+规范中的 WebviewStyle；请注意，默认情况下，高度和宽度属性按 100%计算，即使它们未设置；因此，如果顶部值设置为“0px”以外的值，建议同时设置底部值。否则，5+运行时将基于 100%的高度计算，这可能会导致页面的实际底部位置超出屏幕范围；左边和右边也是如此。

var webview = mui.openWindow({  url:'info.html',  extras:{    name:'mui'  //扩展参数  }});console.log(webview.name);//输出mui字符串

复制代码

Hello mui 中，点击首页右上角的图标，会打开关于页面，实现代码如下：

//tap为mui封装的单击事件，可参考手势事件章节document.getElementById('info').addEventListener('tap', function() {  //打开关于页面  mui.openWindow({    url: 'examples/info.html',     id:'info'  });});

复制代码

因为没有传入样式参数，所以默认全屏显示；没有传入 show 参数，因此使用右侧动画中的幻灯片，新页面从右侧滑入。示例 2：从页面 A 打开页面 B，页面 B 是需要从服务器加载的列表页面。如果发生页面 B 加载事件，将显示该事件。由于服务器数据尚未完全加载，列表页面为空，用户体验差；用户体验可以通过以下方法来改善（最好的用户体验应该预先加载）：步骤 1：页面 B 的加载事件发生后，不会自动显示；

//A页面中打开B页面，设置show的autoShow为false，则B页面在其loaded事件发生后，不会自动显示；mui.openWindow({    url: 'B.html',     show:{      autoShow:false    }  });

复制代码

发布于: 刚刚阅读数: 4

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

黎燃

关注

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

专注学习分享前端知识。

发布

暂无评论

创作场景

MUI 实战之页面初始化与创建子页面对于新页面的实战心得

页面初始化

创建子页面

打开新页面

样式

黎燃

评论