前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Mui开发笔记

Mui开发笔记

作者头像
李郑
发布2019-12-10 18:00:59
1.5K0
发布2019-12-10 18:00:59
举报
文章被收录于专栏:漫漫全栈路

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

页面

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

获取页面 ID - 跳转前提

获取页面 ID

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

页面跳转

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

  1. 在子页面初始化时,注册beforeback方法;
代码语言:javascript
复制
mui.init({  
    beforeback: function() {  
     //获得父页面的webview  
        var list = plus.webview.currentWebview().opener();  
     //触发父页面的自定义事件(refresh),从而进行刷新  
        mui.fire(list, 'refresh');  
        //返回true,继续页面关闭逻辑  
        return true;  
    }  
});

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

代码语言:javascript
复制
window.addEventListener('refresh', function(e){//执行刷新
    location.reload();
});

返回主页

代码语言:javascript
复制
var main = plus.webview.currentWebview().parent();
//触发主页面的gohome事件
mui.fire(main,'gohome');

二级页面返回

代码语言:javascript
复制
var taskList = plus.webview.getWebviewById('tasklist');
taskList.reload();
mui.back();

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

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

代码语言:javascript
复制
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的,也就是说是通过要刷新的页面的上一个页面得来。

代码语言:javascript
复制
mui.openWindow({
        url: 'my-task-list.html',
        id: 'tasklist',
}

页面刷新

代码语言:javascript
复制
function reflash(){
    var wobj = plus.webview.getWebviewById("xx.html");
    wobj.reload(true);
	
    //js 重载 dom
    //window.location.reload()
}

Api 获取

登陆实例

代码语言:javascript
复制
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

发送请求

代码语言:javascript
复制
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 );
    }
}

请求状态监测

代码语言:javascript
复制
//请求状态检测
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+")")进行处理后再取值。

代码语言:javascript
复制
//格式化获取的值
var userInfo = eval("("+xhr.responseText+")");
var userName = eval('userInfo.'+'userName');

JSON格式化

代码语言:javascript
复制
var user = {};
var attr1 = "Token";
var attr2 = "UserID";
user[attr1] = plus.storage.getItem('Token');
user[attr2] = plus.storage.getItem('UserID');

格式化 object 为字符串

代码语言:javascript
复制
// object 时尝试转为字符串
JSON.stringify(nState)

字符串转 Json

代码语言:javascript
复制
// undefined 时尝试转为 json 对象
JSON.parse(xhr.responseText);

取值 - 列表取值

LocalStorage

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

代码语言:javascript
复制
var total = plus.storage.getLength();
alert(total);

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

代码语言:javascript
复制
plus.storage.setItem('name','hcoder');

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

代码语言:javascript
复制
var name = plus.storage.getItem('name');
mui.toast(name);

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

代码语言:javascript
复制
plus.storage.removeItem('name');

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

代码语言:javascript
复制
void plus.storage.clear();
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-04-30,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 页面
    • 获取页面 ID - 跳转前提
      • 页面跳转
        • 返回主页
          • 二级页面返回
            • 页面刷新
            • Api 获取
              • 登陆实例
              • Ajax
                • 发送请求
                  • 请求状态监测
                  • JSON 处理
                    • 取值 - undefined 格式化值
                      • JSON格式化
                        • 格式化 object 为字符串
                        • 字符串转 Json
                      • 取值 - 列表取值
                      • LocalStorage
                      相关产品与服务
                      对象存储
                      对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
                      领券
                      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档