最接近原生APP体验的高性能前端框架 Mui的入门教程

因为之前我用vue和uni-app 都开发过h5移动端但总觉得有点不太流畅
最后还是选择了使用Mui进行app的开发
上手很快 js语法类似jquery的使用 css样式类似于bootstrap
而且有国产编码神器 Hbuilder 辅助
真的能达到事半功倍的效果
MUI的三大优点:
1.轻量
追求性能体验，是我们开始启动MUI项目的首要目标，轻量必然是重要特征；
MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K
2.原生UI
鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标
3.流畅体验
3.1.下拉刷新
为实现下拉刷新功能，大多H5框架都是通过DIV模拟下拉回弹动画，在低端android手机上，DIV动画经常出现卡顿现象（特别是图文列表的情况）； mui通过双webview解决这个DIV的拖动流畅度问题；拖动时，拖动的不是div，而是一个完整的webview（子webview），回弹动画使用原生动画
3.2.侧滑导航
mui提供了两种侧滑导航实现：webview模式和div模式，两种模式各有优劣，适用于不同的场景。每种侧滑实现模式，有不同的侧滑动画效果
3.3.滑动触发操作菜单
在手机应用中（特别是iOS平台），很多操作菜单都是滑动触发的，比如短信界面，左滑显示“删除”按钮，点击可以删除该短信对话；邮件列表界面，左滑可以删除，右滑可以标注为"已读/未读"状态； mui的列表控件也支持滑动触发操作菜单功能，仅需按照特定格式拼装DOM结构即可；另外，滑动还支持事件触发，开发者可以通过监听滑动事件（slideleft/slideright），完成操作前的确认提醒工作。

MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件
快速构建页面

新建含mui的HTML文件
在Hbuilder中，新建HTML文件，选择”含mui的HTML“模板，可以快速生成mui页面模板，该模板默认处理了mui的js、css资源引用。

2.输入mheader
顶部标题栏是每个页面都必需的内容，在Hbuilder中输入mheader，可以快速生成顶部导航栏。

3.输入mbody
除顶部导航、底部选项卡两个控件之外，其它控件都建议放在.mui-content控件内，在Hbuilder中输入mbody，可快速生成包含.mui-content的代码块。
// 还是拿比较好做例子的按钮来说吧

<button type="button" id="my-login"   class="mui-btn">默认</button>
<button type="button" class="mui-btn mui-btn-primary">蓝色</button>
<button type="button" class="mui-btn mui-btn-success">绿色</button>
<button type="button" class="mui-btn mui-btn-warning">黄色</button>
<button type="button" class="mui-btn mui-btn-danger">红色</button>
<button type="button" class="mui-btn mui-btn-royal">紫色</button>

在这里插入图片描述
// js api

// 下面用了三种方法进行 对同一事件的处理 点击按钮出现 loading 加载样式
mui(document).on('tap',".mui-btn",function(){
	mui(this).button("loading");
	setTimeout(()=>{
		mui(this).button("reset");
	},2000)
});
function login(el){
	mui(el).button('loading');
	setTimeout(()=>{
		mui(el).button("reset");
	},2000)
}
document.getElementById('my-login').addEventListener('tap',function(){
	mui(this).button('loading');
	setTimeout(()=>{
		mui(this).button("reset");
	},2000)
},false)

// 而且也支持你对样式的重写觉得样式不符合你的要求的话
// 类似下面的这个

<style>
	.mui-btn-dark{
		background-color: #000;
		color: #FFFFFF
	}
</style>

// 有jquery 和bootstrap的基础很好上手
下面是他的官网文档
https://dev.dcloud.net.cn/mui/ui/

yunchong_zhao

发布了236 篇原创文章 · 获赞 80 · 访问量 2万+

私信关注

最接近原生APP体验的高性能前端框架 Mui的入门教程

猜你喜欢