楠槡

Mui开发笔记

2018-04-30

最近参加比赛,项目使用了 MUI,有些内容在使用过程中遇到了很多问题,记录下来,方便以后遇到时更好的解决。

页面

页面,或者说窗口,在 MUI 里叫做 Webviewer,

获取页面 ID - 跳转前提

获取页面 ID

1
2
3
4
5
mui.plusReady(function(){
var ws=plus.webview.currentWebview();//获取当前页面所属的Webview窗口对象
console.log( "窗口标识: "+ws.id );
console.log( "当前Webview窗口:"+ws.getURL() );
});

页面跳转

关闭当前页面,跳转到父页,并刷新

  1. 在子页面初始化时,注册beforeback方法;
1
2
3
4
5
6
7
8
9
10
mui.init({
beforeback: function() {
     //获得父页面的webview
var list = plus.webview.currentWebview().opener();
     //触发父页面的自定义事件(refresh),从而进行刷新
mui.fire(list, 'refresh');
//返回true,继续页面关闭逻辑
return true;
}
});

2.在父页面中添加事件监听:

1
2
3
window.addEventListener('refresh', function(e){//执行刷新
location.reload();
});

返回主页

1
2
3
var main = plus.webview.currentWebview().parent();
//触发主页面的gohome事件
mui.fire(main,'gohome');

二级页面返回

1
2
3
var taskList = plus.webview.getWebviewById('tasklist');
taskList.reload();
mui.back();

1、上面是我根据官方的提示方法,以及问答社区朋友的回答,得到的返回刷新页面的方法。

2、具体实现方法是,把以上代码放到触发返回刷新事件的元素上

1
2
3
4
5
document.getElementById("btn").addEventListener("tap", function() {
var taskList = plus.webview.getWebviewById('tasklist');
taskList.reload();
mui.back();
}

3、getWebviewById(‘tasklist’);中的tasklist即为要刷新的页面的id,但是这个id从何而来呢?

4、其实除了入口页面,其他页面都是可以通过openwindow的时候追加id的,也就是说是通过要刷新的页面的上一个页面得来。

1
2
3
4
mui.openWindow({
url: 'my-task-list.html',
id: 'tasklist',
}

页面刷新

1
2
3
4
5
6
7
function reflash(){
var wobj = plus.webview.getWebviewById("xx.html");
wobj.reload(true);
//js 重载 dom
//window.location.reload()
}

Api 获取

登陆实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function login(){
var xhr = new plus.net.XMLHttpRequest();
//预处理请求
xhr.open("POST", "http://dstantside.com/Sdnote/api/Login/Login");
//处理值
var user = {};
var attr1 = "userName";
var attr2 = "password";
user[attr1] = document.getElementById("account").value;
user[attr2] = document.getElementById("password").value;
//console.log(user);
//参数
//var data = {"userName":"12345","password":"494296145"};
//设置请求头
xhr.setRequestHeader('Content-Type','application/json');
// 发送HTTP请求
//xhr.send(JSON.stringify(user));
xhr.send(user);
xhr.onreadystatechange = function (){
if ( xhr.status == 200 ) {
console.log( "xhr请求成功:"+xhr.responseText);
//document.getElementById("test").textContent=xhr.responseText;
//格式化获取的值
var userInfo = eval("("+xhr.responseText+")");
var userName = eval('userInfo.'+'userName');
//打印登陆信息
plus.nativeUI.toast('你好!'+ userName);
} else {
plus.nativeUI.toast("登陆出错");
console.log( "xhr请求失败:"+xhr.status );
}
}
}

Ajax

发送请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var xhr = new plus.net.XMLHttpRequest();
//预处理请求
xhr.open("POST", "http://dstantside.com/Sdnote/api/Login/Login");
//参数
var data = {"userName":"12345","password":"494296145"};
//设置请求头
xhr.setRequestHeader('Content-Type','application/json');
// 发送HTTP请求
xhr.send(data);
xhr.onreadystatechange = function (){
if ( xhr.status == 200 ) {
console.log( "xhr请求成功:"+xhr.responseText);
document.getElementById("test").textContent=xhr.responseText;
} else {
console.log( "xhr请求失败:"+xhr.status );
}
}

请求状态监测

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//请求状态检测
xhr.onreadystatechange = function () {
switch ( xhr.readyState ) {
case 0:
console.log( "xhr请求已初始化" );
break;
case 1:
console.log( "xhr请求已打开" );
break;
case 2:
console.log( "xhr请求已发送" );
break;
case 3:
console.log( "xhr请求已响应");
break;
case 4:
if ( xhr.status == 200 ) {
alert( "xhr请求成功:"+xhr.responseText );
} else {
console.log( "xhr请求失败:"+xhr.status );
}
break;
default :
break;
}
}

JSON 处理

取值 - undefined 格式化值

获取到的值,可能是非标准键值对格式的,使用 eval("("+xhr.responseText+")")进行处理后再取值。

1
2
3
//格式化获取的值
var userInfo = eval("("+xhr.responseText+")");
var userName = eval('userInfo.'+'userName');

JSON格式化

1
2
3
4
5
var user = {};
var attr1 = "Token";
var attr2 = "UserID";
user[attr1] = plus.storage.getItem('Token');
user[attr2] = plus.storage.getItem('UserID');

格式化 object 为字符串

1
2
// object 时尝试转为字符串
JSON.stringify(nState)

字符串转 Json

1
2
// undefined 时尝试转为 json 对象
JSON.parse(xhr.responseText);

取值 - 列表取值

LocalStorage

getLength: 获取应用存储区中保存的键值对的个数

1
2
var total = plus.storage.getLength();
alert(total);

setItem: 修改或添加键值(key-value)对数据到应用数据存储中

1
plus.storage.setItem('name','hcoder');

getItem: 通过键(key)检索获取应用存储的值

1
2
var name = plus.storage.getItem('name');
mui.toast(name);

removeItem: 通过key值删除键值对存储的数据

1
plus.storage.removeItem('name');

clear: 清除应用所有的键值对存储数据

1
void plus.storage.clear();
使用支付宝打赏
使用微信打赏

若你觉得我的文章对您有帮助,点击上方按钮请我喝杯咖啡☕

若文章中存在问题,或您有任何意见和疑问,均可与我联系

扫描二维码,分享此文章 📱