关于mui的常用方法和操作

手机内嵌html5页面开发(根据MUI框架)

1. 先安装开发工具HBuilder:工具内内嵌的有tomcat(自动启动加载),可连接手机直接打包成 app发布到手机上

 

2. 在HBuilder中导入MUI常用页面效果实例 (当前文件夹下的hello-mui) 附:文档说明地址http://dev.dcloud.net.cn/mui/ui/

3.操作手机硬件H5+则参考网址:http://www.html5plus.org/doc/h5p.html 

 

 

 

 

常用方法

1.打开新页面传值

发送:

mui.openWindow({

    url:'info.html',

    id:'info.html',

    extras:{

        name:'mui',

        version:'0.5.8'

    }

});

 

接收:

var self = plus.webview.currentWebview();

var name = self.name;

var version = self.version;

 

2.已经打开页面之间的传值(自定义事件)

发送:

 

当前页面: var currentView=plus.webview.currentWebview();

当前子页面:var cView=plus.webview.currentWebview().children()[0];

当前父页面:var cView=plus.webview.currentWebview().parent(); 

当前页面的创建页面:var cView=plus.webview.opener();

起始页面:var launchView=plus.webview.getLaunchWebview();

根据id获得页面: var index=plus.webview.getWebviewById("backHtml");

 

 

mui.fire(webView,"index_home",{

"areaName":name

});

接收端

window.addEventListener('index_home', function(event) {

var areaNamehtml = document.getElementById("areaName");

areaNamehtml.innerHTML=event.detail.areaName;

});

//可以单独定义方法名

window.addEventListener("swipeleft",closeMenu);

function closeMenu () {}

 

3.页面事件绑定

使用html5统一写法document.getElementById("button").addEventListener('tap事件代码见下方',

function() {

alert(1);

});

 

2.列表类绑定事件

mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){

//获取id

 var id = this.getAttribute("id");

//进行处理 

//...

 })

 

注意:MUI的TAP事件在部分手机上会执行2次

 

事件代码:

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

 

 

4.本地存储参数(与服务器端session类似)注:只能存储字符串,数字存不进

存值:

plus.storage.setItem('uuid', result.uuid);

取值:

plus.storage.getItem('uuid);

  

5. Ajax 请求使用

mui.post('http://server-name/login.php',{

username:'username',

password:'password'

},function(data){

//服务器返回响应，根据响应结果，分析是否登录成功；

...

},'json');

 

2.

mui.ajax(url, {

data: {},

dataType: 'json', //服务器返回json格式数据

type: 'post', //HTTP请求类型

timeout: 10000, //超时时间设置为10秒；

success: function(data) {

},

error: function(xhr, type, errorThrown) {

//异常处理；

plus.nativeUI.closeWaiting();

plus.nativeUI.toast("检查更新失败，请稍后再试");

console.log(type);

}

});

 

 

6.关闭,刷新,返回,加载中

关闭:

var ws=plus.webview.currentWebview();

plus.webview.close(ws);//可以是窗口对象或者id

 

mui.back();//当前页面关闭

 

刷新:

location.reload();

加载中

plus.nativeUI.showWaiting("加载中");

plus.nativeUI.closeWaiting();

 

7.监控返回操作,刷新上一个页面

mui.plusReady(function() {

var old_back = mui.back;

mui.back = function() {

var opener = plus.webview.currentWebview().opener();

opener.reload()

old_back();

}

});

8.首页模拟选项卡点击切换

var defaultTab = document.getElementById("defaultTab");//选项卡id

//模拟首页点击

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');

}