HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

tap一下会触发两次事件

mui

最后发现问题是:引用了两次mui.min.js

最后发现问题是:引用了两次mui.min.js

【示例】mui.ajax()方法中的XMLHttpRequest

跨域请求 AJAX跨域 ajax 跨域 HTML5+ XMLHttpRequest mui 技术分享

XMLHttpRequest和AJAX

XMLHttpRequest(以下简称为“XHR”)中文可以解释为“可扩展超文本传输请求”,Xml可扩展标记语言,Http超文本传输协议,Request请求。XMLHttpRequest对象是“异步JavaScript和XML”(Asynchronous Javascript And XML)——AJAX实现的核心。

mui.ajax()中的XHR

mui.ajax()中的XHR对象有两种:
window.XMLHttpRequest
5+XMLHttpRequest

异步/同步

AJAX最大的优点就是异步,但是在某些情况下依旧需要进行同步的请求。window的XHR是支持同步的,但是5+的XHR并不支持。也就是说,当使用window的XHR时,可以通过设置async属性来调整异步/同步。

mui.ajax({  
    url: 'http://192.168.0.101:8080/test'  
    data: {},  
    async: true || false, // 异步 || 同步  
    dataType: 'json',  
    type: 'post',  
    timeout: 10000,  
    success: function(data) {  
        // 请求成功  
    },  
    error: function(xhr, type, errorThrown) {  
        // 请求失败  
    }  
});  

关于mui.ajax()的使用,在其API中已经做出了较为全面的说明,这里主要说明mui.ajax()对两种XHR在不同场景下的使用。

5+运行环境

在5+运行环境下,才可以调用plus相关的API,可以使用5+的XHR。
5+运行环境目前有:5+App、流应用基座、360手机助手。

crossDomain

mui.ajax()配置信息的settings中有个参数crossDomain,说明为“强制使用5+跨域”,此时使用5+的XHR

mui.ajax({  
    url: 'http://192.168.0.101:8080/test'  
    data: {},  
    async: true,  
    dataType: 'json',  
    crossDomain: true, //强制使用5+跨域  
    type: 'post',  
    timeout: 10000,  
    success: function(data) {  
        // 请求成功  
    },  
    error: function(xhr, type, errorThrown) {  
        // 请求失败  
    }  
});  

跨域请求

5+默认采用UIWebview,是支持本地资源跨域请求的。即,此时会调用window的XHR。
当然,你也可以设置crossDomain为true,强制使用5+XHR。

WKWebview

5+的webview在创建的时候,可以设置窗口使用的内核,但是只能在iOS8.0及以上系统中使用。
WKWebview出于安全的设计,不支持window的XHR跨域。所以当使用WKWebview时,始终调用5+的XHR

其他

除了上述提到的场景,mui.ajax()均会调用window的XHR

手机浏览器环境

浏览器环境,一定使用的是window的XHR。
关于微信等浏览器环境开发中的跨域,请参考mui.getJSONP()实现Web跨域

继续阅读 »

XMLHttpRequest和AJAX

XMLHttpRequest(以下简称为“XHR”)中文可以解释为“可扩展超文本传输请求”,Xml可扩展标记语言,Http超文本传输协议,Request请求。XMLHttpRequest对象是“异步JavaScript和XML”(Asynchronous Javascript And XML)——AJAX实现的核心。

mui.ajax()中的XHR

mui.ajax()中的XHR对象有两种:
window.XMLHttpRequest
5+XMLHttpRequest

异步/同步

AJAX最大的优点就是异步,但是在某些情况下依旧需要进行同步的请求。window的XHR是支持同步的,但是5+的XHR并不支持。也就是说,当使用window的XHR时,可以通过设置async属性来调整异步/同步。

mui.ajax({  
    url: 'http://192.168.0.101:8080/test'  
    data: {},  
    async: true || false, // 异步 || 同步  
    dataType: 'json',  
    type: 'post',  
    timeout: 10000,  
    success: function(data) {  
        // 请求成功  
    },  
    error: function(xhr, type, errorThrown) {  
        // 请求失败  
    }  
});  

