小程序API能力集成指南——界面交互API汇总

本文链接：https://blog.csdn.net/Ms_Smart/article/details/136165533

本文介绍了BaseKit库中ty对象提供的modal对话框、actionsheet操作菜单以及loading和toast消息提示功能的使用，包括参数、回调机制和版本要求。

摘要由CSDN通过智能技术生成

ty.showModal

显示模态对话框

需引入BaseKit，且在>=1.2.10版本才可使用

参数

Object object

属性	类型	必填	说明
title	`string`	是	提示的标题
content	`string`	否	提示的内容
showCancel	`boolean`	否	是否显示取消按钮
cancelText	`string`	否	取消按钮的文字，最多 4 个字符
cancelColor	`string`	否	取消按钮的文字颜色，必须是 16 进制格式的颜色字符串
confirmText	`string`	否	确认按钮的文字，最多 4 个字符
confirmColor	`string`	否	确认按钮的文字颜色，必须是 16 进制格式的颜色字符串
complete	`function`	否	接口调用完成的回调函数（成功或失败都会执行）
success	`function`	否	接口调用成功的回调函数
fail	`function`	否	接口调用失败的回调函数

object.success 回调参数

参数

Object res

属性	类型	说明
confirm	`boolean`	为 true 时，表示用户点击了确定按钮
cancel	`boolean`	为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭）

object.fail 回调参数

参数

Object res

属性	类型	说明
errorMsg	`string`	插件错误信息
errorCode	`string`	错误码
innerError	`object`	插件外部依赖错误信息 `{errorMsg: string, errorCode: string }`

函数定义示例

/**
 * 显示模态对话框
 */
export function showModal(params: {
  /** 提示的标题 */
  title: string;
  /** 提示的内容 */
  content?: string;
  /** 是否显示取消按钮 */
  showCancel?: boolean;
  /** 取消按钮的文字，最多 4 个字符 */
  cancelText?: string;
  /** 取消按钮的文字颜色，必须是 16 进制格式的颜色字符串 */
  cancelColor?: string;
  /** 确认按钮的文字，最多 4 个字符 */
  confirmText?: string;
  /** 确认按钮的文字颜色，必须是 16 进制格式的颜色字符串 */
  confirmColor?: string;
  complete?: () => void;
  success?: (params: {
    /** 为 true 时，表示用户点击了确定按钮 */
    confirm: boolean;
    /** 为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭） */
    cancel: boolean;
  }) => void;
  fail?: (params: {
    errorMsg: string;
    errorCode: string | number;
    innerError: {
      errorCode: string | number;
      errorMsg: string;
    };
  }) => void;
}): void;

常见问题（FAQ）

如何自定义对话框内容？

可以尝试扩展组件中的 Dialog 组件。

ty.showActionSheet

显示操作菜单

需引入BaseKit，且在>=1.2.10版本才可使用

参数

Object object

属性	类型	必填	说明
alertText	`string`	否	警示文案
itemList	`array`	是	按钮的文字数组，数组长度最大为 6
itemColor	`string`	否	按钮的文字颜色
complete	`function`	否	接口调用完成的回调函数（成功或失败都会调用）
success	`function`	否	接口调用成功的回调函数
fail	`function`	否	接口调用失败的回调函数

object.success 回调参数

参数

Object res

属性	类型	说明
tapIndex	`number`	用户点击的按钮序号，从上到下的顺序，从 0 开始

object.fail 回调参数

参数

Object res

属性	类型	说明
errorMsg	`string`	插件错误信息
errorCode	`string`	错误码
innerError	`object`	插件外部依赖错误信息 `{errorMsg: string, errorCode: string }`

函数定义示例

/**
 * 显示操作菜单
 */
export function showActionSheet(params: {
  /** 警示文案 */
  alertText?: string;
  /** 按钮的文字数组，数组长度最大为 6 */
  itemList: string[];
  /** 按钮的文字颜色 */
  itemColor?: string;
  complete?: () => void;
  success?: (params: {
    /** 用户点击的按钮序号，从上到下的顺序，从0开始 */
    tapIndex: number;
  }) => void;
  fail?: (params: {
    errorMsg: string;
    errorCode: string | number;
    innerError: {
      errorCode: string | number;
      errorMsg: string;
    };
  }) => void;
}): void;

