最接近原生APP体验的高性能前端框架-MUI
前 言
轻量,原生UI,流畅体验,是MUI的三个特征。
1. 新手指南 |
快速体验
1. 下载Hello mui App
下载已打包好的Hello mui 手机app,直接在手机上体验mui的控件UI及能力展示 http://dcloud.io/hellomui/
2. 创建Hello mui工程
可从https://www.dcloud.io下载Hbuilder,选择新建“移动APP”,并选择“Hello MUI”工程模板,创建工程;然后通过数据线将手机连接上电脑,点击运行,就可以在手机上体验MUI的各项能力。
快速构建页面
3步搭好页面主框架
1. 新建含mui的HTML文件
在Hbuilder中,新建HTML文件,选择”含mui的HTML“模板,可以快速生成mui页面模板,该模板默认处理了mui的js、css资源引用。
2.输入mheader
顶部标题栏是每个页面都必需的内容,在Hbuilder中输入mheader,可以快速生成顶部导航栏。
3.输入mbody
除顶部导航、底部选项卡两个控件之外,其它控件都建议放在.mui-content
控件内,在Hbuilder中输入mbody,可快速生成包含.mui-content
的代码块。
4.完整代码块请参考
snippet
2.原生UI |
以iOS 7为基础,补充部分Android特有控件
下面给大家介绍几个常用控件
accordion(折叠面板)
折叠面板从二级列表中演化而来,dom结构和二级列表类似,如下:
![](/assets/blank.gif)
<ul class="mui-table-view"> <li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">面板1</a><div class="mui-collapse-content"><p>面板1子内容</p></div></li></ul>
可以在折叠面板中放置任何内容;折叠面板默认收缩,若希望某个面板默认展开,只需要在包含
.mui-collapse类的li
节点上,增加.mui-active
类即可;mui官网中的方法说明,使用的就是折叠面板控件
list(列表)
1、普通列表
列表是常用的UI控件,mui封装的列表组件比较简单,只需要在ul
节点上添加.mui-table-view
类、在li
节点上添加.mui-table-view-cell
类即可,如下为示例代码
<ul class="mui-table-view"><li class="mui-table-view-cell">Item 1</li><li class="mui-table-view-cell">Item 2</li><li class="mui-table-view-cell">Item 3</li>
</ul>
图片轮播
图片轮播继承自slide插件,因此其DOM结构、事件均和slide插件相同;
DOM结构
默认不支持循环播放,DOM结构如下:
<div class="mui-slider"><div class="mui-slider-group"><div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div><div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div><div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div><div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div></div>
</div>
假设当前图片轮播中有1、2、3、4四张图片,从第1张图片起,依次向左滑动切换图片,当切换到第4张图片时,继续向左滑动,接下来会有两种效果:
- 支持循环:左滑,直接切换到第1张图片;
- 不支持循环:左滑,无反应,继续显示第4张图片,用户若要显示第1张图片,必须连续向右滑动切换到第1张图片;
当显示第1张图片时,继续右滑是否显示第4张图片,是同样问题;这个问题的实现需要通过
.mui-slider-loop类及DOM节点来控制;
若要支持循环,则需要在.mui-slider-group
节点上增加.mui-slider-loop
类,同时需要重复增加2张图片,图片顺序变为:4、1、2、3、4、1,代码示例如下:
<div class="mui-slider"><div class="mui-slider-group mui-slider-loop"><!--支持循环,需要重复图片节点--><div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div><div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div><div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div><div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div><div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div><!--支持循环,需要重复图片节点--><div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div></div>
</div>
概述
为实现下拉刷新功能,大多数 H5 框架都是通过 DIV 模拟下拉回弹动画,在低端 android 手机上,DIV 动画经常出现卡顿现象(特别是图文列表的情况); mui 通过使用原生 webview 下拉刷新解决这个 DIV 动画的卡顿问题,并且拖动效果更加流畅;
这里提供两种模式的下拉刷新,以适用不同场景:
单 webview 模式
动画原理:
下拉刷新时,触发的是原生下拉刷新控件,而整个
webview
位置不会发生变化,所以不会在拖动过程中发生DOM重绘,当控件拖动到一定位置触发动态加载数据以及刷新操作。此模式下拉刷新,相比双webview 模式,不创建额外 webview,性能更优。使用方法:
mui 初始化时设置
pullRefresh
各项参数,与双 webview 模式的子页面设置是一样的。说明:- DOM结构无特殊要求,只需要指定一个下拉刷新容器标识即可
mui.init({pullRefresh : {container:"#refreshContainer",//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等down : {style:'circle',//必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式color:'#2BD009', //可选,默认“#2BD009” 下拉刷新控件颜色height:'50px',//可选,默认50px.下拉刷新控件的高度,range:'100px', //可选 默认100px,控件可下拉拖拽的范围offset:'0px', //可选 默认0px,下拉刷新控件的起始位置auto: true,//可选,默认false.首次加载自动上拉刷新一次callback :pullfresh-function //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;}}
});
模式说明:
- 优点:
- 性能更优,体现在两点:
- 相比双webview,不创建额外子 webview 性能消耗更少
- 下拉拖动过程中不会发生重绘,也减少了性能消耗
- 性能更优,体现在两点:
- 缺点:
- 目前仅支持‘cricle’样式以及该样式的颜色自定义
双 webview 模式
动画原理:
使用双 webview 模式的下拉刷新,创建一个子 webview 添加列表;拖动时,拖动的是一个完整的 webview,避免了类似 DIV 拖动流畅度不好的问题,回弹动画使用原生动画;在 iOS 平台,H5 的动画已经比较流畅,故依然使用 H5 方案。两个平台实现虽有差异,但 mui 经过封装,可使用一套代码实现下拉刷新。
使用方法:
主页面内容比较简单,只需要创建子页面即可:
mui.init({subpages:[{url:pullrefresh-subpage-url,//下拉刷新内容页面地址id:pullrefresh-subpage-id,//内容页面标志styles:{top:subpage-top-position,//内容页面顶部位置,需根据实际页面布局计算,若使用标准mui导航,顶部默认为48px;.....//其它参数定义}}] });
iOS平台的下拉刷新,使用的是 mui 封装的区域滚动组件, 为保证两个平台的 DOM 结构一致,内容页面需统一按照如下 DOM 结构构建:
<div id="refreshContainer" class="mui-content mui-scroll-wrapper"><div class="mui-scroll"><!--数据列表--><ul class="mui-table-view mui-table-view-chevron"></ul></div>
</div>
其次,通过 mui.init 方法中 pullRefresh 参数配置下拉刷新各项参数,如下:
mui.init({pullRefresh : {container:"#refreshContainer",//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等down : {height:50,//可选,默认50.触发下拉刷新拖动距离,auto: true,//可选,默认false.首次加载自动下拉刷新一次contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容callback :pullfresh-function //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;}}
});
模式说明:
- 优点:
- 可自定义下拉刷新样式,更改文字等等.参考关于自定义下拉刷新样式问答
- 缺点:
- 相比单 webview,性能消耗更大,不过都比 div 模式的要好用
- DOM结构需要统一配置
本文只写了一部分常用控件,所以不是很全面,大家可以参考官方文档去详细了解细节。
转载于:https://www.cnblogs.com/zzzzyy/p/7629815.html
最接近原生APP体验的高性能前端框架-MUI相关推荐
- 最接近原生APP体验的高性能前端框架——MUI
前 言 MUI有三大特点: 轻量 追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征: MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K 原生UI ...
- 最接近原生APP体验的高性能前端框架 Mui的入门教程
因为之前我用vue和uni-app 都开发过h5移动端 但总觉得有点不太流畅 最后还是选择了使用Mui进行app的开发 上手很快 js语法类似jquery的使用 css样式 类似于bootstrap ...
- MUI(最接近原生APP体验的高性能前端框架)
MUI-最接近原生APP体验的高性能前端框架MUI: 最接近原生APP体验的高性能前端框架https://dev.dcloud.net.cn/mui/ 最接近原生APP体验的高性能前端框架,追求性能体 ...
- app端前端框架对比 - Mui与ionic、Cordova 、Weex、React Native对比
1.1.1.介绍: mui是最接近原生App体验的前端框架. 极小:100k的js文件,60k的css文件.原生编写,不依赖任何三方框架 极强:xcode和Android studio里所有原生控件都 ...
- HTML5定稿了 为什么原生App世界将被颠覆
原文:http://www.admin10000.com/document/5415.html 2007年W3C(万维网联盟)立项HTML5,直至2014年10月底,这个长达八年的规范终于正式封稿. ...
- HTML5定稿了,为什么原生App世界将被颠覆
摘要:2014年10月底,HTML5规范正式定稿,结束了长达8年的长跑.数字天堂董事长,DCloud CEO王安梳理了HTML5诞生至今的演变过程,并从开发者和用户两个角度分析了HTML对两个人群的优 ...
- H5和原生APP之间的区别
原文:http://www.ui.cn/detail/247751.html 最近项目中因各种客观因素,移动端都是默认用的纯H5 APP,感受最深的就是各种坑啊,好大的坑啊.产品上线后,带着各种坑后的 ...
- 前端框架这么火,还有必要学好原生 JavaScript 吗?
作为一名前端工程师,JavaScript 你一定每天都在用.但是,即便工作 5 年以上的前端也不一定用得非常熟,甚至很多前端对 JavaScript 的掌握程度仅仅停留在会用的层面. 而且 Vue/R ...
- android原生app转成web,转战WebApp: 最适合Android开发者的WebApp框架
原文出处:林法鑫的博客. ps:原以为又是一篇前端从业者人云亦云的水文,其实是篇干货,文中提到的AndroidUI4Web也是作者开发的. 为什么需要转战WebApp开发 随着移动端设备越来越多, 微 ...
最新文章
- 苏宁Nodejs性能优化实战
- 图像处理和计算机视觉中的经典论文
- 2021年4月12日-民航上海医院-瑞金医院古北分院-检查报告单
- android studio gradle 打出jar,同时将依赖的第三方jar打包在一起
- 从Google Quick Draw涂鸦观察不同文化属性
- [机器学习] ——KNN K-最邻近算法
- 用gambit学博弈论---零和博弈
- 什么是JavaSE,写给第一次接触Java的人
- 中国软件企业上市透析(上)
- 1980年红色1元纸币值多少钱?
- 【IoT】STM32 文件系统 fatfs 移植笔记详解
- 电脑启动显示“A disk read error occurred”的解决方法
- 转载,常用RGB color
- 感恩节跟进技巧(附邮件模板)
- CVPR2017 | G-RMI_Google大佬构建的姿态估计baseline
- Job for postfix.service failed because the control process exited with error code. See systemctl st
- SG国家电网-ERP建设前景介绍
- TCP/IP通俗易懂网络协议
- Linux加密解压缩-zip-tar
- 读点《博弈论》(一)