本系列文章我们将利用mui基于网易云音乐API实现一个音乐播放器APP，同时基于环形或者融云实现聊天功能。作为本系列文章的第一篇，本文会详细讲解html5+中管理应用窗口界面的Webview模块的用法，因为是初级教程篇不过多讲解原理部分，初级用户只需要知道基本用法就可以，并使用.cn/question/6514;

• show表示窗口显示控制。autoShow：目标窗口loaded事件发生后，是否自动显示；若目标页面为预加载页面，则该参数无效；aniShow表示页面显示动画，比如从右侧划入、从下侧划入等，具体可参考。

  
  

• waiting表示系统等待框；mui框架在打开新页面时等待框的处理逻辑为：显示等待框-->创建目标页面webview-->目标页面loaded事件发生-->关闭等待框；因此，只有当新页面为新创建页面（webview）时，会显示等待框，否则若为预加载好的页面，则直接显示目标页面，不会显示等待框。waiting中的参数：autoShow表示自动显示等待框，默认为true，若为false，则不显示等待框；注意：若显示了等待框，但目标页面不自动显示，则需在目标页面中通过如下代码关闭等待框plus.nativeUI.closeWaiting();。title表示等待框上的提示文字，options表示等待框显示参数，比如宽高、背景色、提示文字颜色等，具体可参考。

  
  

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

//tap为mui封装的单击事件，可参考手势事件章节

因没有传入styles参数，故默认全屏显示；也没有传入show参数，故使用slide-in-right动画，新页面从右侧滑入。

示例2：从A页面打开B页面，B页面为一个需要从服务端加载的列表页面，若在B页面loaded事件发生时就将其显示出来，因服务器数据尚未加载完毕，列表页面为空，用户体验不好；可通过如下方式改善用户体验（最好的用户体验应该是通过预加载的方式）

第一步，B页面loaded事件发生后，不自动显示

//A页面中打开B页面，设置show的autoShow为false，则B页面在其loaded事件发生后，不会自动显示；

第二步，在B页面获取列表数据后，再关闭等待框、显示B页面

//B页面onload从服务器获取列表数据；
 //业务数据获取完毕，并已插入当前页面DOM；
 //注意：若为ajax请求，则需将如下代码放在处理完ajax响应数据之后；

mui框架将窗口关闭功能封装在mui.back方法中，具体执行逻辑是：

在mui框架中，有三种操作会触发页面关闭（执行mui.back方法）。

• 在页面上，向右快速滑动
  

hbuilder中敲mheader生成的代码块，会自动生成带有返回导航箭头的标题栏，点击返回箭头可关闭当前页面，原因就是因为该返回箭头包含.mui-action-back类，代码如下：

若希望在顶部导航栏之外的其它区域添加关闭页面的控件，只需要在对应控件上添加.mui-action-back类即可，如下为一个关闭按钮示例：

mui框架封装的页面右滑关闭功能，默认未启用，若要使用右滑关闭功能，需要在mui.init();方法中设置swipeBack参数，如下：

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

除了如上三种操作外，也可以直接调用mui.back()方法，执行窗口关闭逻辑；mui.back()仅处理窗口逻辑，若希望在窗口关闭之前再处理一些其它业务逻辑，则可将业务逻辑抽象成一个具体函数，然后注册为mui.init方法的beforeback参数;beforeback的执行逻辑为：

执行beforeback参数对应的函数若返回false，则不再执行mui.back()方法；否则（返回true或无返回值），继续执行mui.back()方法；

示例：从列表打开详情页面，从详情页面再返回后希望刷新列表界面，此时可注册beforeback参数，然后通过自定义事件通知列表页面刷新数据，示例代码如下：

注意：beforeback的执行返回必须是同步的（阻塞模式），若使用nativeUI这种异步js（非阻塞模式），则可能会出现意想不到的结果；比如：通过plus.nativeUI.confirm()弹出确认框，可能用户尚未选择，页面已经返回了（beforeback同步执行完毕，无返回值，继续执行mui.back()方法，nativeUI不会阻塞js进程）：在这种情况下，若要自定义业务逻辑，就需要复写mui.back方法了；如下为一个自定义示例，每次都需要用户确认后，才会关闭当前页面。

//备份mui.back，mui.back已将窗口关闭逻辑封装的比较完善（预加载及父子窗口），因此最好复用mui.back
 //执行mui封装好的窗口关闭逻辑；

注意：自定义关闭逻辑时，一定要重写mui.back，不能简单通过addEventListener增加back按键监听， 因为addEventListener只会增加新的执行逻辑，老的监听逻辑依然会执行；

这个系列的教程我准备带大家一起实现音乐播放器和即时通讯的功能,先上图不多说：

