mui教程1——mui介绍、创建mui项目与初步使用、MUI常用代码提示、webview基本操作、事件管理、mui的内置函数

一、MUI资源索引及MUI介绍

1，资源索引

官网：http://dev.dcloud.net.cn/mui/

MUI官方文档：http://dev.dcloud.net.cn/mui/ui/

调用手机硬件（相册、摄像头等）的官方文档：http://www.html5plus.org/doc/h5p.html

 

其他：

Dcloud官网：http://dcloud.io/

• Dcloud问答社区：http://ask.dcloud.net.cn/

• Dcloud文档汇总地址：http://ask.dcloud.net.cn/docs/

• Hello mui线上演示地址：http://www.dcloud.io/hellomui...

• 官方入门文档(强烈推荐阅读):

  • DCloud产品概述

  • App入门开发

  • mui产品

  • 新手指南

• 案例汇总：http://dcloud.io/case/

• github地址：https://github.com/dcloudio/

• 开源项目地址：https://github.com/dcloudio/c...

官方分类文档

• html5+官网文档：http://www.html5plus.org/doc/

• mui文档：http://dev.dcloud.net.cn/mui/ui/

• 5+ App开发Native.js入门指南：http://ask.dcloud.net.cn/arti...

• Native.js示例汇总：http://ask.dcloud.net.cn/arti...

• 流应用开发指南：http://ask.dcloud.net.cn/arti...

2，相关概念介绍

（1）html5+：html5+能将html5 app打包成原生app；html5指封装了常用的API，需添加功能则可以用到native js。

（2）MUI：mui是Dcloud官方推出的一个基于html5+标准的框架，同时拥有h5组件和原生组件，原生组件依赖于html5+运行环境，也就是原生app里面的webview组件（能加载显示网页，可以将其视为一个浏览器），所以mui里面的原生组件不能用于浏览器环境，可以通过mui里面的mui.os.plus进行判断，如果是plus环境会返回true，否则会返回undefined。开发者可以根据自己的需要进行代码适配，对于APP使用增强的原生组件，对于普通浏览器里面运行的页面使用h5组件。同时用户还可以使用mui.os.android、mui.os.ios及mui.os.wechat对平台进行检测，然后书写不同的逻辑代码。对于mui里面没有封装的原生组件，大家可以根据自己的需要基于html5+标准和native.js语法进行个性化定制。因此这里我们可以有一个基本影响就是我们开始可以直接上手mui，不过需要明白mui与其他UI框架的区别在于，mui拥有独有的原生组件，而且这个是依赖于html5+标准的，所以mui里面的很多组件实现方法甚至用户就是html5+里面的标准写法，对html5+标准有一定了解有助于我们理解mui的一些使用方法。

（3）webview：Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作。通过plus.webview可获取应用界面管理对象。那么串口和webview有什么异同？一个html页面就是一个窗口，一个html页面可以创建多个webview，这个webview是原生APP中浏览网页的组件，android和iOS都有，html5plus中的webview是对原生webview的封装，可以用js进行调用，所以它的运行环境是APP环境，普通浏览器不支持。

二、创建mui项目与初步使用

HBuilder有对mui进行支持，示例代码均是基于HBuilder进行的。

1，在HBuilder中新建移动项目选中

2，生成基本结构

index.html中只用分别敲入mh、ml、mt，在html生成各目录结构，就有这么些东东了：

index.html原代码：

   
   
   
   
   
   
   


 

    
    

微信

 

 
 

        
• 
              
                   Item 1
              
          

        
• 
              
                    Item 2
              
          

        
• 
              
                    Item 3
              
          

    

 
 

    
        
         首页
    
    
        
         电话
    
    
        
         邮件
    
    
        
         设置
    
 

三、MUI常用代码提示

结构类:

 

• edo: html结构模板 (使用方式,输入 edo–>回车–>输入模块名(如home)–>Tab键(注意不要回车)
• mhe : 固定头部导航
• mbo : 搭配头部使用, 有头部时, 添加mbo 可确保内容不被头部遮挡
• mta : 各种Tab 选项卡, 推荐使用 可左右滑动(mtabviewpage)
• mgr : 9宫格
• mac : 折叠面板
• mof : 侧滑菜单
• msc : 区域滚动

 

---

 

表单类

 

• mfo : 表单框架
• min : 文本框
• mra : 单选框
• mch : 复选框
• msw : 开关
• mran : 滑块
• mnu : 数字框

 

---

 

其他公用或工具类

 

• mba : 角标
• mic : 图标
• mslider : 轮播组件 (可左右滑动的视图, 应用广泛, 如tab就有用到)
• mslider_grallery : 轮播图, 根据轮播组件加工得到
• mpu : 下拉刷新容器
• act : 菜单
• mpo : 弹出悬浮菜单

 

提示 …

 

• mda : 弹出框
• mdc : 确认框
• mdp : 输入框
• mdt : 自动消失框

看一下代码提示，大概就知道，一般是以m开头的，比如mheader、mbody等，就可以很快找到快捷键了！

mheader 头部

mbody  内容体

 

四、webview操作说明

1，创建新的webview窗口

     WebviewObject plus.webview.create( url, id, styles, extras );
注意plus只能在手机上运行！具体参数的解释之后会在案例中进行说明。

如果直接运行会报错：

[Web浏览器] "Uncaught ReferenceError: plus is not defined (提示: plus api只能在手机app里运行)" /WeChat/index.html (69)
因此要想测试这个方法，需要在手机端运行这个程序。因为南雁的手机为华为系列的，华为手机进入开发者模式：版本号连续按5+次，然后在系统设置中有开发者选项，开启usb调试选项。然后嘛点击这个地方开启手机运行该程序：

2，显示Webview窗口

  plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );
