webapp mui & HTML5+ (二) 之 mui

webapp mui & HTML5+ (二) 之 mui

mui不仅仅是前端ui框架，包括了ui，js操作，native封装。核心还是webview ,和phonegap或者自己编写的webview核心原理差不多。

mui是一个高性能的HTML5开发框架，从UI到效率，都在极力追求原生体验。

本文只是介绍一下mui的基础以及使用场景，并不涉及具体代码，后续会单独介绍每一个api的具体代码实现；想了解mui更详细的信息，请访问mui官网

UI组件

mui的ui样式是以IOS为主体设计的，也补充了android特有一些样式；所以整体的风格看上去还是比较统一的，一些业务不是那么复杂的app完全可以实现。
mui的ui组件也是比较全的，封装了一些比较常用的ui样式，再配合上HBuilder上特有的代码块提示，开发效率提升不少。
比如比较常用的像switch开关，直接敲‘mswitch’，HBuilder就会直接列出相关的代码，直接选择相应的代码块就可以了。
关于ui样式这里不多说，官网上面都有现成的例子和代码，有兴趣的小伙伴可以去看看mui组件

窗口管理

mui虽然有SPA单页方案，但mui.openWindow并不会在非5+环境下降级为SPA的div窗体切换。
如果使用spa固然可以一套代码多处使用，但无法在5+环境下自动升级为原生view切换动画。

1. 页面初始化

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

2. 创建子页面

   在mobile app开发过程中，经常遇到卡头卡尾的页面，此时若使用局部滚动，在android手机上会出现滚动不流畅的问题； mui的解决思路是：将需要滚动的区域通过单独的webview实现，完全使用原生滚动。具体做法则是：将目标页面分解为主页面和内容页面，主页面显示卡头卡尾区域，比如顶部导航、底部选项卡等；内容页面显示具体需要滚动的内容，然后在主页面中调用mui.init方法初始化内容页面。

3. 打开新页面

   做web app，一个无法避开的问题就是转场动画；web是基于链接构建的，从一个页面点击链接跳转到另一个页面，如果通过有刷新的打开方式，用户要面对一个空白的页面等待；如果通过无刷新的方式，用Javascript移入DOM节点（常见的SPA解决方案），会碰到很高的性能挑战：DOM节点繁多，页面太大，转场动画不流畅甚至导致浏览器崩溃； mui的解决思路是：单webview只承载单个页面的dom，减少dom层级及页面大小；页面切换使用原生动画，将最耗性能的部分交给原生实现.

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

   使用父子webview或者同屏显示多个webview的性能和资源消耗较大。非必要不推荐使用同屏多webview。推荐使用原生导航栏方案代替。可以加快窗体进入速度，内存占用更少。mui在openWindow基础上扩展了mui.openWindowWithTitle()方法,支持nativeObj绘制标题栏,加快页面展现

5. 关闭页面

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

   * 若当前webview为预加载页面，则hide当前webview；
   * 否则，close当前webview；
   

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

   * 点击包含.mui-action-back类的控件
   * 在屏幕内，向右快速滑动
   * Android手机按下back按键
   

6. 预加载

   所谓的预加载技术就是在用户尚未触发页面跳转时，提前创建目标页面，这样当用户跳转时，就可以立即进行页面切换，节省创建新页面的时间，提升app使用体验。

事件管理

在开发移动端的应用时，会用到很多的手势操作，比如滑动、长按等，为了方便开放者快速集成这些手势，mui内置了常用的手势事件。根据使用频率，mui默认会监听部分手势事件，如点击、滑动事件；为了开发出更高性能的moble App，mui支持用户根据实际业务需求，通过mui.init方法中的gestureConfig参数，配置具体需要监听的手势事件。
在App开发中，经常会遇到页面间传值的需求，比如从新闻列表页进入详情页，需要将新闻id传递过去； Html5Plus规范设计了evalJS方法来解决该问题； 但evalJS方法仅接收字符串参数，涉及多个参数时，需要开发人员手动拼字符串； 为简化开发，mui框架在evalJS方法的基础上，封装了自定义事件，通过自定义事件，用户可以轻松实现多webview间数据传递。

utils

mui框架将很多功能配置都集中在mui.init方法中，要使用某项功能，只需要在mui.init方法中完成对应参数配置即可，目前支持在mui.init方法中配置的功能包括：创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载、设置系统状态栏背景颜色。

mui需要在页面加载时初始化很多基础控件,如监听返回键,因此务必在每个页面中调用

Ajax

mui框架基于htm5plus的XMLHttpRequest，封装了常用的Ajax函数，支持GET、POST请求方式，支持返回json、xml、html、text、script数据类型；
本着极简的设计原则，mui提供了mui.ajax方法，并在mui.ajax方法基础上，进一步简化出最常用的mui.get()、mui.getJSON()、mui.post()三个方法。

上拉、下拉刷新

基于div的下拉刷新在Android4.4以下也不流畅，5+扩展了原生的下拉刷新控件。mui的下拉刷新，在Android的5+ App环境下会调用5+扩展的双webview下拉刷新，而在iOS 的5+环境和非5+环境下，则会调用基于div的下拉刷新。

这篇文章只是让没有用过mui的小伙伴对mui有一个大致大认识，下一篇开始就是业务的具体实现，有兴趣的小伙伴，顶一下呗！

本文纯手打，有不当之处请留言！希望能帮到小伙伴们，谢谢！