Mui开发笔记

李郑

发布于 2019-12-10 18:00:59

1.5K0

发布于 2019-12-10 18:00:59

文章被收录于专栏：漫漫全栈路

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

页面

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

获取页面 ID - 跳转前提

获取页面 ID

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

页面跳转

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

在子页面初始化时,注册beforeback方法;

mui.init({  
    beforeback: function() {  
　　　　 //获得父页面的webview  
        var list = plus.webview.currentWebview().opener();  
　　　　 //触发父页面的自定义事件(refresh),从而进行刷新  
        mui.fire(list, 'refresh');  
        //返回true,继续页面关闭逻辑  
        return true;  
    }  
});

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

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

返回主页

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

二级页面返回

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

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

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

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的，也就是说是通过要刷新的页面的上一个页面得来。

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

页面刷新

function reflash(){
    var wobj = plus.webview.getWebviewById("xx.html");
    wobj.reload(true);
	
    //js 重载 dom
    //window.location.reload()
}

Api 获取

登陆实例

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

发送请求

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

请求状态监测

//请求状态检测
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+")")进行处理后再取值。

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

JSON格式化

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

格式化 object 为字符串

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

字符串转 Json

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

取值 - 列表取值

LocalStorage

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

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

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

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

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

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

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

plus.storage.removeItem('name');

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

void plus.storage.clear();

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-04-30，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

存储

json

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

存储

json

登录后参与评论

0 条评论

热度