mui h5+文档最详版

界面初始化

初始化就是把一切程序设为默认状态，把没准备的准备好。
mui框架将很多功能配置都集中在mui.init方法中，要使用某项功能，只需要在mui.init方法中完成对应参数配置即可，目前支持在mui.init方法中配置的功能包括：创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载。

H5plus初始化

在我们APP的开发中，如果我们用到了H5+的一些API或者接口，我们需要初始化另外一个函数，类属于 JS 中的window.onload 或者 window.ready

Mui.plusReady(); 所有涉及到H5+的东西，建议写到这个里面

mui.plusReady(function(){		
			
    var  w = plus.webview.currentWebview();
    console.log(w);		
			
});

创建子页面

为防止APP运行过程中内容滚动出现卡顿的现象，所以部分页面我们采用头部和内容分离的形式进行实现，比如头部导航和底部导航

 mui.init({
  subpages:[{
  url:your-subpage-url,//子页面HTML地址，支持本地地址和网络地址
  id:your-subpage-id,//子页面标志
  styles:{
    top:subpage-top-position,//子页面顶部位置
    bottom:subpage-bottom-position,//子页面底部位置
    width:subpage-width,//子页面宽度，默认为100%
    height:subpage-height,//子页面高度，默认为100%
    ......
  },
     extras:{
	name:'zxd学院'//子页面通过plus.webview.currentWebview().name能拿到这个值
		}//额外扩展参数
    }]
  });

打开界面

//打开新窗口
mui.openWindow({ 
	url:'target.html', //需要打开页面的url地址 
	id:'target',  //需要打开页面的url页面id
	styles:{ 
		top:'0px',//新页面顶部位置 
		bottom:'0px',//新页面底部位置 
//					width:newpage-width,//新页面宽度，默认为100% 
//					height:newpage-height,//新页面高度，默认为100% ...... 
	}, 
	extras:{ 
		name:'aries',
		age:'18',
//					.....//自定义扩展参数，可以用来处理页面间传值 
	},show:{ //控制打开页面的类型
		autoShow:true,
//					//页面loaded事件发生后自动显示，默认为true 
		aniShow:'zoom-fade-out',//页面显示动画，默认为”slide-in-right“；  页面出现的方式 左右上下
		duration:'1000'//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒； 
	}, waiting:{ // 控制 弹出转圈框的信息
		autoShow:true,//自动显示等待框，默认为true 
		title:'东翌学院...',//等待对话框上显示的提示内容 
		options:{ 
			width:'300px',//等待框背景区域宽度，默认根据内容自动计算合适宽度 
			height:'300px',//等待框背景区域高度，默认根据内容自动计算合适高度 ...... 
		} 
	}
});

参数传递

mui.plusReady(function(){
	var self = plus.webview.currentWebview(); //获得当前页面的对象
	var name = self.name; //name 和 age 为传递的参数的键
	var age = self.age;
	
	console.log(name);
	console.log(age);
	
	// 获得首页  专用的
	var index = plus.webview.getLaunchWebview();
	
	// 获得指定页面的对象 注意，要确保你的这个页面是存在的， 就是打开过的
	var target = plus.webview.getWebviewById('目标页面的id');
	
});

控制页面load显示

show:{  // openwindow 函数内设置
    autoShow:false 
} 
 
// 目标页面
//从服务器获取数据 ....   
这里是业务逻辑
//业务数据获取完毕，并已插入当前页面DOM； 
//注意：若为ajax请求，则需将如下代码放在处理完ajax响应数据之后；
mui.plusReady(function(){ 
    //关闭等待框               
    plus.nativeUI.closeWaiting();
     
    //显示当前页面          
    mui.currentWebview.show(); 
});

关闭界面

1，点击包含.mui-action-back类的控件

2，在页面上，向右快速滑动

3， Android手机按下back按键

mui框架封装的页面右滑关闭功能，默认未启用，若要使用右滑关闭功能，需要在mui.init();方法中设置swipeBack参数，如下：

mui.init({
 	swipeBack:true //启用右滑关闭功能
});

mui框架默认会监听Android手机的back按键，然后执行页面关闭逻辑； 若不希望mui自动处理back按键，可通过如下方式关闭mui的back按键监听:

mui.init({
	keyEventBind: {
	 	backbutton: false //关闭back按键监听 
	}
});

底部导航切换界面

HTML部分:

<nav class="mui-bar mui-bar-tab">
	    <a id="defaultTab" class="mui-tab-item mui-active" href="a.html">
	        <span class="mui-icon mui-icon-videocam"></span>
	        <span class="mui-tab-label">社区</span>
	    </a>
	    <a class="mui-tab-item" href="b.html">
	        <span class="mui-icon mui-icon-chatboxes"><span style="display: none;" class="mui-badge">1</span></span>
	        <span class="mui-tab-label">群组</span>
	    </a>
	    <a class="mui-tab-item" href="c.html">
	        <span class="mui-icon mui-icon-home"></span>
	        <span class="mui-tab-label">我的</span>
	    </a>
</nav>

JavaScript部分:

//mui初始化
mui.init();
var subpages = ['a.html', 'b.html', 'c.html'];
var subpage_style = {
	top:'0px',
	bottom: '51px'
};	
var aniShow = {};	
 //创建子页面，首个选项卡页面显示，其它均隐藏；
