页面交互 API

Mr.Hope
  • 小程序
大约 4 分钟

本页面介绍的一系列 API 都是和小程序页面交互(用户交互)相关的 API。

小程序与用户交互合理,并在合适的时机向用户展示相应状态可以让用户的沉浸感更强。

概要

  • wx.showToast: 展示消息提示框

  • wx.hideToast: 隐藏消息提示框

    用于展示一些不是很重要的提示

  • wx.showLoading: 显示加载提示

  • wx.hideLoading: 隐藏加载提示

    在合适的时候显示加载中状态,可以减轻用户的焦虑感。

  • wx.showModal: 显示一个弹窗

    这是希望提示用户或者让用户一个两项选择的好方式

  • wx.showActionSheet

    希望用户在多个预设动作之间进行选择时可以使用此 API

注意事项

  • wx.showLoadingwx.showToast 同时只能显示一个
  • wx.showToast 应与 wx.hideToast 配对使用,wx.showLoading 应与 wx.hideLoading 配对使用,不能混用

wx.showToast(Object object)

显示消息提示框

showToast 参数

Object object

属性类型默认值必填说明
titlestring提示的内容
iconstring'success'图标
imagestring自定义图标的本地路径,image 的优先级高于 icon
durationnumber1500提示的延迟时间
maskbooleanfalse是否显示透明蒙层,防止触摸穿透
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

object.icon 的合法值

说明
success显示成功图标,此时 title 文本最多显示 7 个汉字长度
loading显示加载图标,此时 title 文本最多显示 7 个汉字长度
none不显示图标,此时 title 文本最多可显示两行,1.9.0 及以上版本支持

示例代码

wx.showToast({
  title: "成功",
  icon: "success",
  duration: 2000,
});

wx.hideToast(Object object)

隐藏消息提示框

参数

Object object

属性类型必填说明
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

wx.showModal(Object object)

显示模态对话框

showModal 参数

Object object

属性类型默认值必填说明
titlestring提示的标题
contentstring提示的内容
showCancelbooleantrue是否显示取消按钮
cancelTextstring'取消'取消按钮的文字,最多 4 个字符
cancelColorstring#000000取消按钮的文字颜色,必须是 16 进制格式的颜色字符串
confirmTextstring'确定'确认按钮的文字,最多 4 个字符
confirmColorstring#576B95确认按钮的文字颜色,必须是 16 进制格式的颜色字符串
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

object.success 回调函数

参数

Object res

属性类型说明最低版本
confirmboolean为 true 时,表示用户点击了确定按钮
cancelboolean为 true 时,表示用户点击了取消(用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭)1.1.0

示例代码

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

wx.showLoading(Object object)

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

showLoading 参数

Object object

属性类型默认值必填说明
titlestring提示的内容
maskbooleanfalse是否显示透明蒙层,防止触摸穿透
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

wx.showLoading({
  title: "加载中",
});

setTimeout(() => {
  wx.hideLoading();
}, 2000);

wx.hideLoading(Object object)

隐藏 loading 提示框

hideLoading 参数

Object object

属性类型必填说明
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

wx.showActionSheet(Object object)

显示操作菜单

showActionSheet 参数

Object object

属性类型默认值必填说明
itemListArray.<string>按钮的文字数组,数组长度最大为 6
itemColorstring#000000按钮的文字颜色
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

object.success 回调函数

参数

Object res

属性类型说明
tapIndexnumber用户点击的按钮序号,从上到下的顺序,从 0 开始

示例代码

wx.showActionSheet({
  itemList: ["A", "B", "C"],
  success: (res) => {
    console.log(res.tapIndex);
  },
  fail: (res) => {
    console.log(res.errMsg);
  },
});
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1