ty.showLoading

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

需引入BaseKit，且在>=1.2.10版本才可使用

参数

Object object

属性	类型	必填	说明
title	`string`	是	提示的内容
mask	`boolean`	否	是否显示透明蒙层，防止触摸穿透
complete	`function`	否	接口调用结束的回调函数（调用成功、失败都会执行）
success	`function`	否	接口调用成功的回调函数
fail	`function`	否	接口调用失败的回调函数

函数定义示例

/**
 * 显示 loading 提示框。需主动调用 ty.hideLoading 才能关闭提示框
 */
export function showLoading(params: {
  /** 提示的内容 */
  title: string;
  /** 是否显示透明蒙层，防止触摸穿透 */
  mask?: boolean;
  complete?: () => void;
  success?: (params: null) => void;
  fail?: (params: {
    errorMsg: string;
    errorCode: string | number;
    innerError: {
      errorCode: string | number;
      errorMsg: string;
    };
  }) => void;
}): void;

ty.hideLoading

隐藏 loading 提示框

需引入BaseKit，且在>=1.2.10版本才可使用

参数

Object object

属性	类型	必填	说明
complete	`function`	否	接口调用结束的回调函数（调用成功、失败都会执行）
success	`function`	否	接口调用成功的回调函数
fail	`function`	否	接口调用失败的回调函数

函数定义示例

/**
 * 隐藏 loading 提示框
 */
export function hideLoading(params?: {
  complete?: () => void;
  success?: (params: null) => void;
  fail?: (params: {
    errorMsg: string;
    errorCode: string | number;
    innerError: {
      errorCode: string | number;
      errorMsg: string;
    };
  }) => void;
}): void;

ty.showToast

显示消息提示框

需引入BaseKit，且在>=1.2.10版本才可使用

参数

Object object

属性	类型	必填	说明
title	`string`	是	提示的内容
icon	`string`	否	图标 'success' / 'error' / 'loading' / 'none'
image	`string`	否	自定义图标的本地路径，image 的优先级高于 icon
duration	`number`	否	提示的延迟时间
mask	`boolean`	否	是否显示透明蒙层，防止触摸穿透
complete	`function`	否	接口调用结束的回调函数（调用成功、失败都会执行）
success	`function`	否	接口调用成功的回调函数
fail	`function`	否	接口调用失败的回调函数

函数定义示例

/**
 * 显示消息提示框
 */
export function showToast(params: {
  /** 提示的内容 */
  title: string;
  /** 图标 'success' / 'error' / 'loading' / 'none' */
  icon?: string;
  /** 自定义图标的本地路径，image 的优先级高于 icon */
  image?: string;
  /** 提示的延迟时间 */
  duration?: number;
  /** 是否显示透明蒙层，防止触摸穿透 */
  mask?: boolean;
  complete?: () => void;
  success?: (params: null) => void;
  fail?: (params: {
    errorMsg: string;
    errorCode: string | number;
    innerError: {
      errorCode: string | number;
      errorMsg: string;
    };
  }) => void;
}): void;

ty.hideToast

隐藏消息提示框

需引入BaseKit，且在>=1.2.10版本才可使用

参数

Object object

属性	类型	必填	说明
complete	`function`	否	接口调用结束的回调函数（调用成功、失败都会执行）
success	`function`	否	接口调用成功的回调函数
fail	`function`	否	接口调用失败的回调函数

函数定义示例

/**
 * 隐藏消息提示框
 */
export function hideToast(params?: {
  complete?: () => void;
  success?: (params: null) => void;
  fail?: (params: {
    errorMsg: string;
    errorCode: string | number;
    innerError: {
      errorCode: string | number;
      errorMsg: string;
    };
  }) => void;
}): void;

👉 立即开发。