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切换动画。
页面初始化
在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady()方法,涉及到HTML5+的api,建议都写在mui.plusReady方法中。同样也是有代码块的:minit
创建子页面
在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题; mui的解决思路是:将需要滚动的区域通过单独的webview实现,完全使用原生滚动。具体做法则是:将目标页面分解为主页面和内容页面,主页面显示卡头卡尾区域,比如顶部导航、底部选项卡等;内容页面显示具体需要滚动的内容,然后在主页面中调用mui.init方法初始化内容页面。
打开新页面
做web app,一个无法避开的问题就是转场动画;web是基于链接构建的,从一个页面点击链接跳转到另一个页面,如果通过有刷新的打开方式,用户要面对一个空白的页面等待;如果通过无刷新的方式,用Javascript移入DOM节点(常见的SPA解决方案),会碰到很高的性能挑战:DOM节点繁多,页面太大,转场动画不流畅甚至导致浏览器崩溃; mui的解决思路是:单webview只承载单个页面的dom,减少dom层级及页面大小;页面切换使用原生动画,将最耗性能的部分交给原生实现.
打开带原生导航栏的新页面
使用父子webview或者同屏显示多个webview的性能和资源消耗较大。非必要不推荐使用同屏多webview。推荐使用原生导航栏方案代替。可以加快窗体进入速度,内存占用更少。mui在openWindow基础上扩展了mui.openWindowWithTitle()方法,支持nativeObj绘制标题栏,加快页面展现
关闭页面
mui框架将窗口关闭功能封装在mui.back方法中,具体执行逻辑是:
* 若当前webview为预加载页面,则hide当前webview; * 否则,close当前webview;
在mui框架中,有三种操作会触发页面关闭(执行mui.back方法):
* 点击包含.mui-action-back类的控件 * 在屏幕内,向右快速滑动 * Android手机按下back按键
预加载
所谓的预加载技术就是在用户尚未触发页面跳转时,提前创建目标页面,这样当用户跳转时,就可以立即进行页面切换,节省创建新页面的时间,提升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有一个大致大认识,下一篇开始就是业务的具体实现,有兴趣的小伙伴,顶一下呗!
本文纯手打,有不当之处请留言!希望能帮到小伙伴们,谢谢!