MUI使用总结

最近项目中需要使用MUI做一个视频播放的小功能。我就花时间研究了一下MUI。

MUI是一个使用JavaScript开发Android和IOS应用的前端框架。这篇文章将以知识树的形式对MUI的使用做一个总结,一些官方文档中的东西我都只大致提一下,如果需要详细了解可以进入官方文档了解详情。

UI组件

组件部分不多说,详情可以看官方文档

小技巧:Dialog 组件正常情况下是无法解析HTML内容的,如果需要对Dialog 组件的内容进行定制可以将Dialog 的最后一个参数type设置为'div'。

MUI选择器

MUI的选择器类似Jquery,主要有#id选择器、.class选择器 标签选择器,组合选择器。

mui('#id')
mui('.class')
mui('input')
mui('p.class')

和Jquery一样,如果想从mui选择器选中的元素中取出原生的DOM元素,只需取出mui('#id')[0]即可。

MUI的常用方法

MUI并没有像Jquery一样丰富的方法,常用的方法并不多。

事件相关的方法

MUI对象方法

on(event, selector, handler) 批量绑定事件

one(event, selector, handler) 批量绑定事件但是只生效一次

off([event][, selector]) 删除事件

MUI静态方法

trigger(element, event, data) 触发事件

fire(target, event, data) 触发自定义事件

原生事件监听方法

addEventListener(event, handler) 单个DOM节点绑定事件

手势事件

页面相关方法

init(options)

页面初始化设置。目前支持在mui.init方法中配置的功能包括:创建子页面关闭页面手势事件配置预加载下拉刷新上拉加载设置系统状态栏背景颜色

openWindow(options)

打开新页面

back()

关闭当前页面

其他工具方法

此部分官方文档都写得非常详细,如果哪个方法不懂可以直接点击连接跳转至官方文档详细查看。

MUI对象方法

each(handler)

遍历

MUI静态方法

each(obj, handler)

遍历

[extend([deep, ]target, obj1[,objN])](http://dev.dcloud.net.cn/mui/...

合并多个对象

later(func,delay)

setTimeOut封装

scrollTo(ypos[,duration)](http://dev.dcloud.net.cn/mui/...

滚动窗口屏幕到指定位置,该方法是对window.scrollTo()方法在手机端的增强实现,可设定滚动动画时间及滚动结束后的回调函数;鉴于手机屏幕大小,该方法仅可实现屏幕纵向滚动。

os

我们经常会有通过navigator.userAgent判断当前运行环境的需求,mui对此进行了封装,通过调用mui.os.XXX即可

  • plus(可以访问的参数为:)

    .plus:返回是否在 5+ App(包括流应用)运行

    .stream:返回是否为流应用

  • Android(可以访问的参数为:)

    .android:返回是否为安卓手机

    .version:安卓版本号

    .isBadAndroid:android非Chrome环境

  • iOS(可以访问的参数为:)

    .ios:返回是否为苹果设备

    .version:返回手机版本号

    .iphone:返回是否为苹果手机

    .ipad:返回是否为ipad

  • Wechat(可以访问的参数为:)

    .wechat:返回是否在微信中运行

AJAX方法

类似JQuery主要由ajax(options)、post(url,params,callback)、get(url,params,callback),详情可参考官方文档

MUI插件方法

示例1:跳转到图片轮播的第二张图片

mui('.mui-slider').slider().gotoItem(1);

示例2:重新开启上拉加载

mui('#pullup-container').pullRefresh().refresh(true);

MUI适用场景说明

为解决HTML5在低端Android机上的性能缺陷,mui引入了原生加速,其中最关键的就是webview控件,因此mui若要发挥其全部能力,需和5+ App配合适用,若脱离5+ App,mui功能会受限,主要涉及三个部分:

webview窗口相关

涉及webview的,除了5+App,其它所有手机浏览器及PC浏览器均无法使用,涉及功能点包括:

  • webview模式窗体动画
  • 创建子窗口(除了为解决区域滚动的常见双webview场景,还涉及webview模式的选项卡等多webview场景)
  • webview模式的侧滑菜单(也有div方式侧滑菜单)
  • webview模式的tab选项卡(也有div方式选项卡)
  • nativeUI,如原生的警告框、确认框、popover、actionsheet、toast。这些也有HTML5的实现。
  • 预加载
  • 自定义事件

第三方扩展插件

涉及webview的,除了5+App,其它所有手机浏览器及PC浏览器均无法使用,目前主要包括:语音输入;

Touch事件相关(注意pc浏览器没有touch事件)

Touch事件相关的,手机端浏览器均可使用、pc端chrome模拟手机浏览器也可以正常使用。
但普通PC端浏览器因为没有touch事件,可以显示控件但滑动操作功能会受限;涉及功能点包括:

  • 手势事件
  • mui封装的tap相关处理业务:折叠面板、二级列表、二级选项卡;
  • mui封装的swipe、drag相关处理业务:图片轮播、可左右滑动的图文表格、可左右滑动的9宫格、滑动触发列表项菜单、可拖动式侧滑菜单、下拉刷新和上拉加载、可拖动式选项卡
    【备注】:在PC端,大家将tap替换成click,将HTML5默认的Drag事件替换mui 的swipe和drag,就可以解决如上两个问题。

除上述列出的功能点,其它mui功能,均可以在其它手机浏览器及PC服务端使用,所有CSS均不受影响。

你可能感兴趣的:(javascript,mui)