关于mui.ajax()的使用,在其API中已经做出了较为全面的说明,这里主要说明mui.ajax()对两种XHR在不同场景下的使用。

5+运行环境

在5+运行环境下,才可以调用plus相关的API,可以使用5+的XHR。
5+运行环境目前有:5+App、流应用基座、360手机助手。

crossDomain

mui.ajax()配置信息的settings中有个参数crossDomain,说明为“强制使用5+跨域”,此时使用5+的XHR

mui.ajax({  
    url: 'http://192.168.0.101:8080/test'  
    data: {},  
    async: true,  
    dataType: 'json',  
    crossDomain: true, //强制使用5+跨域  
    type: 'post',  
    timeout: 10000,  
    success: function(data) {  
        // 请求成功  
    },  
    error: function(xhr, type, errorThrown) {  
        // 请求失败  
    }  
});  

跨域请求

5+默认采用UIWebview,是支持本地资源跨域请求的。即,此时会调用window的XHR。
当然,你也可以设置crossDomain为true,强制使用5+XHR。

WKWebview

5+的webview在创建的时候,可以设置窗口使用的内核,但是只能在iOS8.0及以上系统中使用。
WKWebview出于安全的设计,不支持window的XHR跨域。所以当使用WKWebview时,始终调用5+的XHR

其他

除了上述提到的场景,mui.ajax()均会调用window的XHR

手机浏览器环境

浏览器环境,一定使用的是window的XHR。
关于微信等浏览器环境开发中的跨域,请参考mui.getJSONP()实现Web跨域

收起阅读 »

关闭键盘的方法

document.activeElement.blur();
遇到了键盘关闭的问题,在mui里找了好久都没有解决,最后百度解决了!

document.activeElement.blur();
遇到了键盘关闭的问题,在mui里找了好久都没有解决,最后百度解决了!

关于安卓高德地图的手机黑屏花屏模糊等症状处理

安卓高德用户在打开加载地图的webview时候,打开方式为:

var newCarrental = plus.webview.getWebviewById("加载webview页面");  
newCarrental.setStyle({  
height: '100%',  
width: '100%',  
right: '0px',  
background: "transparent",  
render: 'always'//此属性务必要加载  
});  
if(newCarrental == null) {  
    plus.webview.create("加载webview页面", "加载webview页面别名", subpage_style).show("slide-in-right");  
} else {  
    newCarrental.show("slide-in-right");  
}

然后这样打开的弊端为:打开页面会很暂用手机内存,当用户在这个页面打开的基础上,如果还要大概一个新的地图页面,那么新的地图会被前面的地图遮挡,有一个解决方案为:用户打开新地图页面的时候吧之前打开的页面top值修改或者关掉之前的页面,离开或者返回的时候要把top值修改掉,如果是在基础之上在打开新的地图页面的话不建议关闭之前的地图页面,具体代码如下:

//用户打开新地图页面执行代码  
var sub = plus.webview.getWebviewById("之前地图页面名称");  
if(sub != null) {  
    sub.setStyle({  
        top: '100%'  
    });  
}  
//用户关闭新地图页面执行代码  
var sub = plus.webview.getWebviewById("之前地图页面名称");  
if(sub != null) {  
    sub.setStyle({  
        top: '0'  
    });  
}

如果有问题可以留言,相互学习

继续阅读 »

安卓高德用户在打开加载地图的webview时候,打开方式为:

var newCarrental = plus.webview.getWebviewById("加载webview页面");  
newCarrental.setStyle({  
height: '100%',  
width: '100%',  
right: '0px',  
background: "transparent",  
render: 'always'//此属性务必要加载  
});  
if(newCarrental == null) {  
    plus.webview.create("加载webview页面", "加载webview页面别名", subpage_style).show("slide-in-right");  
} else {  
    newCarrental.show("slide-in-right");  
}

然后这样打开的弊端为:打开页面会很暂用手机内存,当用户在这个页面打开的基础上,如果还要大概一个新的地图页面,那么新的地图会被前面的地图遮挡,有一个解决方案为:用户打开新地图页面的时候吧之前打开的页面top值修改或者关掉之前的页面,离开或者返回的时候要把top值修改掉,如果是在基础之上在打开新的地图页面的话不建议关闭之前的地图页面,具体代码如下:

//用户打开新地图页面执行代码  
var sub = plus.webview.getWebviewById("之前地图页面名称");  
if(sub != null) {  
    sub.setStyle({  
        top: '100%'  
    });  
}  
//用户关闭新地图页面执行代码  
var sub = plus.webview.getWebviewById("之前地图页面名称");  
if(sub != null) {  
    sub.setStyle({  
        top: '0'  
    });  
}

如果有问题可以留言,相互学习

收起阅读 »

解决MUI选择器组件抛出“picker.getSelectedItem is not a function”异常的问题

bug反馈 picker 选择器

【背景介绍】
  MUI 版本 3.3。
  在页面中使用了 Pop-Picker 组件(mui-picker)。

【问题阐述】
  当点击选择器的“确定”按钮时,页面上抛出如下异常:

Uncaught TypeError: picker.getSelectedItem is not a function at src bs/mui/mui.poppicker.js:117

【解决方案】
  几经排查,发现当页面内引入的 js 中包含了对 Array 原型链方法扩充时,会抛出这个异常。
  定位到 mui.poppicker.js 第 112 行 getSelectedItems() 方法中,原先的:

for (var i in self.pickers) {  
    var picker = self.pickers[i];  
    items.push(picker.getSelectedItem() || {});  
}

  修改为:

for (var i = 0, len = self.pickers.length; i < len; i++) {  
    var picker = self.pickers[i];  
    items.push(picker.getSelectedItem() || {});  
}

  问题解决。

【后记】
  查找资料时发现 http://ask.dcloud.net.cn/question/14800 这样一个问题,题主应该是遇到了和我同样的错误。
  现在大多数开发者手头都会有几个工具库来扩充原型链方法, String.prototype.trim = function(); 这种经典的方法就不提了,为了应对低版本浏览器,对 Array.prototype.forEach = function(); 这类 ES5 常用方法也有必要做 polyfil,我本人遇到这个问题是因为扩充了 Array.prototype.remove = function();
  Javascript 里 for in 遍历因为原型链的缘故本来就有潜在的坑,不如老老实实写 for 循环,必要时还需要使用 hasOwnProperty() 辅助判断,也希望大家引以为戒吧。

继续阅读 »

【背景介绍】
  MUI 版本 3.3。
  在页面中使用了 Pop-Picker 组件(mui-picker)。

【问题阐述】
  当点击选择器的“确定”按钮时,页面上抛出如下异常:

Uncaught TypeError: picker.getSelectedItem is not a function at src bs/mui/mui.poppicker.js:117

【解决方案】
  几经排查,发现当页面内引入的 js 中包含了对 Array 原型链方法扩充时,会抛出这个异常。
  定位到 mui.poppicker.js 第 112 行 getSelectedItems() 方法中,原先的:

for (var i in self.pickers) {  
    var picker = self.pickers[i];  
    items.push(picker.getSelectedItem() || {});  
}

  修改为:

for (var i = 0, len = self.pickers.length; i < len; i++) {  
    var picker = self.pickers[i];  
    items.push(picker.getSelectedItem() || {});  
}

  问题解决。

【后记】
  查找资料时发现 http://ask.dcloud.net.cn/question/14800 这样一个问题,题主应该是遇到了和我同样的错误。
  现在大多数开发者手头都会有几个工具库来扩充原型链方法, String.prototype.trim = function(); 这种经典的方法就不提了,为了应对低版本浏览器,对 Array.prototype.forEach = function(); 这类 ES5 常用方法也有必要做 polyfil,我本人遇到这个问题是因为扩充了 Array.prototype.remove = function();
  Javascript 里 for in 遍历因为原型链的缘故本来就有潜在的坑,不如老老实实写 for 循环,必要时还需要使用 hasOwnProperty() 辅助判断,也希望大家引以为戒吧。

收起阅读 »

chrome调试android虚拟机简单易操作版(基于官方)

Android chrome 调试 学习