创建完的webview需要show才能显现出来的，显现的时候是需要有它的id的。

3，隐藏Webview窗口

 void plus.webview.hide( id_wvobj, aniHide, duration, extras );

让窗口不可见

4，获取当前webview窗口

  WebviewObject plus.webview.currentWebview();

5，代码分析

来一段代码（代码4）进行分析：

分析：（1）var self = plus.webview.currentWebview();获取当前的webview，之后按照subPages依次增加子页面；

（2）var sub = plus.webview.create(subPages[i],subPages[i],subPageStyle);  创建的4个参数有前三个参数即可，url用来打开相关链接，id用来标志链接。

（3）plus.webview.show(subPages[0]);  这段代码能实现显现子页面，手机中就可以有如下页面！

（4）sub1.html的效果图如下：

（5）绑定事件：

// 绑定事件
 mui(".mui-bar-tab").on("tap","a",function(e){
  var page = this.getAttribute("href");
  plus.webview.show(page, "fade-in", 100);
 })

 

五、事件管理

1，事件绑定

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

• event

  Type: String

  需监听的事件名称，例如：'tap'

• selector

  Type: String

  选择器

• handler

  Type: Function( Event event )

  事件触发时的回调函数，通过回调中的event参数可以获得事件详情

示例代码：

点击新闻列表，获取当前列表项的id，并将该id传给新闻详情页面，然后打开新闻详情页面

mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
  //获取id
  var id = this.getAttribute("id");
  //传值给详情页面，通知加载新数据
  mui.fire(detail,'getDetail',{id:id});
  //打开新闻详情
  mui.openWindow({
    id:'detail',
    url:'detail.html'
  });
}) 

其中tab表示手势事件的单击

2，时间绑定的取消

off(event,selector,handle)适用于取消对应选择器上特定事件所执行的特定回调，例如：

//点击li时，执行foo_1函数
mui("#list").on("tap","li",foo_1);
//点击li时，执行foo_2函数
mui("#list").on("tap","li",foo_2);

function foo_1(){
  console.log("foo_1 execute");
}

function foo_2(){
  console.log("foo_2 execute");
}
//点击li时，不再执行foo_1函数，但会继续执行foo_2函数
mui("#list").off("tap","li",foo_1);

其他取消方式类似，可参考官方文档

3，事件触发

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

示例代码如下：

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

利用这段代码就可以出发相关的时间，是不是很神奇？

4，相关手势事件说明

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

当然事件是可以用addListener：

elem.addEventListener("swipeleft",function(){
     console.log("你正在向左滑动");
});

所以，还记不记得上一节的代码？

mui(".mui-bar-tab").on("tap","a",function(e){
  var page = this.getAttribute("href");
  plus.webview.show(page, "fade-in", 100);
 })

表示通过css选择器找到 (".mui-bar-tab"). 相关的dom对象，然后呢，对于里面的a标签，一旦点击，就执行下面的操作——获取相关的href，然后渐变的显示。

六、mui的内置函数

1，init

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

2，mui

mui使用css选择器获取HTML元素，返回mui对象数组。
mui("p")：选取所有

元素
mui("p.title")：选取所有包含.title类的

元素

若要将mui对象转化成dom对象，可使用如下方法（类似jquery对象转成dom对象）：

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

3，each

each既是一个类方法，同时也是一个对象方法，两个方法适用场景不同；换言之，你可以使用mui.each()去遍历数组或json对象，也可以使用mui(selector).each()去遍历DOM结构。

输出当前数组中每个元素的平方

var array = [1,2,3]
mui.each(array,function(index,item){
  console.log(item*item);
}) 

4，extend

将两个对象合并成一个对象。

var target = {
  company:"dcloud",
  product:{
    mui:"小巧、高效"
  }
} 
var obj1 = {
  city:"beijing",
  product:{
    HBuilder:"飞一样的编码"
  }
}
mui.extend(target,obj1);
//输出：{"company":"dcloud","product":{"HBuilder":"飞一样的编码"},"city":"beijing"}
console.log(JSON.stringify(target));

5，later

setTimeOut封装

6，scrollTo

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

示例：1秒钟之内滚动到页面顶部

mui.scrollTo(0,1000);

7，os

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

检测是否为iOS或安卓系统版本是否小于4.4

if(mui.os.ios||(mui.os.android&&parseFloat(mui.os.version)<4.4)){
   //...
 } 

 

参考文献：

1，https://www.cnblogs.com/yxrs/p/8093778.html

2，https://blog.csdn.net/guddqs/article/details/76550216?locationNum=9&fps=1

3，http://dev.dcloud.net.cn/mui/event/

4，