本页目录
这是一款高性能的最接近原生 APP 体验的高性能前端框架。
性能和体验的差距,一直是 mobile app 开发者放弃 HTML5 的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题,这些都让 HTML5 开发者倍感挫败,尤其拿到 Android 低端机运行,摔手机的心都有; 另一方面,浏览器默认控件样式又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的 ui 框架但性能低下。
mui 框架有效的解决了这些问题,这是一个可以方便开发出高性能 App 的框架,也是目前最接近原生 App 效果的框架。
特色
轻量
追求性能体验,是我们开始启动 MUI 项目的首要目标,轻量必然是重要特征;
MUI 不依赖任何第三方 JS 库,压缩后的 JS 和 CSS 文件仅有 100+K 和 60+K
原生 UI
鉴于之前的很多前端框架(特别是响应式布局的框架),UI 控件看起来太像网页,没有原生感觉,因此追求原生 UI 感觉也是我们的重要目标
MUI 以 iOS 平台 UI 为基础,补充部分 Android 平台特有的 UI 控件
流畅体验
下拉刷新
为实现下拉刷新功能,大多 H5 框架都是通过 DIV 模拟下拉回弹动画,在低端 android 手机上,DIV 动画经常出现卡顿现象(特别是图文列表的情况); mui 通过双 webview 解决这个 DIV 的拖动流畅度问题;拖动时,拖动的不是 div,而是一个完整的 webview(子 webview),回弹动画使用原生动画。
侧滑导航
mui 提供了两种侧滑导航实现:webview 模式和 div 模式,两种模式各有优劣,适用于不同的场景。每种侧滑实现模式,有不同的侧滑动画效果,主要分为四类:
- 动画 1:主界面移动、菜单不动
- 动画 2:主界面不动、菜单移动
- 动画 3:主界面和菜单同时移动
- 动画 4:缩放式侧滑(类手机 QQ)
滑动触发操作菜单
在手机应用中(特别是 iOS 平台),很多操作菜单都是滑动触发的,比如短信界面,左滑显示“删除”按钮,点击可以删除该短信对话;
邮件列表界面,左滑可以删除,右滑可以标注为"已读/未读"状态;
mui 的列表控件也支持滑动触发操作菜单功能,仅需按照特定格式拼装 DOM 结构即可;
另外,滑动还支持事件触发,开发者可以通过监听滑动事件(slideleft/slideright),完成操作前的确认提醒工作。
License
mui 遵循 MIT License;