首先我们要用chrome调试我们的APP,就先得有chrome浏览器和hbuilder编辑器,hbuilder编辑器大家应该都有,chrome浏览器也很好下载,这里给大家一个新版本的chrome浏览器的下载地址 http://www.chromeliulanqi.com/ ,下载完以后安装一下就行。下面开始整起来吧!
第一步,为了调试,我们在hbuilder中新建一个app,可以直接选择h5 的模板文档。如图

新建项目

第二步,连接上你的模拟器或者真机,
1.如果想使用模拟器的话大家可以下载一个夜神模拟器http://www.yeshen.com/,下载完夜神模拟器以后需要到hbuilder中点击顶端的选项工具,然后再点击选项进入首选页页面

修改第三方模拟器端口图1

修改第三方模拟器端口图2

2.如果你想要使用真机测试的话,打开真机的开发者选项,具体的可以在电脑上下载一个360手机助手,根据360手机助手的提示操作,如果还是连接不上你的手机,可以在你的android手机上安装一个360连接助手,也是360的产品(我并不是360的宣传大使啊。。。),这样就可以完美解决hbuilder连接不上真机的情况了。
第三步,在你模拟器或者真机上运行在hbuilder上app项目,下面是2种运行app的方式。点开你想要检查的页面。如果是真机的话,会在手机上提示你是否要安装,当然要点击安装按钮。

安装应用方法1

安装应用方法2

第四步,打开chrome浏览器,在地址栏输入“chrome://inspect”,这时浏览器会出现下面这个界面。点击右边的红色箭头所指的是你所检查的页面地址,左边那个红色箭头所指的inspect是需要你去点击的,点击之后会弹出另外一个界面。

第五步,这时可能会出现这么一个情况,弹出的另外一个界面是白屏,这时需要翻墙一下(第一次使用的时候翻墙就行),可以下载一个GreenVPN,下载链接点此,又来广告了,http://www.greenvpn6.com/,这个软件每天有一个小时的免费使用时间,下载安装完这个vpn软件以后,连接一下vpn,接下来在你的chrome浏览器里测试一下,vpn有没有连接上,你只要输入个谷歌的地址www.google.com,如果他能进入这个地址,就说明vpn连接成功。你再点击inspect,弹出的屏幕就不会白屏了。

成功

继续阅读 »

首先我们要用chrome调试我们的APP,就先得有chrome浏览器和hbuilder编辑器,hbuilder编辑器大家应该都有,chrome浏览器也很好下载,这里给大家一个新版本的chrome浏览器的下载地址 http://www.chromeliulanqi.com/ ,下载完以后安装一下就行。下面开始整起来吧!
第一步,为了调试,我们在hbuilder中新建一个app,可以直接选择h5 的模板文档。如图

新建项目

第二步,连接上你的模拟器或者真机,
1.如果想使用模拟器的话大家可以下载一个夜神模拟器http://www.yeshen.com/,下载完夜神模拟器以后需要到hbuilder中点击顶端的选项工具,然后再点击选项进入首选页页面

修改第三方模拟器端口图1

修改第三方模拟器端口图2

2.如果你想要使用真机测试的话,打开真机的开发者选项,具体的可以在电脑上下载一个360手机助手,根据360手机助手的提示操作,如果还是连接不上你的手机,可以在你的android手机上安装一个360连接助手,也是360的产品(我并不是360的宣传大使啊。。。),这样就可以完美解决hbuilder连接不上真机的情况了。
第三步,在你模拟器或者真机上运行在hbuilder上app项目,下面是2种运行app的方式。点开你想要检查的页面。如果是真机的话,会在手机上提示你是否要安装,当然要点击安装按钮。

安装应用方法1

安装应用方法2

第四步,打开chrome浏览器,在地址栏输入“chrome://inspect”,这时浏览器会出现下面这个界面。点击右边的红色箭头所指的是你所检查的页面地址,左边那个红色箭头所指的inspect是需要你去点击的,点击之后会弹出另外一个界面。

