精华内容
下载资源
问答
  • mui框架
    千次阅读
    2019-03-25 21:37:18

    MPAS混合模式前端框架分析:
    一、MUI 框架(前端UI框架)
    (一)MUI框架介绍与优劣势分析:
    1.MUI基本介绍
    MUI是一套前端框架,由DCLOUD公司研发而成,提供大量H5和js语言组成的组件,大大提高了开发效率,可以用于开发web端应用、web APP、混合开发等应用。利用MUI框架,用户在使用APP时可以得到接近原生APP的操作体验。

    2.优缺点分析

    作者:Leo扶风
    来源:CSDN
    原文:https://blog.csdn.net/lpf_leo1992/article/details/79290854
    版权声明:本文为博主原创文章,转载请附上博文链接!
    优势:
    目前的APP开发中,大部分还停留在webapp开发中,相当于用浏览器的方式去运行整个APP,由于浏览器天然的切页白屏,不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新、侧滑抽屉卡顿等问题,导致HTML5APP的用户体验比较差,而MUI框架在体验与性能上接近原生App效果。MUI框架以IOS7为基础,补充android特有控件,页面切换带有侧滑,下滑等效果,用户体验度高。
    对比其他移动端常用框架:
    JQUERY MOBILE: 性能低,样式丑。(MPAS以前用的UI框架)
    AngularJS的Ionic:PC端的angularjs框架引入移动端,有些笨重。
    Bootstrap: PC端的UI框架引入移动端,有些笨重。
    自定义样式(MPAS现阶段做法),缺点:所有样式都靠自己命名,写结构,开发量大,吃力不讨好,即使定义了公共样式,但新功能,新页面出来,难免和以前的页面样式有所不同。

    劣势:
    MUI框架:以IOS7组件为原型设计的UI框架,缺点:组件风格可能和我们设计师的设计风格不符,组件样式不够多,有些东西还需要自己单独的再写。

    (二)基本结构与使用:
    1.MUI的使用方式非常简便,在常规的移动端页面架构中,只需要引入MUI框架中相应的封装好的样式文件CSS和功能文件JS,既可以使用简单的MUI框架的页面样式布局和简单的逻辑操作。
    2.MUI框架对样式和API进行了封装,大部分功能使用特定的标签属性ID或者便签属性的类名class进行绑定,既可以实现样式的展示和功能使用,十分的方便。

    3.同时MUI框架也使用了组件化的思想,把特有的组件封装在单独的CSS和JS文件中,一方面可以减少MUI框架主体的容量大小,使MUI整体更加轻量化,另一方面也可以在不同的页面进行特定组件的使用,更大程度的减少代码的冗余,提高开发效率,大大缩短开发周期,提高项目的收益。

    (三)相关API操作和注意事项:
    MUI官网提供了丰富的文档说明与演示,方便开发者利用文档进行页面快速搭建和组件的使用。

    注意事项:
    DOM结构
    1.固定栏靠前
    所谓的固定栏,也就是带有.mui-bar属性的节点,都是基于fixed定位的元素;常见组件包括:顶部导航栏(.mui-bar-nav)、底部工具条(.mui-bar-footer)、底部选项卡(.mui-bar-tab);这些元素使用时需遵循一个规则:放在.mui-content元素之前,即使是底部工具条和底部选项卡,也要放在.mui-content之前,否则固定栏会遮住部分主内容。

    2.一切内容都要包裹在mui-content中
    除了固定栏之外,其它内容都要包裹在.mui-content中,否则就有可能被固定栏遮罩,原因:固定栏基于Fixed定位,不受流式布局限制,普通内容依然会从top:0的位置开始布局,这样就会被固定栏遮罩,mui为了解决这个问题,定义了如下css代码:

    3.始终为button按钮添加type属性
    若button按钮没有type属性,浏览器默认按照type=submit逻辑处理,这样若将没有type的button放在form表单中,点击按钮就会执行form表单提交,页面就会刷新,用户体验极差。

    窗口管理
    1.页面初始化:必须执行mui.init方法
    mui在页面初始化时,初始化了很多参数配置,比如:按键监听、手势监听等,因此mui页面都必须调用一次mui.init()方法;

    4.页面跳转:抛弃href跳转
    当浏览器加载一个新页面时,若页面DOM尚未渲染完毕,页面会先显示空白,然后等DOM渲染完毕后,再显示具体内容,这是WEB浏览器技术无法逾越的体验障碍;为解决这个问题,建议使用mui.openWindow方法打开一个新的webview,mui会自动监听新页面的loaded事件,若加载完毕,再自动显示新页面;

    手势操作
    1.点击:忘记click
    快速响应是mobile App实现的重中之重,研究表明,当延迟超过100毫秒,用户就能感受到界面的卡顿,然而手机浏览器的click点击存在300毫秒延迟(至于为何会延迟,及300毫秒的来龙去脉,请自行谷百),mui为了解决这个问题,封装了tap事件,因此在任何点击的时候,请忘记click及onclick操作

    (四)常用组件和插件:
    MUI内置了丰富的组件和插件,方便开发者直接调用和使用,另外运行在手机端时,MUI还把原生安卓和IOS的相关API封装在mui-plus 方便开发者直接调用与设置,通过单纯的使用H5开发实现与原生APP相接近的用户体验。

    1.刷新和日期控件

    2.弹框控件:

    3.二级联动和三级联动

    4.进度条控件

    5.图标展示控件

    6.图库预览插件(支持多图片预览)

    更多相关内容
  • 主要介绍了基于MUI框架使用HTML5实现的二维码扫描功能,需要的朋友可以参考下
  • 此资源为mui框架开发的手机购物商城,可直接拿来使用. 其中包含以下内容 首页:包含轮播以及分类快捷通道, 分类:横托式分类列表 购物车: 实现编辑删除与批量删除等操作 个人中心:订单信息, 售后信息,我的消息,地址管理...
  • 最近在看Dcloud的MUI框架,MUI封装了android、ios等多个平台的原生接口,达到开发一个项目,采取不同打包方式,生产多种平台的app。 无可厚非,对于从事java web开发的工程师,带来了极大的福音,再也不用去花太多...
  • mui框架手机网站模板

    2019-09-19 15:22:06
    mui框架手机网站模板
  • Mui框架源码

    2018-07-02 10:16:13
    mui框架源码,非常实用,可以在本地开发调试,看效果。
  • 基于MUI框架的使用HTML5+实现的二维码扫描功能,代码实现了二维码的实时扫描功能,并可以从本地文件夹中选取图片进行扫描,对布局进行了优化,适配了更多的机型。PC端不可使用,仅限于移动端,下载使用之前,请先...
  • mui 做的APP 商城,包括购物车、产品分类,产品列表、等
  • 基于mui框架制作移动端选项卡切换,触屏滑动下拉加载数据列表刷新代码。
  • 基于MUI框架,实现的html5的手机网页app开发。包含登录、注册页面,可直接真机测试
  • 利用pdf.js插件解析文件,mui.previewimage.js和mui.zoom.js实现查看和缩放。在混合APP开发过程中使用
  • mui框架中文帮助文档

    千次下载 热门讨论 2015-12-22 18:26:20
    MUI 是一个轻量级的 HTML、CSS 和 JS 框架,遵循 Google 的 Material Design 设计思路,中文帮助文档
  • mui框架网上花店.zip

    2020-03-14 22:28:58
    mui框架网上花店提供的主要功能: 前端功能:首页、用户登录注册、商品展示、商品展示、商品分类展示、商品详情展示、商品搜索、购物车展示、订单展示、商铺管理的相关页面(登录、注册、查询信息、商品上下架、...
  • 解决mui框架跳转问题

    2018-12-20 15:25:40
    暴力解决mui框架跳转问题,如果会影响页面其他跳转问题可在a表情中添加js代码
  • MUI框架

    千次阅读 2018-05-28 18:37:21
    MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K二、原生UI鉴于之前的很多前端框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI感觉也是我们的重要目标MUI以iOS...

    MUI 有以下两大亮点:
    一、轻量
    追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征;
    MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K
    二、原生UI
    鉴于之前的很多前端框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI感觉也是我们的重要目标
    MUI以iOS平台UI为基础,补充部分Android平台特有的UI控件
    在学习MUI之前,推荐一些适合新手的网站:

    DOM结构
    关于mui页面的dom,你需要知道如下规则。
    固定栏靠前
    所谓的固定栏,也就是带有.mui-bar属性的节点,都是基于fixed定位的元素;常见组件包括: 顶部导航栏(.mui-bar-nav)、底部工具条(.mui-bar-footer)、底部选项卡(.mui-bar-tab);这些元素使用时需遵循一个规则:放在.mui-content元素之前,即使是底部工具条和底部选项卡,也要放在.mui-content之前,否则固定栏会遮住部分主内容;
    一切内容都要包裹在mui-content中
    除了固定栏之外,其它内容都要包裹在.mui-content中,否则就有可能被固定栏遮罩,原因:固定栏基于Fixed定位,不受流式布局限制,普通内容依然会从top:0的位置开始布局,这样就会被固定栏遮罩,mui为了解决这个问题,定义了如下css代码:
    .mui-bar-nav ~ .mui-content { padding-top: 44px; } .mui-bar-footer ~ .mui-content { padding-bottom: 44px; } .mui-bar-tab ~ .mui-content { padding-bottom: 50px; }
    你当然可以通过自定义CSS的方式实现如上类似效果,但为了使用简便,建议将除固定栏之外的所有内容,全部放在.mui-content中。
    始终为button按钮添加type属性
    若button按钮没有type属性,浏览器默认按照 type=submit逻辑处理,这样若将没有type的button放在form表单中,点击按钮就会执行form表单提交,页面就会刷新,用户体验极差。
    窗口管理
    页面初始化:必须执行mui.init方法
    mui在页面初始化时,初始化了很多参数配置,比如:按键监听、手势监听等, 因此mui页面都必须调用一次mui.init()方法;
    页面跳转:抛弃href跳转
    当浏览器加载一个新页面时,若页面DOM尚未渲染完毕,页面会先显示空白,然后等DOM渲染完毕后,再显示具体内容,这是WEB浏览器技术无法逾越的体验障碍;为解决这个问题,建议使用 mui.openWindow方法打开一个新的webview,mui会自动监听新页面的loaded事件,若加载完毕,再自动显示新页面;
    页面关闭:勿重复监听backbutton
    mui框架自动封装了 页面关闭逻辑,若希望自定义返回逻辑(例如编辑页面的返回,需用户确认放弃草稿后再执行返回逻辑),则需要重写mui.back方法,切勿简单通过addEventListener添加backbutton监听,因为addEventListener只会增加新的执行程序,mui默认封装的监听执行逻辑依然会继续执行,因此若仅addEventListener添加用户确认框,则用户即使选择了取消,也会继续关闭窗口。
    手势操作
    点击:忘记click
    快速响应是mobile App实现的重中之重,研究表明,当延迟超过100毫秒,用户就能感受到界面的卡顿,然而手机浏览器的click点击存在300毫秒延迟(至于为何会延迟,及300毫秒的来龙去脉,请自行谷百),mui为了解决这个问题,封装了tap事件,因此在任何点击的时候,请忘记click及onclick操作,统统使用如下代码:
    element.addEventListener('tap',function(){ //点击响应逻辑 });
    常见错误
    Uncaught ReferenceError: plus is not defined
    在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,否则可能会报“plus is not defined”的错误;
    mui为简化开发, 将plusReady事件封装成了mui.plusReady()方法,凡涉及到HTML5+的api,建议都写在mui.plusReady方法中;

    什么是webview?

    在学习MUI的webview相关知识之前,我们先来了解下什么是窗口?什么是webview?
    举个相似的例子,我们在使用浏览器的时候,浏览器的顶部和底部的选项卡栏是固定不变的,当我们打开不同的网页时,网页内容会随之改变。这时,浏览器就相当于一个窗口,不同的网页就相当于不同的webview。同理,在应用MUI制作手机APP页面时,每一个HTML页面就是一个窗口,我们可以在一个页面中创建多个webview。
    创建新的Webview窗口
    WebviewObject plus.webview.create( url, id, styles, extras );
    说明:
    创建Webview窗口,用于加载新的HTML页面,可通过styles设置Webview窗口的样式,创建完成后需要调用show方法才能将Webview窗口显示出来。
    显示Webview窗口
    void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );
    说明:
    显示已创建或隐藏的Webview窗口,需先获取窗口对象或窗口id,并可指定显示窗口的动画及动画持续时间。
    隐藏Webview窗口
    void plus.webview.hide( id_wvobj, aniHide, duration, extras );
    说明:
    根据指定的WebviewObject对象或id隐藏Webview窗口,使得窗口不可见。
    获取当前窗口的WebviewObject对象
    WebviewObject plus.webview.currentWebview();
    说明:
    获取当前页面所属的Webview窗口对象。
    查找指定标识的WebviewObject窗口
    WebviewObject plus.webview.getWebviewById( id );
    说明:
    在已创建的窗口列表中查找指定标识的Webview窗口并返回。 若没有查找到指定标识的窗口则返回null,若存在多个相同标识的Webview窗口,则返回第一个创建的Webview窗口。 如果要获取应用入口页面所属的Webview窗口,其标识为应用的%APPID%,可通过plus.runtime.appid获取。
    创建并打开Webview窗口
    WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB );
    说明:
    创建并显示Webview窗口,用于加载新的HTML页面,可通过styles设置Webview窗口的样式,创建完成后自动将Webview窗口显示出来。
    mui双webview模式
    首先我们要了解mui为了解决窗体切换白屏和区域滚动提出的双webview模式。
    页面初始化
    mui框架将很多功能配置都集中在 mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支持在mui.init方法中配置的功能包括:创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载、设置系统状态栏背景颜色。mui需要在页面加载时初始化很多基础控件,如监听返回键,因此务必在每个页面中调用.
    以下是可以配置的参数:
    复制代码
    mui.init({
        //子页面
        subpages: [{
            //...
        }],
        //预加载
        preloadPages:[
            //...
         ],
        //下拉刷新、上拉加载
         pullRefresh : {
           //...
        },
        //手势配置
          gestureConfig:{
           //...
        },
        //侧滑关闭
        swipeBack:true, //Boolean(默认false)启用右滑关闭功能
    
        //监听Android手机的back、menu按键
        keyEventBind: {
            backbutton: false,  //Boolean(默认truee)关闭back按键监听
            menubutton: false   //Boolean(默认true)关闭menu按键监听
        },
        //处理窗口关闭前的业务
        beforeback: function() {
            //... //窗口关闭前处理其他业务详情点击 ↑ "关闭页面"链接查看
        },
        //设置状态栏颜色
        statusBarBackground: '#9defbcg', //设置状态栏颜色,仅iOS可用
        preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
    })
    复制代码
    如下为打印当前页面URL的示例:
    mui.plusReady(function(){ console.log("当前页面URL:"+plus.webview.currentWebview().getURL()); });
    创建子页面
    在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题; mui的解决思路是:将需要滚动的区域通过单独的webview实现,完全使用原生滚动。具体做法则是:将目标页面分解为主页面和内容页面,主页面显示卡头卡尾区域,比如顶部导航、底部选项卡等;内容页面显示具体需要滚动的内容,然后在主页面中调用mui.init方法初始化内容页面。
     
    参数说明:
    styles:表示窗口属性,参考5+规范中的WebviewStyle;特别注意,height和width两个属性,即使不设置,也默认按100%计算;因此若设置了top值为非"0px"的情况,建议同时设置bottom值,否则5+ runtime根据高度100%计算,可能会造成页面真实底部位置超出屏幕范围的情况;left、right同理。
    示例:Hello mui的首页其实就是index.html加list.html合并而成的,如下:
    index.html的作用就是显示固定导航,list.html显示具体列表内容,列表项的滚动是在list.html所在webview中使用原生滚动,既保证了滚动条不会穿透顶部导航,符合app的体验,也保证了列表流畅滚动,解决了区域滚动卡顿的问题。 list.html就是index.html的子页面,创建代码比较简单,如下:
    复制代码
    mui.init({
        subpages:[{
          url:'list.html',
          id:'list.html',
          styles:{
            top:'45px',//mui标题栏默认高度为45px;
            bottom:'0px'//默认为0px,可不定义;
          }
        }]
    });
    复制代码
    打开新页面
    web app,一个无法避开的问题就是转场动画;web是基于链接构建的,从一个页面点击链接跳转到另一个页面,如果通过有刷新的打开方式,用户要面对一个空白的页面等待;如果通过无刷新的方式,用Javascript移入DOM节点(常见的SPA解决方案),会碰到很高的性能挑战:DOM节点繁多,页面太大,转场动画不流畅甚至导致浏览器崩溃; mui的解决思路是:单webview只承载单个页面的dom,减少dom层级及页面大小;页面切换使用原生动画,将最耗性能的部分交给原生实现。
    复制代码
    mui.openWindow({
        url:new-page-url,
        id:new-page-id,
        styles:{
          top:newpage-top-position,//新页面顶部位置
          bottom:newage-bottom-position,//新页面底部位置
          width:newpage-width,//新页面宽度,默认为100%
          height:newpage-height,//新页面高度,默认为100%
          ......
        },
        extras:{
          .....//自定义扩展参数,可以用来处理页面间传值
        },
        createNew:false,//是否重复创建同样id的webview,默认为false:不重复创建,直接显示
        show:{
          autoShow:true,//页面loaded事件发生后自动显示,默认为true
          aniShow:animationType,//页面显示动画,默认为”slide-in-right“;
          duration:animationTime//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;
        },
        waiting:{
          autoShow:true,//自动显示等待框,默认为true
          title:'正在加载...',//等待对话框上显示的提示内容
          options:{
            width:waiting-dialog-widht,//等待框背景区域宽度,默认根据内容自动计算合适宽度
            height:waiting-dialog-height,//等待框背景区域高度,默认根据内容自动计算合适高度
            ......
          }
        }
    })
    复制代码

     

    参数说明:
    • styles:表示窗口参数,参考5+规范中的WebviewStyle;特别注意,height和width两个属性,即使不设置,也默认按100%计算;因此若设置了top值为非"0px"的情况,建议同时设置bottom值,否则5+ runtime根据高度100%计算,可能会造成页面真实底部位置超出屏幕范围的情况,left、right同理。
    • extras:新窗口的额外扩展参数,可用来处理页面间传值;例如:
    var webview = mui.openWindow({ url:'info.html', extras:{ name:'mui' } }); console.log(webview.name);
    控制台会输出"mui"字符串;
    注意:扩展参数仅在打开新窗口时有效,若目标窗口为预加载页面,则通过mui.openWindow方法打开时传递的extras参数无效。
    • createNew:是否重复创建相同id的webview;为优化性能、避免app中重复创建webview,mui v1.7.0开始增加createNew参数,默认为false;判断逻辑如下:若createNew为true,则不判断重复,每次都新建webview;若为fasle,则先计算当前App中是否已存在同样id的webview,若存在则直接显示;否则新创建并根据show参数执行显示逻辑;该参数可能导致的影响:若业务写在plusReady事件中,而plusReady事件仅首次创建时会触发,则下次再次通过mui.openWindow方法打开同样webview时,是不会再次触发plusReady事件的,此时可通过自定义事件触发;
    • show:表示窗口显示控制。autoShow:目标窗口loaded事件发生后,是否自动显示;若目标页面为预加载页面,则该参数无效;aniShow表示页面显示动画,比如从右侧划入、从下侧划入等
    • waiting:表示系统等待框;mui框架在打开新页面时等待框的处理逻辑为:显示等待框-->创建目标页面webview-->目标页面loaded事件发生-->关闭等待框;因此,只有当新页面为新创建页面(webview)时,会显示等待框,否则若为预加载好的页面,则直接显示目标页面,不会显示等待框。waiting中的参数:autoShow表示自动显示等待框,默认为true,若为false,则不显示等待框;注意:若显示了等待框,但目标页面不自动显示,则需在目标页面中通过如下代码关闭等待框plus.nativeUI.closeWaiting();。title表示等待框上的提示文字,options表示等待框显示参数,比如宽高、背景色、提示文字颜色等
    示例1:Hello mui中,点击首页右上角的图标,会打开关于页面,实现代码如下:
    复制代码
    //tap为mui封装的单击事件,可参考手势事件章节
    document.getElementById('info').addEventListener('tap', function() {
      //打开关于页面
      mui.openWindow({
        url: 'examples/info.html',
        id:'info'
      });
    });
    复制代码
    因没有传入styles参数,故默认全屏显示;也没有传入show参数,故使用slide-in-right动画,新页面从右侧滑入。
    示例2:从A页面打开B页面,B页面为一个需要从服务端加载的列表页面,若在B页面loaded事件发生时就将其显示出来,因服务器数据尚未加载完毕,列表页面为空,用户体验不好;可通过如下方式改善用户体验(最好的用户体验应该是通过预加载的方式)
    第一步,B页面loaded事件发生后,不自动显示
    复制代码
    //A页面中打开B页面,设置show的autoShow为false,则B页面在其loaded事件发生后,不会自动显示;
    mui.openWindow({
        url: 'B.html',
        show:{
          autoShow:false
        }
    });
    复制代码
    第二步,在B页面获取列表数据后,再关闭等待框、显示B页面
    复制代码
    //B页面onload从服务器获取列表数据;
    window.onload = function(){
      //从服务器获取数据
      ....
      //业务数据获取完毕,并已插入当前页面DOM;
      //注意:若为ajax请求,则需将如下代码放在处理完ajax响应数据之后;
      mui.plusReady(function(){
        //关闭等待框
        plus.nativeUI.closeWaiting();
        //显示当前页面
        mui.currentWebview.show();
      });
    复制代码
    关闭页面
    mui框架将窗口关闭功能封装在mui.back方法中,具体执行逻辑是:
    若当前webview为预加载页面,则hide当前webview;否则,close当前webview。
    在mui框架中,有三种操作会触发页面关闭(执行mui.back方法)。
    • 点击包含.mui-action-back类的控件
    • 在页面上,向右快速滑动
    • Android手机按下back按键
    hbuilder中敲mheader生成的代码块,会自动生成带有返回导航箭头的标题栏,点击返回箭头可关闭当前页面,原因就是因为该返回箭头包含.mui-action-back类,代码如下:
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">标题</h1>
    </header>
    若希望在顶部导航栏之外的其它区域添加关闭页面的控件,只需要在对应控件上添加.mui-action-back类即可,如下为一个关闭按钮示例:
    <button type="button" class='mui-btn mui-btn-danger mui-action-back'>关闭</button>
    mui框架封装的页面右滑关闭功能,默认未启用,若要使用右滑关闭功能,需要在 mui.init();方法中设置swipeBack参数,如下:
    mui.init({ swipeBack:true //启用右滑关闭功能 });
    mui框架默认会监听Android手机的back按键,然后执行页面关闭逻辑; 若不希望mui自动处理back按键,可通过如下方式关闭mui的back按键监听;
    mui.init({ keyEventBind: { backbutton: false //关闭back按键监听 } });
    除了如上三种操作外,也可以直接调用 mui.back()方法,执行窗口关闭逻辑;mui.back()仅处理窗口逻辑,若希望在窗口关闭之前再处理一些其它业务逻辑,则可将业务逻辑抽象成一个具体函数,然后注册为mui.init方法的beforeback参数;beforeback的执行逻辑为:
    执行 beforeback参数对应的函数若返回false,则不再执行mui.back()方法;否则(返回true或无返回值),继续执行mui.back()方法;
    示例:从列表打开详情页面,从详情页面再返回后希望刷新列表界面,此时可注册beforeback参数,然后通过自定义事件通知列表页面刷新数据,示例代码如下:
    复制代码
    mui.init({
        beforeback: function(){
            //获得列表界面的webview
            var list = plus.webview.getWebviewById('list');
            //触发列表界面的自定义事件(refresh),从而进行数据刷新
            mui.fire(list,'refresh');
            //返回true,继续页面关闭逻辑
            return true;
        }
    });
    复制代码
    注意: beforeback的执行返回必须是同步的(阻塞模式),若使用nativeUI这种异步js(非阻塞模式),则可能会出现意想不到的结果;比如:通过plus.nativeUI.confirm()弹出确认框,可能用户尚未选择,页面已经返回了(beforeback同步执行完毕,无返回值,继续执行mui.back()方法,nativeUI不会阻塞js进程):在这种情况下,若要自定义业务逻辑,就需要复写mui.back方法了;如下为一个自定义示例,每次都需要用户确认后,才会关闭当前页面。
    复制代码
    //备份mui.back,mui.back已将窗口关闭逻辑封装的比较完善(预加载及父子窗口),因此最好复用mui.back
    var old_back = mui.back;
    mui.back = function(){
      var btn = ["确定","取消"];
      mui.confirm('确认关闭当前窗口?','Hello MUI',btn,function(e){
        if(e.index==0){
            //执行mui封装好的窗口关闭逻辑;
            old_back();
        }
      });
    }
    复制代码
    注意:自定义关闭逻辑时,一定要重写 mui.back,不能简单通过addEventListener增加back按键监听, 因为addEventListener只会增加新的执行逻辑,老的监听逻辑依然会执行。


    1 MUI介绍

    1.1 MUI是什么,解决了什么问题。


    (1)性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题,这些都让HTML5开发者倍感挫败,尤其拿到Android低端机运行,摔手机的心都有(如果开发者需要解决这些问题,需要处理很多兼容性问题,需要花费大把的时间和精力); 

    (2)浏览器默认控件样式(prompt、alert)又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的ui框架但性能低下。 

    (3)mui框架解决的问题:一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。有些控件就是原生态的效果,mui起到了桥梁的作用。 

    了解: 

    MUI是国产的,北京数字天堂。。。和它配套的有开发工具HBuilder,5+runtime 
    5+runtime:可以将H5打包成native app,原理:利用原生态的webview去承载HTML5。 
    这里写图片描述

    1.2 MUI的特点


    (1)轻量 
    追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征; 
    MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K 
    可以根据自个的需要,自定义去下载对应的模块。和我们接触的zepto.js类似。

    (2)原声UI 
    鉴于之前的很多前端框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI感觉也是我们的重要目标 
    MUI以iOS平台UI为基础,补充部分Android平台特有的UI控件; 
    容易上手 ; 
    不需要其他框架基础:语法上和我们之前 学到用到 的写法是一样的。

    其他框架:ionic(Angular.js), react(native),vue(发音:view) 
    vue、react、Angular.js是并列关系。 
    前端是:vue和react的天下

    1.3 MUI存在的问题

    (1)名气不是很大,国产,不像react、Angular.js那样,世界范围都在使用。目前国内MUI使用的公司还是很多的。 
    (2)框架本身存在一些bug还有一些待解决的问题。(tap == click)

    1.4分析MUI结构


    dist:distribution的缩写,存放目标,发布的文件,对于一些框架来说,使用者将里面的文件copy出来直接用就OK 

    examples:存储案例(demo)的文件 

    grunt:存储js模块化相关的文件,类似sass里面引用sass,这里是js里面引用js。和grunt类似的工具用gulp,webpack。 

    plugin:存储该框架的插件(扩展) 
    这里写图片描述

    2 UI组件

    2.1 accordion(折叠面板)

    <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官网中的方法说明,使用的就是折叠面板控件。

    2.2 actionsheet(操作表)

    2.3 dialog(对话框)

    (1)警告框:

    $.alert('警告的内容\n可以使用\n换行', '警告标题',"按钮的文字" ,function() {
         //点击确认的回调
    });

    注:.alert( message, title, btnValue, callback ) message必须是字符串

    (2)确认框 
    var btnArray = [‘否’, ‘是’];

    $.confirm('是否确认删除', '确认的标题', btnArray, function(e) {
        //通过e.index可以知道用户点击了哪个按钮
        if (e.index == 1) {
           $(this)[0].innerHTML = "ok";
        } else {
            $(this)[0].innerHTML = "no"
        }
    })

    注:显示什么按钮是一个数组,当这个数组只有一个元素的时候,类似于警告框

    (3)输入框 
    .prompt( message, placeholder, title, btnValue, callback )

    var btnArray = ['取消', '确定'];
    $.prompt('请输入评语:', '性能好', 'Hello MUI', btnArray, function(e) {
        if (e.index == 1) {
            $(this)[0].innerHTML = '谢谢你的评语:' + e.value;
        } else {
            $(this)[0].innerHTML = '你点了取消按钮';
        }
    })

    (4)toast提示框

    $.toast('欢迎体验Hello MUI');
    • 1

    2.4 list(列表)

    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">Item 1</a>
        </li>
        <li class="mui-table-view-cell"> Item 2
            <span class="mui-badge mui-badge-primary">11</span>
        </li>
        <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 3</a></li>
    </ul>

    2.5 ipnut (表单) 
    (1)密码输入框,后面有一个小眼睛

    (2)输入框后面可以设置一个 清除的按钮 
    2.6 number box(数字输入框)

    <div class="mui-numbox" data-numbox-step='10' data-numbox-min='0' data-numbox-max='100'>
      <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
      <input class="mui-numbox-input" type="number" />
      <button class="mui-btn mui-numbox-btn-plus" type="button">+</button></div>

    注: 
    (1)我们可以设置输入框的最大值、最小值、设置修改的步长 
    (2)可以获取到输入框的值。Mui有方法提供 
    (3)我们可以通过js设置输入框的值。Mui有方法提供 
    (4)我们可以通过js设置输入框修改的步长,Mui有方法提供

    了解:组件化开发。在前端,还是后端(Java)都在提倡。 
    定义:在解耦复杂系统时,多个功能模块进行拆解、重组的过程,有多种的属 
    性、状态反映其内部的特性 
    目的:对复杂系统拆分成多个组件,方便对其独立升级和优化。

    2.7 ipnut (表单)

    2.8 picker(选择器)

    2.9 switch(开关)

    <div class="mui-switch mui-active" id="mySwitch">
        <div class="mui-switch-handle"></div>
    </div>

    注: 
    (1)根据div中是否包含mui-active 来判断当前开关的状态。 
    (2)我们可以通过js去设置开关的状态,mui提供方法 
    (3)我们可以监听到开关改变的状态,mui提供方法

    2.10 slide(轮播组件)

    2.11 图片轮播

    2.12遮罩蒙版

    对框架进行原生态代码的转化

    mui("#close")[0].style.display = "block";

    在转回框架

    mui(mui("#close")[0]);

    自学: 
    (1)侧滑导航 
    (2)radio(单选框) 
    (3)badge(数字角标) 
    (4)checkbox(复选框) 
    (5)弹出菜单

    案例:

    3 Utils

    3.1 init

    mui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支持在mui.init方法中配置的功能包括:创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载、设置系统状态栏背景颜色。

    3.2 mui()

    这里mui和我们之前接触的jQuery的mui是一样的。可以将mui和理解成一个函数。mui()、$()理解为函数调用。 
    mui(“#XX”),mui(“.XX”)

    (function ($,document) {
        $('#sheet1').popover('toggle');
    })(mui,document)

    上面这种写法的好处: 
    (1)执行速度更快 
    (2)更方便代码压缩

    mui或者jQuery对象转成dom元素

    $(“sle”)[0]\mui(“sle”)[0]

    原生态转成mui或者jQuery对象

    $(“sle”)、mui(“sle”)、$($(“sle”)[0])、mui(mui(“sle”)[0])

    3.3 each()

    3.4 extend()

    3.5 scrollTo()

    3.6 os

    自个了解:navigator.userAgent 
    通过这个,你可以间接地获取,当前设配信息 
    比如:手机类型(Andriod、iOS)、浏览器类型(WeChat浏览器、QQ浏览器、还是其他浏览器)

    (function ($,document) {
       var isAndriod = $.os.android;
       if(isAndriod){
           $.alert("您用的是安卓手机")
       }else {
           $.alert("您用的是街机")
       }
        var isWechat = mui.os.wechat;
        if(isWechat){
            $.alert("微信浏览器");
        }else{
            $.alert("非微信浏览器");
        }
        var isAndroid = $.os.android;
        var iOS = $.os.ios;
        if(!isAndroid && !iOS){
            $.alert("winPhone");
        }
    })(mui,document)

    通过mui提供的方法,可以获取到 
    (1)系统的版本(iOS、Andriod) 
    (2)系统的版本 
    (3)浏览器的类型(WeChat、QQ)

    4窗口管理

    4.1 页面初始化

    4.2 打开新页面

    4.3 关闭页面

    5事件

    5.1 事件绑定

    (function ($,document) {
        $("body").on("click","#btnClick",f1);
        function f1() {
            $.alert("点击了!");
        };
        $("body").on("click","#cancel",function () {
            $("body").off();
        });
    })(mui,document)

    注:写取消事件时,将书写 绑定事件的代码复制过来,将on改成off即可。 
    当然,off()事件可以不带参数。

    了解:面向对象的3大特性:(封装、继承、多态)

    5.2 事件取消

    5.3 事件触发

    使用mui.trigger()方法可以动态触发特定DOM元素上的事件。 
    注:第一个参数是DOM原生态元素。

    4.4 手势事件

    这里写图片描述

    6 Aajx

    7下拉刷新

    加载第一页最新的数据,如果服务器数据没有变更,那么和上次获取的到的数据是一样的。 
    将获取到的第一页数据放置到页面之前,先清除原有的数据。

    8上拉加载

    加载下一页数据,同时放到原有数据的最后端。 
    根据返回数据的条数 和pagesize进行判断,确实是否还有下一页。 
    将当前页码存为一个全局变量page。 
    当有下拉刷新的时候,page值需要重置 
    这里写图片描述 

    这里写图片描述

    转自:https://blog.csdn.net/cq7421/article/details/78247085?locationNum=3&fps=1

    展开全文
  • MUI框架的基本使用

    千次阅读 2021-05-31 08:56:09
    要使用MUI框架,在Hbuilder中必须新建HTML5+ APP,并且创建MUI项目,Hbuilder会自动生成代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport...

    要使用MUI框架,在Hbuilder中必须新建HTML5+ APP,并且创建MUI项目,Hbuilder会自动生成代码

    MUI页面的使用:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <script src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet"/
    </head>
    <body>
    	<header class="mui-bar mui-bar-nav">
    		<h1 class="mui-title">标题</h1>
    	</header>
    	<footer class="mui-bar mui-bar-footer">
    		底部
    	</footer>
    	<div class="mui-content">
    		主体
    	</div>
    	<script type="text/javascript" charset="utf-8">
    	    mui.init();
    	</script>
    </body>
    </html>
    

    效果如下:
    在这里插入图片描述

    当底部内容为选项卡的时候,会将.mui-bar-footer替换为.mui-bar-tab,代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <script src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet"/
    </head>
    <body>
    	<header class="mui-bar mui-bar-nav">
    		<h1 class="mui-title">标题</h1>
    	</header>
    	<nav class="mui-bar mui-bar-tab">
    		<a class="mui-tab-item mui-active">
    			<span class="mui-icon mui-icon-home"></span>
    			<span class="mui-tab-label">首页</span>
    		</a>
    		<a class="mui-tab-item mui-active">
    			<span class="mui-icon mui-icon-phone"></span>
    			<span class="mui-tab-label">电话</span>
    		</a>
    		<a class="mui-tab-item mui-active">
    			<span class="mui-icon mui-icon-email"></span>
    			<span class="mui-tab-label">邮件</span>
    		</a>
    		<a class="mui-tab-item mui-active">
    			<span class="mui-icon mui-icon-gear"></span>
    			<span class="mui-tab-label">设置</span>
    		</a>
    	</nav>
    	<div class="mui-content">
    		主体
    	</div>
    	<script type="text/javascript" charset="utf-8">
    	    mui.init();
    	</script>
    </body>
    </html>
    

    效果如下:
    在这里插入图片描述

    在子页面时,想要出现一个返回按钮,代码如下:

    		<header class="mui-bar mui-bar-nav">
    			<a class="mui-icon mui-icon-left-nav mui-pull-left"></a>
    			<h1 class="mui-title">标题</h1>
    		</header>
    		<footer class="mui-bar mui-bar-footer">
    			底部
    		</footer>
    		<div class="mui-content">
    			主体
    		</div>
    		<script type="text/javascript" charset="utf-8">
    		    mui.init();
    		</script>
    

    效果如下:
    在这里插入图片描述

    在使用时要注意这两个小细节:
    1.固定栏靠前,所谓MUI的固定栏,也就是class属性带有 mui-bar 属性的HTML元素节点,它们都是基于fixed固定定位的元素,常见组件包括:顶部导航栏(HTML元素的class属性包含了 mui-bar-nav),底部工具条(class属性中包含了 mui-bar-footer),底部选项卡(class属性中包含了mui-bar-tab)。它们一定要放在class属性包含mui-content的属性之前,即使是底部工具和底部选项卡,也要放在前面,否则固定栏会遮住分主部分,因为固定栏是基于fixed定位,不受流式布局限制,普通内容依然会从top:0的位置开始布局,这样就会被固定栏遮挡
    2.为了使用简便,建议将除固定栏之外的所有内容,全部放在class属性为mui-content的容器中

    折叠面板:

    <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>
    			<li class="mui-table-view-cell mui-collapse">
    				<a class="mui-navigate-right" href="#">面板2</a>
    				<div class="mui-collapse-content">
    					<p>子面板2内容</p>
    				</div>
    			
    			</li>
    		</ul>
    

    效果如下:

    在这里插入图片描述
    数字角标:

    <span class="mui-badge">1</span>
    		<span class="mui-badge mui-badge-primary">12</span>
    		<span class="mui-badge mui-badge-success">123</span>
    		<span class="mui-badge mui-badge-warning">3</span>
    		<span class="mui-badge mui-badge-danger">45</span>
    		<span class="mui-badge mui-badge-purple">456</span>
    

    效果如下:

    在这里插入图片描述

    按钮:

    <button type="button" 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> 
    

    在这里插入图片描述

    actionsheet(操作表)
    actionsheet一般从底部弹出,显示一系列可供用户选择的操作按钮; actionsheet是从popover控件基础上演变而来,实际上就是一个固定从底部弹出的popover,故DOM结构和popove类似,只是需要在含.mui-popover类的节点上增加.mui-popover-bottom、.mui-popover-action类;

    <button  type="button" class="mui-btn-blue" οnclick="showMenu();">点击</button>
    		<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
    		    <!-- 可选择菜单 -->
    		    <ul class="mui-table-view">
    		      <li class="mui-table-view-cell">
    		        <a href="#">菜单1</a>
    		      </li>
    		      <li class="mui-table-view-cell">
    		        <a href="#">菜单2</a>
    		      </li>
    		    </ul>
    		    <!-- 取消菜单 -->
    		    <ul class="mui-table-view">
    		      <li class="mui-table-view-cell">
    		        <a href="#sheet1"><b>取消</b></a>
    		      </li>
    		    </ul>
    		</div>
    		<script type="text/javascript">
    			function showMenu(){
    				mui('#sheet1').popover('toggle');
    			}
    		</script>
    

    在这里插入图片描述
    badge(数字角标)
    数字角标一般和其它控件(列表、9宫格、选项卡等)配合使用,用于进行数量提示。 角标的核心类是.mui-badge,默认为实心灰色背景;同时,mui还内置了蓝色(blue)、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标,如下:

    <span class="mui-badge">1</span>
    <span class="mui-badge mui-badge-primary">12</span>
    <span class="mui-badge mui-badge-success">123</span>
    <span class="mui-badge mui-badge-warning">3</span>
    <span class="mui-badge mui-badge-danger">45</span>
    <span class="mui-badge mui-badge-purple">456</span>
    
    

    在这里插入图片描述
    若无需底色,则增加.mui-badge-inverted类即可

    button(按钮)
    mui默认按钮为灰色,另外还提供了蓝色(blue)、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的按钮,五种色系对应五种场景,分别为primary、success、warning、danger、royal;使用.mui-btn类即可生成一个默认按钮,继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮,例如:通过.mui-btn-blue或.mui-btn-primary均可生成蓝色按钮;若希望无底色、有边框的按钮,仅需增加.mui-btn-outlined类即可

    <button type="button" 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> 
    

    在这里插入图片描述
    加载中按钮:

    //data-loading-text可以自定义文字
    <button type="button" data-loading-text="登录中" class="mui-btn mui-btn-blue">确认</button>
    		<script type="text/javascript">
    		mui(document.body).on('tap', '.mui-btn', function(e) {
    		    mui(this).button('loading');
    		    setTimeout(function() {
    		        mui(this).button('reset');
    		    }.bind(this), 2000);
    		});
    		</script>
    

    在这里插入图片描述

    复选框:

    默认checkbox在右侧显示,若希望在左侧显示,只需增加.mui-left类即可

    <div class="mui-input-row mui-checkbox">
      <label>checkbox示例</label>
      <input name="checkbox1" value="Item 1" type="checkbox" checked>
    </div>
    

    在这里插入图片描述
    单选框:

    <div class="mui-input-row mui-radio mui-left">
    		  <label>checkbox示例</label>
    		  <input name="checkbox1" value="Item 1" type="radio" checked>
    		</div>
    		<div class="mui-input-row mui-radio mui-left">
    		  <label>checkbox示例</label>
    		  <input name="checkbox1" value="Item 1" type="radio" checked>
    		</div>
    

    在这里插入图片描述

    MUI对话框:
    1.mui.alert( message, title, btnValue, callback [, type] )
    message
    Type: String
    提示对话框上显示的内容
    title
    Type: String
    提示对话框上显示的标题
    btnValue
    Type: String
    提示对话框上按钮显示的内容
    callback
    Type: Function
    提示对话框上关闭后的回调函数
    type
    Value: ‘div’
    是否使用h5绘制的对话框

    在这里插入图片描述
    2.mui.confirm( message, title, btnValue, callback [, type] )
    message
    Type: String
    提示对话框上显示的内容
    title
    Type: String
    提示对话框上显示的标题
    btnValue
    Type: Array
    提示对话框上按钮显示的内容
    callback
    Type: Function
    提示对话框上关闭后的回调函数
    type
    Value: ‘div’
    是否使用h5绘制的对话框

    实例代码:mui.confirm(‘MUI是个好框架’,‘Hello MUI’,new Array('是,‘否’),function(e){
    if(e.index==1){
    mui.toast(666);
    }
    });
    如果想要判断用户的选择是哪一个,可以在后面加一个回调函数,形式参数为e,e.index为0代表用户选择是,为1代表用户选择否

    在这里插入图片描述

    3.mui.prompt( message, placeholder, title, btnValue, callback[, type] )
    message
    Type: String
    提示对话框上显示的内容
    placeholder
    Type: String
    编辑框显示的提示文字
    title
    Type: String
    提示对话框上显示的标题
    btnValue
    Type: Array
    提示对话框上按钮显示的内容
    callback
    Type: Function
    提示对话框上关闭后的回调函数
    type
    Value: ‘div’
    是否使用h5绘制的对话框

    实例代码:
    mui.prompt(‘请输入您对MUI的评语’,‘性能好’,‘Hello MUI’,new Array(‘取消’,‘确认’),function(e){
    if(e.index==1){
    mui.toast(e.value);
    }else{
    mui.toast(‘您取消了评语’);
    }
    })
    在这里插入图片描述

    mui表单的基本使用:

    <form class="mui-input-group">
    			<div class="mui-input-row">
    				<label>用户名</label>
    				<input type="text" class="mui-input-clear" placeholder="请输入用户名" />
    			</div>
    			<div class="mui-input-row">
    				<label>密码</label>
    				<input type="password" class="mui-input-password" placeholder="请输入密码">
    			</div>
    			<div class="mui-button-row">
    				<button type="button" class="mui-btn mui-btn-primary">确认</button>
    				<button type="button" class="mui-btn mui-btn-danger">取消</button>
    			</div>
    		</form>
    

    mui-input-clear可以实现快速清空表单中内容的功能,mui-input-password可以实现显示密码的功能
    在这里插入图片描述

    列表:

    <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>
    

    在这里插入图片描述

    列表添加导航栏箭头:

    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">Item 1</a>
        </li>
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">Item 2</a>
        </li>
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">Item 3</a>
        </li>
    </ul>
    

    在这里插入图片描述

    图文列表:

    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
                <div class="mui-media-body">
                    幸福
                    <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>
                </div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="../images/muwu.jpg">
                <div class="mui-media-body">
                    木屋
                    <p class='mui-ellipsis'>想要这样一间小木屋,夏天挫冰吃瓜,冬天围炉取暖.</p>
                </div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="../images/cbd.jpg">
                <div class="mui-media-body">
                    CBD
                    <p class='mui-ellipsis'>烤炉模式的城,到黄昏,如同打翻的调色盘一般.</p>
                </div>
            </a>
        </li>
    </ul>
    

    在这里插入图片描述

    进度条:

    <div id="demo1" class="mui-progressbar">
    			<span></span>
    		</div>
    		<script type="text/javascript">
    			mui('#demo1').progressbar({progress:20}).show();
    			//progress:20代表进度条已经过20%
    		</script>
    

    在这里插入图片描述
    switch开关:

    <div class="mui-switch" id="mySwitch">
    			<div class="mui-switch-handle"></div>
    		</div>
    		<script type="text/javascript">
    			var mySwitch =document.getElementById('mySwitch');
    			mySwitch.addEventListener('click',function(){
    				var isActive = mySwitch.classList.contains('mui-active');
    				//通过是否包含mui-active类来判断当前按钮的状态
    				if(isActive){
    					console.log('打开');
    				}
    				else{
    					console.log('关闭');
    				}
    			})
    		</script>
    

    在这里插入图片描述

    1.内联块元素和块级元素的设置:
    如果需要把HTML元素快速转换成内联块元素,可以给元素class属性添加mui-inline类,也就是设置css属性display:inline-block。同理,给元素class属性设置mui-block类,也就是设置css属性display:block

    2.浮动:
    给元素class属性设置mui-pull-left实现左浮动,设置mui-pull-right实现右浮动,设置mui-clearfix

    3.列表元素的处理:
    ul标签在浏览器中显示时,会有默认的原点和内边距,可以给ul元素的class属性设置mui-list-unstyled去掉,设置mui-list-inline将li标签设置为内联块元素

    4.元素的显示与隐藏
    可以给HTML元素的class属性设置mui-visibility让元素可见,class属性设置mui-hidden隐藏元素

    mui对象的内置方法和对象:
    1.mui()方法:
    mui()方法使用css选择器获取HTML元素对象,返回一个mui对象数组

    mui("p");	//选取所有的<p>元素
    mui("p.title");	//选取所有包含.title类的<p>元素
    

    若要将mui对象转化成DOM对象,可以使用如下方法:

    //obj1是mui对象
    var obj1 = mui("#title");;
    //obj2是DOM对象
    var obj2 = obj1[0];
    

    2.each()方法:
    each即是一个类方法,同时也是一个对象方法,两种方法的适用场景不同,可以使用mui.each()去变力数组或者json对象,也可以使用mui(selector).each()去遍历DOM结构

    3.init()方法:
    MUI框架将很多功能配置都集中在mui.init()方法中,要使用某项功能,只需要在mui.init()方法中完成对应的参数配置即可,目前支持在mui.init方法中配置的功能包括创建子页面/关闭页面/手势事件配置,预加载,下拉刷新,上拉加载,设置系统状态栏背景颜色,配置形式如下:

    mui.init({
    	//子页面
    	subpages:[{
    		
    	}],
    	//预加载
    	preloadPages:[
    	
    	],
    	//下拉刷新,上拉加载
    	pullRefresh:{
    		
    	},
    	//手势配置
    	gettrueConfig:{
    		
    	},
    	//侧滑关闭
    	wipeBack:true,
    	
    	
    })
    

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

    mui.scrollTo(ypos[,duration][,handler]);
    ypos是整形值,要在窗口文档显示区左上角显示的文档的y坐标
    duration是滚动时间周期,单位是毫秒
    handler是滚动结束后执行的回调函数
    
    例如:1秒钟之内滚动到页面顶部:
    mui.scrollTo(0,1000);
    

    5.mui.os对象:
    在浏览器中,经常需要通过navigator.userAgent判断当前运行环境,MUI框架对此进行了类似的封装:

    属性 说明
    mui.os.plus 判断是否在基座中运行
    mui.os.stream 判断是否为流应用
    mui.os.android 判断是否为Android
    mui.os.ios 判断是否为ios
    mui.os.ipad 判断是否为ipad
    mui.os.iphone 判断是否为iphone
    mui.os.wechat 判断是否在微信中运行
    mui.os.verson 返回当前运行环境的版本号

    事件管理:
    1.tap事件
    快速响应式移动应用开发实现的重中之重,tap事件能实现快速响应

    ele.addEventListener('tap',function(){
    	
    })
    

    2.事件绑定
    除了可以使用addEventListener()方法监听某个特定元素上的事件外,也可以使用.on()方法实现事件的绑定

    mui(selecor).on(event,selector2,handler);
    

    event是String类型,代表要监听的事件名称,如tap
    handler式事件触发时的回调函数
    selector1和selector2都是选择器,但是selector2必须是selector1代表的HTML元对象下面的后代选择器

    代码:

    mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
    	//监听选择器  .mui-table-view对象下面的子元素选择器".mui-table-view-cell"对象的tap事件
    	
    })
    

    3.事件取消
    使用on方法绑定事件后,若希望取消绑定,则可以使用off()方法
    mui(selector).off():删除mui对象上所有的事件
    mui(selector1).off(event,selector2):删除selector1选择器对应的HTML对象中的selector2对应的子对象上特定事件的所有回调
    mui(selector1).off(event,selector2,handler):删除selector1选择器对应的HTML对象中对应的selector2子对象上之前绑定的事件函数,不支持匿名函数

    4.事件触发
    mui.trigger()方法可以动态触发特定DOM元素上的事件。

    mui.trigger(element,event,data);
    /*
    element是触发事件的DOM对象
    event是事件名称,如tap
    data是JSON对象格式,代表需要传递给事件的业务参数
    */
    例如:
    btn.addEventListener("tap",function(){
    	console.log("tap event trigger");
    })
    //自动触发按钮的点击事件
    mui.trigger(btn,'tap');
    

    5.手势事件:
    在开发移动端的应用时,会用到很多的手势操作,例如滑动,长按等,为了方便开发者快速集成这些手势,mui内置了常用的手势事件,目前支持的手势事件如下:

    事件名称说明
    tap单机屏幕
    doubletap双击屏幕
    longtap长按屏幕
    hold按住屏幕
    release离开屏幕
    swipeleft向左滑动
    swiperight向右滑动
    swipeup向上滑动
    swipedowm向下滑动
    dragstart拖动开始
    drag拖动中
    dragdowm拖动结束

    6.屏幕输出函数toast:

    <button type="button" class="mui-btn mui-btn-blue" οnclick="qq();">按钮</button>
    		<script type="text/javascript">
    			function qq(){
    				mui.toast(666);
    			}
    		</script>
    

    在这里插入图片描述

    1.mui插件初始化:使用mui.init()进行mui插件初始化

    2.页面初始化:
    在App开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady()方法,涉及到HTML5+的api,建议都写在mui.plusReady方法中

    3.事件触发:
    使用mui.trigger()方法可以动态触发待定DOM元素上的事件

    var btn = document.getElementById("submit");
    //监听点击事件
    btn.addEventListener("tap",function(){
    	console.log("tap event trigger");
    })
    //触发submit按钮的点击事件
    mui.trigger(btn,"tap");
    

    MUI Ajax的使用方法:
    mui框架基于html5+的XMLHTTPRequest,封装了常用的Ajax函数,支持GET、POSST请求方式,支持返回json、等数据类型

    1.mui.ajax()
    在这里插入图片描述

    <script type="text/javascript">
    			mui.init();
    			mui.plusReady(function () {
    			    document.querySelector('#btn1').addEventListener('tap',function(){
    					mui.ajax({
    						url:'www.baidu.com',
    						type:'GET',
    						success:function(data){
    							mui.toast(data);
    						},
    						error:function(xhr,type,errorThrown){
    							mui.toast(type);
    						}
    					});
    				});
    			});
    		</script>
    

    Ajax简化模式:
    mui.post(url[,data][,success][,dataType])
    url:地址,data:携带的请求数据,success:请求成功的回调函数,dataType:返回数据的类型
    例:

    mui.post('www.baidu.com',{
    	username:'username',
    	password:'password'
    },function(data){
    	//服务器返回响应,根据响应结果,分析是否登录成功
    	
    ],'json')
    

    mui.get(url[,data][,success][,dataType])

    mui.getJSON()方法是在mui.get()方法基础上的进一步简化,限定返回json格式的数据,其他参数和mui.get()方法一致

    展开全文
  • MUI框架开发HTML5

    2019-01-03 15:04:39
    MUI是一套前端框架,由DCLOUD公司研发而成,提供大量H5和js语言组成的组件,大大提高了开发效率,可以用于开发web端应用、web app等应用。
  • MUI框架快速开发

    2022-07-12 14:08:21
    使用MUI框架搭建项目,首先我们要下载一个HBuilderX。使用HBuilderX新建一个项目,在工具栏选择文件–新建–项目。 选择5+App项目,选择mui项目模板,输入项目名称,创建成功! 项目目录如下,包含基本的mui的css...

    创建项目

    使用MUI框架搭建项目,首先我们要下载一个HBuilderX。使用HBuilderX新建一个项目,在工具栏选择文件–新建–项目。
    在这里插入图片描述
    选择5+App项目,选择mui项目模板,输入项目名称,创建成功!
    在这里插入图片描述
    项目目录如下,包含基本的mui的css、js文件,入口文件是index.html。
    在这里插入图片描述

    快速编写

    标题

    输入mh可以快速生成标题栏。
    在这里插入图片描述
    生成的代码如下。
    在这里插入图片描述
    页面效果如图所示。
    在这里插入图片描述

    页面主体

    输入mbo,创建项目主体代码。
    在这里插入图片描述
    在mui-content包含的盒子内书写代码,属于项目主体的代码,当需要滚动的时候,mh生成的标题栏仍然一直在顶部。
    在这里插入图片描述

    底部选项卡

    输入mt,得到底部选项卡。
    在这里插入图片描述
    页面显示如下。
    在这里插入图片描述

    常用关键词

    mui-dom结构标题主体选项卡数字角标按钮九宫格区域滚动开关
    mdmhmbomtmbmbumgmsmsw

    字体图标

    MUI集成了自己的字体图标,输入关键词mi回车就可以得到一个字体图标的代码。
    在这里插入图片描述
    在这里插入图片描述
    mui提供的字体图标有限,有时候无法满足我们的需求,我们也可以使用第三方字体图标库,如阿里巴巴矢量图标库

    事件处理

    MUI使用on绑定事件。
    // 使用on()进行事件绑定--MUI事件处理,mui("").on(event,selector,handler)
    // mui("选择器"),选中元素得到mui对象;event绑定事件名称;selector:事件委托机制,给前面选中元素内部元素添加事件;hanlder:事件回调函数;
    mui(".myfooter").on("tap",".mui-tab-item",function(){
    	alert("按钮被点击了!");
    })	
    

    常见手势事件

    在开发移动端的应用时,会用到很多的手势操作,比如滑动、长按等,为了方便开放者快速集成这些手势,mui内置了常用的手势事件,目前支持的手势事件见如下列表:

    分类参数描述
    点击tap单击屏幕
    doubletap双击屏幕
    长按longtap长按屏幕
    hold按住屏幕
    release离开屏幕
    滑动swipeleft向左滑动
    swiperight向右滑动
    swipeup向上滑动
    swipedown向下滑动
    拖动dragstart开始拖动
    drag拖动中
    dragend拖动结束

    窗口对象

    1. H5+ Webview窗口对象
    2. Webview介绍

    底部选项卡-页面切换

    底部选项卡

    <nav class="mui-bar mui-bar-tab">
    	<a class="mui-tab-item mui-active">
    		<span class="mui-icon mui-icon-home"></span>
    		<span class="mui-tab-label">首页</span>
    	</a>
    	<a class="mui-tab-item">
    		<span class="mui-icon mui-icon-phone"></span>
    		<span class="mui-tab-label">电话</span>
    	</a>
    	<a class="mui-tab-item">
    		<span class="mui-icon mui-icon-email"></span>
    		<span class="mui-tab-label">邮件</span>
    	</a>
    	<a class="mui-tab-item">
    		<span class="mui-icon mui-icon-gear"></span>
    		<span class="mui-tab-label">设置</span>
    	</a>
    </nav>
    

    窗口对象设置

    // 窗口对象设置。首先定义一个数组,把所有页面的html的名字存储下来
    var subpage = ["home.html","wealth.html","praise.html","friends.html","mine.html"];
    // 添加页面:得到当前页面的窗口对象,再得到另外五个页面的窗口对象,最后使用一个append方法将其添加进来即可
    mui.plusReady(function () {
    	// 先得到当前页面的窗口对象
    	var currentWebview = plus.webview.currentWebview();
        for(var i= 0;i < 5;i++){
    		// 将五个页面对应的窗口对象都创建出来
    		var sub = plus.webview.create(subpage[i],subpage[i],{
    			top:"50px",
    			bottom:"50px"
    		});
    		// 将子窗口对象添加到当前页面窗口对象中
    		currentWebview.append(sub);
    		// 令打开APP首次展示的是首页,即subpage[0],若不加判断,则展示的是subpage[4]
    		if(i > 0){
    			sub.hide();
    		}
    	}
    });
    

    点击事件处理

    // 事件处理。点击底部按钮,其实就是点击不同的超链接元素,切换不同的元素显示和隐藏。
    // 首先,给超链接元素绑定事件,针对不同的href,显示/隐藏不同的webview
    mui(".myfooter").on("tap","a",function(){
    	// alert(this.href);
    	var currentActiveTab = this.getAttribute("href");
    	if(currentActiveTab == mui(".mui-active")[0].getAttribute("href")){
    		return; 
    	};
    	plus.webview.hide(mui(".mui-active")[0].getAttribute("href")); // 隐藏
    	plus.webview.show(currentActiveTab); // 显示
    });
    

    栅格系统

    MUI 提供了非常简单实用的12列响应式栅格系统。使用时只需在外围容器上添加.mui-row,在列上添加 .mui-col-[sm|xs]-[1-12],即可。

    尺寸超小屏幕(<400px)(Extrasmall)小屏幕(≥400px) Small
    类前缀.mui-col-xs-[1-12].mui-col-sm-[1-12]
    列(column)数12
    可嵌套

    实例:
    通过定义.mui-col-sm-6类在大屏(≥400px)设备上会展现为并排的两列,而.mui-col-xs-12在小屏(<400px)设备上会覆盖之前定义的类展现为水平排列。

    <div class="mui-content">
        <div class="mui-row">
            <div class="mui-col-sm-6 mui-col-xs-12">
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        Item 1    
                    </a>
                </li>
            </div>
            <div class="mui-col-sm-6 mui-col-xs-12">
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        Item 1
                    </a>
                </li>
            </div>
        </div>
    </div>
    

    页面传值

    通过openWindow

    old.html

    <button type="button" class="mui-btn mui-btn-blue" id="openwindow">按钮</button>
    <script type="text/javascript">
    	var openwindow = document.getElementById("openwindow");
    	openwindow.addEventListener("tap",function(){
    		mui.openWindow({
    			url:"new_file.html",
    			id:"new_file.html",
    			extras:{
    				username:"爱发脾气的小老虎",
    				password:"123456",
    			}
    		})
    	})
    </script>
    

    new.html

    <script type="text/javascript">
    	mui.init()
    </script>
    <script>
    	mui.plusReady(function(){
    		// 获取当前的窗口对象下的username值
    		var currentwindow = plus.webview.currentWebview();
    		alert(currentwindow.username);
    		alert(currentwindow.password);
    	})
    </script>
    

    通过自定义事件

    old.html

    <button type="button" class="mui-btn mui-btn-blue" id="open2">自定义事件</button>
    <script>
    	var file = document.getElementById("open2");
    	open2.addEventListener("tap",function(){
    		// 指明要打开的窗口
    		mui.openWindow({
    			url:"new_file2.html",
    			id:"new_file2.html",
    		})
    		var targetwebview = plus.webview.getWebviewById("new_file2.html");
    		// 需要传值的目标webview,自定义事件名称,json格式的数据
    		mui.fire(targetwebview,"getname",{username:"list"});
    	})
    </script>
    

    new.html

    <script type="text/javascript">
    	mui.init()
    </script>
    <script>
    	window.addEventListener("getname",function(e){
    		alert(e.detail.username)
    	})
    </script>
    

    【参考】

    1. MUI的简介
    展开全文
  • 体温上报APP,由服务端代码 和 MUI框架编写的手机APP代码组成 功能包括:登陆、注册、体温上报、个人体温信息列表展示、个人体温信息折线图、个人信息的展示和编辑(头像上传) 运行环境 服务端:PHP + PHPStudy ...
  • 另一方面,浏览器默认控件样式又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的ui框架但性能...mui框架有效的解决了这些问题,这是一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。
  • mui框架基于htm5plus的XMLHttpRequest,封装了常用的Ajax函数,支持GET、POST请求方式,支持返回json、xml、html、text、script数据类型; 本着极简的设计原则,mui提供了mui.ajax方法,并在mui.ajax方法基础上,...
  • mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格局,所以才无法滚动。那么如何解决这个问题呢? 解决方法: 一、在内容容器加上id,然后通过JS控制 <div class=...
  • mui框架使用心得

    2021-01-19 09:24:25
    这段时间一直在用mui框架做项目,现在很多快速开发的app大部分是用MUI和APICloud开发的。所以我就把他们对比了一下。mui有自己的UI组件,我在项目中,很少用框架的UI组件,而使用框架的js组件相对较多。我感觉MUI的...
  • Web App - MUI框架实战

    千次阅读 2022-03-29 11:58:40
    三、手机APP开发 - MUI实战 3.1 项目介绍 项目截图 主要实现功能:使用html5 plus 规范去调用硬件上的功能,使用mui框架来搭建UI界面 html5 plus接口文档:...使用mui框架时,可以通过
  • 我们很多同学在实施使用MUI框架的时候,在打开新的页面的时候常使用的方式是:mui.openwindow的方法,然而遇到网页需要从服务器或者是要嵌套外部的网页的时候,由于网速的问题会遇到加载时出现白屏,等待时间过长,导致...
  • 只需要初始化一下就可以了 mui.init(); 加下面这段代码即可: ...以上这篇mui框架 页面无法滚动的解决方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • 一套蓝色实用的基于mui框架制作的wap汽车4S店网站模板,汽车美容维修手机网站模板下载。
  • 最近开发一个基于mui框架的一个微信小程序,发现在使用mui框架中的switch开关的时候,想要达到联动的功能,让一个主开关控制几个子开关,发现虽然开关的颜色变了,但是开关上的小圆点不动,对于刚入mui框架的新手,...
  • MUI框架-01-介绍-准备-创建项目 从0开始快速高效学习 MUI 框架官方文档:http://dev.dcloud.net.cn/mui/ui/ (1)MUI 介绍 MUI 是什么,解决了什么问题?MUI 官方号称最接近原生APP体验的高性能前端框架简单...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,439
精华内容 2,575
关键字:

mui框架