QinJs 官网 | QinJs 官网

qin.showToast(OBJECT)

显示消息提示框。

OBJECT参数说明

参数	类型	必填	说明	平台差异说明
title	String	是	提示的内容，长度与 icon 取值有关。
icon	String	否	图标，有效值详见下方说明，默认：none。
image	String	否	自定义图标的本地路径	H5、微信小程序、百度小程序、抖音小程序（2.62.0+）
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认： false	微信小程序、抖音小程序（2.47.0+）
duration	Number	否	提示的延迟时间，单位毫秒，默认： 1500
position	String	否	纯文本轻提示显示位置，填写有效值后只有 `title` 属性生效，且不支持通过 qin.hideToast 隐藏。有效值详见下方说明。
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

icon 值说明

由于各平台不一样，所以目前 QinJs 只支持下面两种可选值。

值	说明	平台差异说明
success	显示成功图标，此时 title 文本在`小程序`平台最多显示 7 个汉字长度。	支付宝小程序无长度无限制
none	不显示图标，此时 title 文本在`小程序`最多可显示两行。

示例

qin.showToast({
  title: '标题',
  duration: 2000,
});

qin.showToast({
  title: '标题',
  duration: 2000,
});

qin.hideToast()

隐藏消息提示框。

示例

qin.hideToast();

qin.hideToast();

qin.showLoading(OBJECT)

显示 loading 提示框, 需主动调用 qin.hideLoading 才能关闭提示框。

OBJECT参数说明

参数	类型	必填	说明	平台差异说明
title	String	是	提示的文字内容，显示在loading的下方
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false	H5、微信小程序、百度小程序、抖音小程序（2.47.0+）
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例

qin.showLoading({
  title: '加载中'
});

qin.showLoading({
  title: '加载中'
});

qin.hideLoading()

隐藏 loading 提示框。

示例

qin.showLoading({
  title: '加载中'
});

setTimeout(function () {
  qin.hideLoading();
}, 2000);

qin.showLoading({
  title: '加载中'
});

setTimeout(function () {
  qin.hideLoading();
}, 2000);

qin.showModal(OBJECT)

显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个 API 整合了 html 中： alert 、 confirm 。

OBJECT参数说明

参数	类型	必填	说明	平台差异说明
title	String	否	提示的标题
content	String	否	提示的内容
showCancel	Boolean	否	是否显示取消按钮，默认为 true
cancelText	String	否	取消按钮的文字，默认为"取消"
cancelColor	HexColor	否	取消按钮的文字颜色，默认为 "#000000"	H5、微信小程序、百度小程序、抖音小程序（2.62.0+）
confirmText	String	否	确定按钮的文字，默认为"确定"
confirmColor	HexColor	否	确定按钮的文字颜色，H5 平台默认为 "#007aff" ，微信小程序平台默认为 "#576B95" ，百度小程序平台默认为 "#3c76ff"	H5、微信小程序、百度小程序、抖音小程序（2.62.0+）
editable	Boolean	否	是否显示输入框	H5 、微信小程序 (2.17.1+)、抖音小程序（2.62.0+）
placeholderText	String	否	显示输入框时的提示文本	H5 、微信小程序 (2.17.1+)、抖音小程序（2.62.0+）
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数说明

参数	类型	说明	平台差异说明
confirm	Boolean	为 true 时，表示用户点击了确定按钮
cancel	Boolean	为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭）
content	String	`editable` 为 true 时，用户输入的文本	H5 、微信小程序 (2.17.1+)、抖音小程序（2.62.0+）

示例

qin.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success: (theRes) => {
    if (theRes.confirm) {
      console.log('用户点击确定');
    } else if (theRes.cancel) {
      console.log('用户点击取消');
    }
  }
});

qin.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success: (theRes) => {
    if (theRes.confirm) {
      console.log('用户点击确定');
    } else if (theRes.cancel) {
      console.log('用户点击取消');
    }
  }
});

注意

弹框同时使用确定取消时，需注意不同平台的确认取消按钮位置不同。在微信、 H5 中，确认按钮默认在右边。如果需要调整，可以通过自行控制按钮的文字，即“确定”按钮的文字其实可以设置为“取消”；
showModal 不满足需求时，可以自行开发组件弹框。插件市场有很多自定义弹框的组件，需注意在非 H5 平台，前端组件无法覆盖原生组件（如地图、 video ），遮罩也无法盖住 tabbar 和 navigationbar 。如需覆盖原生组件或遮罩 tabbar 等；
小程序平台， cancelText 和 confirmText 有长度限制，最多允许 4 个字符；
钉钉小程序真机与模拟器表现有差异，真机 title ， content 均为必填项
各家小程序平台对于 confirm 、 cancel 字段返回规则可能不尽相同，包含两种情况： { confirm: true, cancel: false } 或 { confirm: true } ，但并不影响使用 if 去做判断

qin.showActionSheet(OBJECT)

从底部向上弹出操作菜单

OBJECT参数说明

参数	类型	必填	说明	平台差异说明
title	String	否	菜单标题	H5 、支付宝小程序、钉钉小程序、微信小程序 3.4.5+（仅真机有效）
alertText	String	否	警示文案（同菜单标题）	微信小程序（仅真机有效）
itemList	Array<String>	是	按钮的文字数组	微信、百度、抖音小程序数组长度最大为 6 个
itemColor	HexColor	否	按钮的文字颜色，字符串格式，默认为 "#000000"	飞书小程序不支持
popover	Object	否	大屏设备弹出原生选择按钮框的指示区域，默认居中显示	H5
success	Function	否	接口调用成功的回调函数，详见返回参数说明
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

popover 值说明（仅App生效）

值	类型	说明
top	Number	指示区域坐标，使用原生 navigationBar 时一般需要加上 navigationBar 的高度
left	Number	指示区域坐标
width	Number	指示区域宽度
height	Number	指示区域高度

success返回参数说明

参数	类型	说明
tapIndex	Number	用户点击的按钮，从上到下的顺序，从 0 开始

示例

qin.showActionSheet({
  itemList: ['A', 'B', 'C'],
  success: (theRes) => {
    console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
  },
  fail: (theRes) => {
    console.log(res.errMsg);
  },
});

qin.showActionSheet({
  itemList: ['A', 'B', 'C'],
  success: (theRes) => {
    console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
  },
  fail: (theRes) => {
    console.log(res.errMsg);
  },
});

注意

在非 H5 端，本章的所有弹出控件都是原生控件，层级最高，可覆盖 video 、 map 、 tabbar 等原生控件。
uni-app插件市场有很多封装好的前端组件，但注意前端组件层级不是最高，无法覆盖原生组件，除非使用 cover-view 。

qin.showToast(OBJECT) ​

qin.hideToast() ​

qin.showLoading(OBJECT) ​

qin.hideLoading() ​

qin.showModal(OBJECT) ​

qin.showActionSheet(OBJECT) ​

qin.showToast(OBJECT)

qin.hideToast()

qin.showLoading(OBJECT)

qin.hideLoading()

qin.showModal(OBJECT)

qin.showActionSheet(OBJECT)