第五步,这时可能会出现这么一个情况,弹出的另外一个界面是白屏,这时需要翻墙一下(第一次使用的时候翻墙就行),可以下载一个GreenVPN,下载链接点此,又来广告了,http://www.greenvpn6.com/,这个软件每天有一个小时的免费使用时间,下载安装完这个vpn软件以后,连接一下vpn,接下来在你的chrome浏览器里测试一下,vpn有没有连接上,你只要输入个谷歌的地址www.google.com,如果他能进入这个地址,就说明vpn连接成功。你再点击inspect,弹出的屏幕就不会白屏了。

成功

收起阅读 »

列表页面 跳转到详情页面 如何让列表页面刷新 我所用的方法

mui

比如一个待办列表 我们点击进入详情页面后进行操作 就会返回列表页面然后再次刷新列表

呃... 我琢磨了俩个方法

第一个就是

var taskList = plus.webview.getWebviewById('跳转页面ID');  
                taskList.reload();  
                mui.back();  

mui.openWindow({  
                url:'跳转页面url',  
                id:'跳转页面ID',  
                });

这个大家应该知道滴 方便又快捷 操作完后页面确实刷新了

这个方法在http://ask.dcloud.net.cn/article/617有详细介绍

然而我发现安卓4.0的版本 还是华为手机操作系统的问题 用这个方法后返回列表页面居然卡死了

于是我使用自定义事件进行跳转

详情页面

...

var taskList = plus.webview.getWebviewById('跳转页面ID');
mui.fire(跳转页面ID,'自定义事件名称');

mui.openWindow({
url:'跳转页面url',
id:'跳转页面ID',
});
...

列表页面

...
window.addEventListener('自定义事件',function(){
触发事件。。。
});
...

不过用自定义事件后 可能还有许多问题要处理 比如列表之前页面传过来的值并会变成undefined 不过相信大家应该可以轻松解决

其实我还是一只菜鸡 发文章就想赚点积分 看看文章回复下人家 不知道怎么积分就突然变负了 希望大家捧捧场 嘿嘿

继续阅读 »

比如一个待办列表 我们点击进入详情页面后进行操作 就会返回列表页面然后再次刷新列表

呃... 我琢磨了俩个方法

第一个就是

var taskList = plus.webview.getWebviewById('跳转页面ID');  
                taskList.reload();  
                mui.back();  

mui.openWindow({  
                url:'跳转页面url',  
                id:'跳转页面ID',  
                });

这个大家应该知道滴 方便又快捷 操作完后页面确实刷新了

这个方法在http://ask.dcloud.net.cn/article/617有详细介绍

然而我发现安卓4.0的版本 还是华为手机操作系统的问题 用这个方法后返回列表页面居然卡死了

于是我使用自定义事件进行跳转

详情页面

...

var taskList = plus.webview.getWebviewById('跳转页面ID');
mui.fire(跳转页面ID,'自定义事件名称');

mui.openWindow({
url:'跳转页面url',
id:'跳转页面ID',
});
...

列表页面

...
window.addEventListener('自定义事件',function(){
触发事件。。。
});
...

不过用自定义事件后 可能还有许多问题要处理 比如列表之前页面传过来的值并会变成undefined 不过相信大家应该可以轻松解决

其实我还是一只菜鸡 发文章就想赚点积分 看看文章回复下人家 不知道怎么积分就突然变负了 希望大家捧捧场 嘿嘿

收起阅读 »

页面返回后自动跳转到对应的slider,用slider.gotoPage()可以解决

tab mui

点击列表的时候把当前的tab存到sessionStorage里面,返回的时候取出来,然后判断currentTab的值

var slider = $('#slider').slider();
//
if(currentTab=='0'){

            slider.gotoPage(0,100);  

        }else if(currentTab=='1'){  

            slider.gotoPage(1,100);  

        }else if(currentTab=='2'){  

            slider.gotoPage(2,100);   

        }else if(currentTab=='3'){  

            slider.gotoPage(3,100);  
        }
继续阅读 »

点击列表的时候把当前的tab存到sessionStorage里面,返回的时候取出来,然后判断currentTab的值

