物联网开发平台
有奖捉虫：办公协同&微信生态&物联网文档专题 HOT
文档中心 > 物联网开发平台 > 应用端开发指南 > 腾讯连连自定义 H5 开发 > H5 自定义开发 SDK > 界面组件

界面组件

最近更新时间：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
参数说明
请参见 展示 tips 参数说明。

关闭加载提示

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

显示成功提示

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

显示一般提示

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

显示错误提示

先标准化处理错误展示信息，然后展示错误 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

中国站