整理 | 用MUI开发的应用中使用H5+ API的信息提示框

大多数时候，我们的APP应用程序中需要有好的提示信息，比如用户登录成功，使用消失3秒钟的登录成功；或者当用户登录失败时，提示失败原因；或者网络连接失败时，提示网络错误等等。在MUI中，我们可以使用MUI框架提供的消息框，同时我们也可以使用H5+ API提供的nativeUI（管理系统原生界面，可用于弹出系统原生提示对话框窗口、时间日期选择对话框、等待对话框等）。nativeUI相对于MUI框架提供的消息框功能点要全面一些，其包含弹出系统选择按钮框、弹出系统提示对话框、弹出系统确认对话框、显示/关闭系统等待对话框、显示/关闭自动消失的提示消息、预览图片、弹出系统时间选择对话框、弹出系统输入对话框功能，接下来我们将一一做详细介绍。

弹出系统选择按钮框（actionSheet）

这类选择框，可以用于如HTML 中select标签所代表的含义，比如选择数据的状态，我们可以设置为启用或者禁用。

/**
 * @description 弹出系统选择按钮框
 * @example NativeUIObj plus.nativeUI.actionSheet(actionsheetStyle, actionsheetCallback);
 * @param {actionsheetStyle} 选择按钮框显示的样式
 * @param {actionsheetCallback}  选择按钮框关闭后的回调函数
 */
plus.nativeUI.actionSheet({
  title: "弹出系统选择按钮框", //选择按钮框的标题
  cancel: "取消", //取消按钮上显示的文字内容
  buttons: [ //选择框上的按钮
    {
      title: '提交', //按钮上显示的文字内容
      color: '#FF0000' //按钮上显示文字颜色
    },
    {
      title: '取消',
      color: '00FF00'
    }
  ]
}, function(e) {
  //按钮框关闭后的操作
});

弹出系统提示对话框

这类控件我们一般用于需要确认后才能进行下一步处理的业务逻辑，或者登录失败，用户需要确认后再次进行登录数据验证。

/**
 * @description 弹出系统提示对话框
 * @example void plus.nativeUI.alert(message, alertCB, title, buttonCapture);
 * @param {message} 提示对话框上显示的内容
 * @param {alertCB}  提示对话框上关闭后的回调函数
 * @param {title}  提示对话框上显示的标题
 * @param {buttonCapture}  提示对话框上按钮显示的内容
 */
plus.nativeUI.alert('用户名不能为空！', function(e) {
  //关闭对话框后刷新验证码
}, '警告', '确定');

弹出系统确认对话框

这类控件用于业务数据操作提示，防止用户在不需要的时候误点导致的数据提交，相当于用户在提交之前需要对所提交的数据进行再次确认是否需要提交。

/**
 * @description 弹出系统确认对话框
 * @example void plus.nativeUI.confirm(message, confirmCB, styles);
 * @param {message}  确认对话框上显示的内容
 * @param {confirmCB}  确认对话框关闭后的回调函数
 * @param {styles} 确认对话框的参数
 */
plus.nativeUI.confirm('您确定要启用该菜单项？', function(e) {
  //点击确定后需要继续的操作
}, {
  title: '再次确认',//确认对话框显示的标题
  buttons: [//确认对话框上显示的按钮
    "确定", "取消"
  ],
  verticalAlign: 'center',//对话框在屏幕中的垂直分享对齐方式,top|center|bottom
});

弹出系统日期选择对话框

我们一般用于需要根据日期来查询数据的时候，使用该控件可以简单的进行日期选择查询。

/**
 * @description 弹出系统日期选择对话框
 * @example void plus.nativeUI.pickDate(successCB, errorCB, style)
 * @param {successCB}  日期选择操作成功的回调函数
 * @param {errorCB}  日期选择操作取消或失败的回调函数
 * @param {style}  日期选择操作的参数
 */
plus.nativeUI.pickDate(function(e) {
  var d = e.date;
  //选择日期进行查询
}, function(e) {
  //取消或失败的提示信息
});

弹出系统时间选择对话框

时间对话框和日期选择对话框用途基本相似，只不过，时间选择对话框更加具体。

/**
 * @description 弹出系统时间选择对话框
 * @example void plus.nativeUI.pickTime(successCB, errorCB, styles)
 * @param {successCB}  时间选择操作成功的回调函数
 * @param {errorCB}  时间选择操作取消或失败的回调函数
 * @param {styles}  时间选择操作的参数
 */
plus.nativeUI.pickTime(function(e) {
  var d = e.date;
  //选择时间进行查询
}, function(e) {
  //取消或失败的提示信息
}, {
  title: "选择查询时间",//时间选择对话框显示的标题
  is24Hour: true,//是否24小时制模式
  //time 默认显示时间, popover弹出指定区域{top:10;left:10;width:200;height:200;}
})

弹出系统输入对话框

这类控件一般用于需要输入参数后再执行业务处理操作的区域，比如我们需要修改密码，我们可以弹出输入对话框，填写修改后的密码，进行修改密码操作。

/**
 * @description 弹出系统输入对话框
 * @example void plus.nativeUI.prompt(message, promptCB, title, tip, buttons);
 * @param {message}  输入对话框上显示的内容
 * @param {promptCB}  关闭输入对话框的回调函数
 * @param {title}  输入对话框上显示的标题
 * @param {tip}  输入对话框上编辑框显示的提示文字
 * @param {buttons}  输入对话框上显示的按钮数组
 */
plus.nativeUI.prompt('请输入您要修改的密码：', function(e) {
  //点击按钮后的操作
}, '修改密码', '您的新密码', ['确定', '取消']);

显示/关闭等待对话框

一般用于打开页面，渲染数据时。数据未渲染完成前，显示等待对话框，数据渲染完成后，关闭等待对话框。

plus.nativeUI.showWaiting("正在加载..."); //显示系统等待对话框
setTimeout(function() {
  plus.nativeUI.closeWaiting(); //关闭系统等待对话框
}, 2000);

显示/关闭自动提示消息对话框

该控件是一个简单的控件，其经常用于不干扰用户操作情况下的信息提示。

plus.nativeUI.toast("我是自动小时提示框", {
  duration: 3000
}); //显示自动消失的提示信息
setTimeout(function() {
  plus.nativeUI.closeToast(); //关闭已经显示的所有自动消失的提示框
}, 1500)

预览图片

这是我们在APP中经常会用到的一个控件，比如头像上传时我们需要预览一下是否是我们指定的头像。

document.getElementById('preImg').addEventListener('tap', function() {
  var urlPath = this.getAttribute('src');
  /**
   * @description 预览图片
   * @example void plus.nativeUI.previewImage(urls, styles)
   * @param {urls}  需要预览的图片地址列表
   * @param {styles}  预览的现实参数
   */
  plus.nativeUI.previewImage([
    "_www/" + urlPath
  ])
})