开始的页面效果很简单，就是一个tab bar页面切换组件，我们重点讲解实现方法，至于美化是后面的事。在开始项目之前我先抄了文档的内容，不是为了凑内容，只是想让新手在开始项目之前还是多看看基本概念，俗话说磨刀不误砍柴工，我们对mui的设计思路有一定了解之后写起来才能得心应手。

相信大家对于mui的双webview模式有初步认识，我们可以分析一下我们接下来要做的这个的实际例子，首先我们的入口文件index.html是一个包括头部和底部的导航栏的webview,中间是一个动态的webview，我们通过点击底部导航栏进行页面切换，并且动态的改变顶部导航栏的内容。

下面我们新建一个mui项目，这里我命名为M-BOX：
- 点击【文件】=》【新建】=》【移动APP】
- 设置应用名称、文件存储路径、选择模板
- 这个是很重要的一个部分，限于篇幅，这里不能讲解，请自己看教程。

相信很多人看了前面那么多文档介绍内心肯定是崩溃的，其实我也是，毕竟写了那么多还没有开始写代码我也是拒绝的，只是考虑到很多新手对于找文档这事不一定有经验，那还是先贴一下，大不了回过头再去看咯。

好，那我们开始写布局文件：

在这篇文章中提到了几个重要的注意事项，我们在一个就注意一下会比较好，这里不再一一详细列举了，读者自己去看。

文章中DOM结构提到：

所谓的固定栏，也就是带有.mui-bar属性的节点，都是基于fixed定位的元素；常见组件包括：顶部导航栏（.mui-bar-nav）、底部工具条(.mui-bar-footer)、底部选项卡（.mui-bar-tab）;这些元素使用时需遵循一个规则：放在.mui-content元素之前，即使是底部工具条和底部选项卡，也要放在.mui-content之前，否则固定栏会遮住部分主内容；

除了固定栏之外，其它内容都要包裹在.mui-content中，否则就有可能被固定栏遮罩，原因：固定栏基于Fixed定位，不受流式布局限制，普通内容依然会从top:0的位置开始布局，这样就会被固定栏遮罩，mui为了解决这个问题，定义了如下css代码：

我们这里重点看这两条规则，因为这个对于我们正确布局是至关重要的。

哈哈，页面头部出来了，不错，这里我们然后删除下面的：

然后继续输入mtab,回车，底部导航栏也出来了，我们修改一下导航栏的内容,把代码稍微调整一下。

首页的静态布局我们写完了，我们接下来新建三个含mui的html文件：
- 选择工程名，邮件就可以看到【新建】，然后就是选择【目录】新建文件夹和【html文件】新建含mui的html文件。我们新建一个文件夹html，并且在html文件夹下新建，home.html，message.html,setting.html。
- 在三个页面body之间分别输入mbody,就可以开始分别写页面了，比如可以先在页面上写上文件名，我们先来完善首页的子页切换逻辑。

1.创建子页面，首个选项卡页面显示，其它均隐藏；

//设置默认打开首页显示的子页序号；
//把子页的路径写在数组里面

 //获取当前页面所属的Webview窗口对象
 //如不是我们设置的默认的子页则隐藏，否则添加到窗口中

注：如果Index不是0，需要将nav下的a标签中的.mui-active属性写到对应的a标签下。

执行完我们会发现home.html的内容显示出来了，但是底部切换还不能，因为这里我们还没有监听底部的点击事件。在进行下一步之前，我们可以先做一个小实验，将上面的代码中的top或者bottom改为0,我们会发现，底部栏或者底部栏会被覆盖，这是因为mui一个重要的潜规则，父子结构的页面子页面会比父页面层级高，说白了就是子页面可以盖住父页面。这会导致开发者常犯的一个错误：将弹出层或者弹出菜单写在父页面被子页面盖住的bug。

mui 内部封装了一些常用的方法，其中DOM选择器、事件绑定等事件管理。具体可以参考文档：、。

若要将mui对象转化成dom对象，可使用如下方法（类似jquery对象转成dom对象）：

除了可以使用addEventListener()方法监听某个特定元素上的事件外， 也可以使用.on()方法实现批量元素的事件绑定。

这里我们将为底部导航按钮添加事件：

当我们点击底部选项卡的时候会弹出true，这不够，我们要能够分辨当前对象具体是哪一个，有两种思路:
- 我们给当前点击的a标签添加一个可以识别的属性，然后根据那个属性获取当前a的特征，然后就可以显示点击的子页，隐藏当前子页。

第一种方法需要遍历此案获取index，第二种方法添加一个href很容易拿到子页id，我们采用第二种方案。

1.手机返回键监听 点击两次退出系统

2.使用确定框方式退出系统

本文将带你了解WEBAPP开发教程之Dcloud开发webApp踩过的坑，希望本文对大家学WEBAPP有所帮助

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！