界面组件

最近更新时间:2023-09-27 09:37:51

我的收藏

tips 组件

tips 组件,样式和风格与腾讯连连小程序一致。

基础用法

接口定义
sdk.tips.show(message, options) => Promise
参数说明
参数名
参数描述
类型
必填
message
提示文本。
string
options.type
tips 类型。
'info'
'danger'
'loading'
'success'
options.waitForHide
若为 true,则 show 方法返回一个 Promise,并且当关闭后才会触发 resolve。
boolean
options.duration
展示提示的时间,单位毫秒,默认1500。
number
options.delayDuration
默认为0,单位毫秒,提示会在该延时后展示。
number
options.canClickClose
默认为 true,点击 mask 是否能够关闭提示。
boolean
options.canBeReplace
默认为 false,为 false 时上一个提示未关闭前,再次调用 tips.show 会被忽略。
boolean

关闭提示

接口定义
sdk.tips.hide() => Promise

显示加载提示

封装后的 tips.show 方法,等价于:
sdk.tips.show(message, {
type: 'loading',
canBeReplace: true,
duration: 0,
delayDuration: 200,
canClickClose: false,
...options,
});
接口定义
sdk.tips.showLoading(message, options) => Promise
参数说明

关闭加载提示

展示 loading tips 后必须主动调用本接口,否则 tips 将会一直保留。
接口定义
sdk.tips.hideLoading() => Promise

显示成功提示

封装后的 tips.show 方法,等价于:
sdk.tips.show(message, { type: 'success', ...options });
接口定义
sdk.tips.showSuccess(message, options) => Promise
参数说明

显示一般提示

封装后的 tips.show 方法,等价于:
sdk.tips.show(message, { type: 'info', ...options });
接口定义
sdk.tips.showInfo(message, options) => Promise
参数说明

显示错误提示

先标准化处理错误展示信息,然后展示错误 tips。等价于:
sdk.tips.show(getErrorMsg(error), { type: 'error', ...options });
接口定义
sdk.tips.showError(error, options) => Promise
参数说明
参数名
参数描述
类型
必填
error
错误对象或错误信息。
Error
{ code, msg }
string
options
object

模态对话框

基础用法

展示一个弹窗,参数、功能、样式同小程序原生 showModal 基本一致。
接口定义
sdk.tips.showModal({
title?: string,
content?: string,
showCancel?: boolean,
cancelText?: string,
cancelColor?: string,
confirmText?: string,
confirmColor?: string,
}) => Promise<boolean>
参数说明
参数名
参数描述
类型
必填
title
弹窗标题。
string
content
弹窗内容。
string
showCancel
是否展示取消按钮,默认为 true。
boolean
cancelText
取消按钮文案,默认为“取消”。
string
cancelColor
取消按钮颜色,默认为“#6C7078”。
string
confirmText
确认按钮文案,默认为“确定”。
string
confirmColor
确认按钮颜色,默认为“#0066FF”。
string
返回值
返回一个 Promise<boolean>,输出结果取值如下:
true :用户点击确认
false :用户点击取消

确认模态对话框

基于 sdk.tips.showModal 封装,用于向用户进行二次确认操作时使用。
接口定义
sdk.tips.confirm(title, content, options) => Promise<boolean>
参数说明
参数名
参数描述
类型
必填
title
弹窗标题。
string
content
弹窗内容。
string
options
object
示例代码
const isConfirm = await sdk.tips.confirm('确认删除该设备吗?');
if (isConfirm) {
// 用户确认,执行后续流程
}

提示模态对话框

基于 sdk.tips.showModal 封装,用于向用户进行消息提示操作时使用。
接口定义
sdk.tips.alert(content, options) => Promise<boolean>
参数说明
参数名
参数描述
类型
必填
content
弹窗内容。
string
options
object
示例代码
向用户进行消息提示。
await sdk.tips.alert('该功能暂时无法使用,请稍后再试');

设备离线提示组件

设备离线提示组件,样式和风格与腾讯连连小程序一致。

基础用法

接口定义
// 调用方式1
sdk.offlineTip.show() => void
// 调用方式2
sdk.showOfflineTip() => void

关闭提示

接口定义
// 调用方式1
sdk.offlineTip.hide() => void
// 调用方式2
sdk.hideOfflineTip() => void

H5 自定义设备详情视图

显示设备详情视图

在当前 H5 展示一个铺满全屏的设备详情视图,支持增加自定义菜单项及按钮。
接口定义
sdk.showDeviceDetail({
deviceInfo?: object,
labelWidth?: number,
marginTop?: number,
shareParams?: object,
extendItems?: ExtendItemConfig[],
extendButtons?: ExtendButtonConfig[],
containerClassName?: string
}) => void
参数说明
参数名
参数描述
类型
必填
extendItems[].label
自定义菜单项的标题。
string
extendButtons[].text
自定义按钮文案。
string
extendButtons[].onClick
自定义按钮点击后触发的回调。
function
deviceInfo
展示详情的设备信息,不传则使用当前设备信息。
object
labelWidth
设备详情的 label 宽度,默认110,单位 px。
number
marginTop
设备详情的上间距,默认10,单位 px。
number
shareParams
自定义分享参数。
object
string
extendItems
自定义菜单配置。
ExtendItemConfig[]
extendItems[].labelIcon
展示在 label 前的 icon 地址。
string
extendItems[].content
自定义菜单项的内容。
string
extendItems[].className
自定义菜单项的样式类名。
string
extendItems[].onClick
点击自定义菜单项后触发的回调。
function
extendButtons
自定义按钮配置。
ExtendButtonConfig[]
extendButtons[].className
自定义按钮的样式类名。
string
extendButtons[].type
自定义按钮的风格。
'danger'
'primary'
'warning'
containerClassName
容器的样式类名。
string

关闭设备详情视图

接口定义
sdk.hideDeviceDetail() => void