var slider = $('#slider').slider();
//
if(currentTab=='0'){

            slider.gotoPage(0,100);  

        }else if(currentTab=='1'){  

            slider.gotoPage(1,100);  

        }else if(currentTab=='2'){  

            slider.gotoPage(2,100);   

        }else if(currentTab=='3'){  

            slider.gotoPage(3,100);  
        }
收起阅读 »

上传多张照片到服务器

        var server = **********; //上传文件的端口  
        var files = []; //文件的数组  
        document.getElementById("ContractID-btn").addEventListener('tap', function() {  
            plus.gallery.pick(function(e) {  
                document.getElementById("ContractID-btn").innerText = '选择照片(' + e.files.length + ')张';  
                //从相册添加文件  
                appendFile(e); //添加文件  
            }, function(e) {  
                // outSet("取消选择图片");  
            }, {  
                filter: "image",  
                multiple: true,  
                system: false  
            });  
        });  
        //上传文件  
        function uploadContract() {  
            var task = plus.uploader.createUpload(server, {  
                method: "POST"  
            }, function(t, status) {  
                if(status == 200) {  
                    plus.nativeUI.closeWaiting();  
                    mui.toast('上传成功');  
                    ContractZIP = JSON.parse(t.responseText).fileName;  
                    rowContract = JSON.parse(t.responseText).rawFiles;  
                } else {  
                    alert('上传失败,请重试');  
                }  
            });  
            task.addData("fileType", "合同");  
            task.addData("customerId", CustomerId);  
            for(var i = 0; i < files.length; i++) {  
                var f = files[i];  
                task.addFile(f.path, {  
                    key: f.name  
                });  
            }  
            task.start();  
        }  
        //添加文件            
        function appendFile(p) {  
            plus.nativeUI.showWaiting("正在上传...");  
            var index = 1;  
            files = []; //清空数组,防止重复上传  
            for(var i = 0; i < p.files.length; i++) {  
                var n = p.files[i].substr(p.files[i].lastIndexOf('/') + 1);  
                files.push({  
                    name: "uploadkey" + index,  
                    path: p.files[i]  
                });  
                index++;  
            }  
            uploadContract();//添加完文件,开始上传  
        }
继续阅读 »
        var server = **********; //上传文件的端口  
        var files = []; //文件的数组  
        document.getElementById("ContractID-btn").addEventListener('tap', function() {  
            plus.gallery.pick(function(e) {  
                document.getElementById("ContractID-btn").innerText = '选择照片(' + e.files.length + ')张';  
                //从相册添加文件  
                appendFile(e); //添加文件  
            }, function(e) {  
                // outSet("取消选择图片");  
            }, {  
                filter: "image",  
                multiple: true,  
                system: false  
            });  
        });  
        //上传文件  
        function uploadContract() {  
            var task = plus.uploader.createUpload(server, {  
                method: "POST"  
            }, function(t, status) {  
                if(status == 200) {  
                    plus.nativeUI.closeWaiting();  
                    mui.toast('上传成功');  
                    ContractZIP = JSON.parse(t.responseText).fileName;  
                    rowContract = JSON.parse(t.responseText).rawFiles;  
                } else {  
                    alert('上传失败,请重试');  
                }  
            });  
            task.addData("fileType", "合同");  
            task.addData("customerId", CustomerId);  
            for(var i = 0; i < files.length; i++) {  
                var f = files[i];  
                task.addFile(f.path, {  
                    key: f.name  
                });  
            }  
            task.start();  
        }  
        //添加文件            
        function appendFile(p) {  
            plus.nativeUI.showWaiting("正在上传...");  
            var index = 1;  
            files = []; //清空数组,防止重复上传  
            for(var i = 0; i < p.files.length; i++) {  
                var n = p.files[i].substr(p.files[i].lastIndexOf('/') + 1);  
                files.push({  
                    name: "uploadkey" + index,  
                    path: p.files[i]  
                });  
                index++;  
            }  
            uploadContract();//添加完文件,开始上传  
        }
收起阅读 »

设置数字键盘的方法

<input type="number" pattern="\d*"/>

<input type="number" pattern="\d*"/>