mui.plusReady(function() {
	var self = plus.webview.currentWebview();
	for (var i = 0; i < subpages.length; i++) {
		var temp = {};
		var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
		if (i > 0) {
			sub.hide();
		}else{
			temp[subpages[i]] = "true";
			mui.extend(aniShow,temp);
		}
		self.append(sub);
	}
});
 //当前激活选项
var activeTab = subpages[0];

 //选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
	var targetTab = this.getAttribute('href');
	if (targetTab == activeTab) {
		return;
	}
	//显示目标选项卡
	//若为iOS平台或非首次显示，则直接显示
	if(mui.os.ios||aniShow[targetTab]){
		plus.webview.show(targetTab);
	}else{
		//否则，使用fade-in动画，且保存变量
		var temp = {};
		temp[targetTab] = "true";
		mui.extend(aniShow,temp);
		plus.webview.show(targetTab,"fade-in",300);
	}
	//隐藏当前;
	plus.webview.hide(activeTab);
	//更改当前活跃的选项卡
	activeTab = targetTab;
});
 //自定义事件，模拟点击“首页选项卡”
document.addEventListener('gohome', function() {
	var defaultTab = document.getElementById("defaultTab");
	//模拟首页点击
	mui.trigger(defaultTab, 'tap');
	//切换选项卡高亮
	var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
	if (defaultTab !== current) {
		current.classList.remove('mui-active');
		defaultTab.classList.add('mui-active');
	}
});

自定义事件

监听自定义事件 - 目标页

window.addEventListener('shijian',function(event){
  //通过event.detail可获得传递过来的参数内容
  ....
  var name = event.detail.namel
  console.log(name);
  shijian();    
})

触发自定义事件 - 本页

//首先获得目标页面的对象
var targetPage = plus.webview.getWebviewById('目标页面id'); 

mui.fire(targetPage,'shijian',{
  //自定义事件参数
  name:'dongyixueyuan'
});

页面预加载

所谓的预加载技术就是在用户尚未触发页面跳转时，提前创建目标页面，这样当用户跳转时，就可以立即进行页面切换，节省创建新页面的时间，提升app使用体验。mui提供两种方式实现页面预加载。

方式一：通过mui.init方法中的preloadPages参数进行配置

mui.init({  // 可同时加载一个或者多个界面
	preloadPages:[ //加载一个界面
	{ 
		url:'a.html', 
		id:'a', 
		styles:{},//窗口参数 
		extras:{},//自定义扩展参数
		subpages:[{},{}]//预加载页面的子页面 
	},{ // 可加载另外一个界面，不需要可直接删除
		url:'b.html', 
		id:'b', 
		styles:{},//窗口参数 
		extras:{},//自定义扩展参数
		subpages:[{},{}]//预加载页面的子页面 
	}
	]
});

方式二：通过mui.preload方法预加载,一次只能预加载一个页面,若需加载多个webview，则需多次调用mui.preload()方法；

mui.plusReady(function(){
    var productView = mui.preload({
        url: 'list.html',
        id: 'list',
    });
    console.log(productView); //获得预加载界面的对象
});

消息框

警告消息框

mui.alert('欢迎使用Hello 东翌学院','东翌学院',function(){
	alert('你刚关闭了警告框');
});

消息提示框

var btnArray = ['是','否'];
	mui.confirm('东翌学院是专业跨平台APP培训学院，赞？','Hello 东翌学院',btnArray,function(e){
	if(e.index==0){
		alert('点击了- 是');
		//自己的逻辑	 	 			 	 	
	}else{
		alert('点击了- 否');
	}
});

输入对话框

var btnArray = ['确定','取消'];
	mui.prompt('请输入你对东翌学院的评语：','内容好','东翌学院',btnArray,function(e){
		if(e.index==0){
			alert('点击了 - 确认');
			var  value = e.value; // value 为输入的内容

		}else{
			alert('点击了 - 取消');
		}
});

自动消息对话框

mui.toast('显示内容');

日期选择框

//js里的月份 是从0月开始的，也就是说，js中的0月是我们1月
			
var dDate=new Date(); //默认显示的时间
dDate.setFullYear(2015,5,30);
var minDate=new Date(); //可选择的最小时间
minDate.setFullYear(2010,0,1);
var maxDate=new Date(); //课选择的最大的时间
maxDate.setFullYear(2016,11,31); 
				
				
plus.nativeUI.pickDate( function(e) {
	
		var d=e.date;
		alert('您选择的日期是:'+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+ d.getDate());
	
	},function(e){
		
		alert('您没有选择日期');
		
},{title:"请选择日期",date:dDate,minDate:minDate,maxDate:maxDate});

时间选择框

var dTime=new Date();
dTime.setHours(20,0); //设置默认时间
plus.nativeUI.pickTime(function(e){
		
		var d=e.date;
		alert("您选择的时间是："+d.getHours()+":"+d.getMinutes());
		
	},function (e){
		
		alert('您没有选择时间');
		
},{title:"请选择时间",is24Hour:true,time:dTime});

原生模式ActionSheet

var btnArray = [{title:"分享到微信"},{title:"分享到新浪微博"},{title:"分享到搜狐微博"}]; //选择按钮  1 2 3
plus.nativeUI.actionSheet( {
	title:"分享到",
	can