我觉得这个启动时间优化空间很大!

性能优化

我觉得这个启动时间优化空间很大!

比我的Dreamweaver cs5 打开都慢很多!

我觉得这个启动时间优化空间很大!

比我的Dreamweaver cs5 打开都慢很多!

【示例】 Mui v3.3.0使用dialog实现密码的输入及验证

弹出框 技术分享 mui

需求描述

使用dialog弹出密码输入框,用户输入密码并且密码验证通过后方可关闭dialog。

需求分析

首先,dialog中提供密码输入框。
其次,用户输入密码后对密码进行验证。
最后,通过验证则关闭dialog,否则不关闭dialog并提示错误信息。

实现思路

dialog

mui提供了许多dialog,只有mui.prompt()提供了输入框,但它并不是密码框。
mui.confirm()的message参数,可以传html代码段来展示密码框,就选它了。

回调函数

由于当前版本mui,点击dialog中的按钮均会关闭dialog,所以需要对dialog按钮的默认行为进行修改。
注:下个版本会更新此修改,目前需要的话请下载附件中的mui.js文件。

验证密码

对用户输入的密码进行验证后,如果验证失败,则需要做出相应的提示。
和密码框的思路一样,使用一个文本内容默认为空的元素来展示错误信息。

功能实现

密码输入框

使用mui.confirm()弹出密码输入框。

mui.confirm('<input type="password" id="test" />', 'Hello MUI', null, function(e) {},'div');  

注:这里需要声明使用H5模式的dialog,参考文档dialog

阻止关闭dialog

用户输入完成后,点击”确认“按钮,验证密码。

mui.confirm('<input type="password" id="test" />', 'Hello MUI', null, function(event) {  
    var index = event.index;  
    if(index === 1) {  
        var pwd = document.getElementById('test').value;  
        // 验证失败返回false  
        return false;  
    }  
},'div');  

修改按钮的默认行为后,在回调函数中返回false,则不会关闭dialog。

错误信息

在拼接密码输入框的同时,见错误信息提示的元素一起拼接。

mui.confirm('<input type="password" id="test" /><span id="error">&nbsp</span>', 'Hello MUI', null, function(event) {},'div');  

源码

附上源码,直接浏览即可。

继续阅读 »

需求描述

使用dialog弹出密码输入框,用户输入密码并且密码验证通过后方可关闭dialog。

需求分析

首先,dialog中提供密码输入框。
其次,用户输入密码后对密码进行验证。
最后,通过验证则关闭dialog,否则不关闭dialog并提示错误信息。

实现思路

dialog

mui提供了许多dialog,只有mui.prompt()提供了输入框,但它并不是密码框。
mui.confirm()的message参数,可以传html代码段来展示密码框,就选它了。

回调函数

由于当前版本mui,点击dialog中的按钮均会关闭dialog,所以需要对dialog按钮的默认行为进行修改。
注:下个版本会更新此修改,目前需要的话请下载附件中的mui.js文件。

验证密码

对用户输入的密码进行验证后,如果验证失败,则需要做出相应的提示。
和密码框的思路一样,使用一个文本内容默认为空的元素来展示错误信息。

功能实现

密码输入框

使用mui.confirm()弹出密码输入框。

mui.confirm('<input type="password" id="test" />', 'Hello MUI', null, function(e) {},'div');  

注:这里需要声明使用H5模式的dialog,参考文档dialog

阻止关闭dialog

用户输入完成后,点击”确认“按钮,验证密码。

mui.confirm('<input type="password" id="test" />', 'Hello MUI', null, function(event) {  
    var index = event.index;  
    if(index === 1) {  
        var pwd = document.getElementById('test').value;  
        // 验证失败返回false  
        return false;  
    }  
},'div');  

修改按钮的默认行为后,在回调函数中返回false,则不会关闭dialog。

错误信息

在拼接密码输入框的同时,见错误信息提示的元素一起拼接。

mui.confirm('<input type="password" id="test" /><span id="error">&nbsp</span>', 'Hello MUI', null, function(event) {},'div');  

源码

附上源码,直接浏览即可。

收起阅读 »