跳到主要内容

工具/交互方法

通用方法

$w.utils.showToast

$w.utils.showToast(options):void

功能描述

显示提示框

入参

options: object
属性类型默认值必填说明
titletitle提示的内容
iconstring'success'图标
imagestring自定义图标的本地路径或 url ,image 的优先级高于 icon
durationnumber1500提示的延迟时间(毫秒)

入参 object.icon 的合法值:

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

示例

$w.utils.showToast({
title: '成功',
icon: 'success',
duration: 2000, // 2秒
});
$w.utils.showToast({
title: '失败',
icon: 'error',
duration: 2000, // 2秒
});

$w.utils.showLoading

功能描述

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

入参

options: object
属性类型默认值必填说明
titlestringfalse提示的内容
maskbooleanfalse移动端是否显示透明蒙层(移动端显示透明蒙层可以防止触摸穿透,PC 端不受此配置影响)

示例

$w.utils.showLoading({
title: '加载中',
mask: false,
});

showLoading 弹窗样式

showLoading 弹窗提供了相关的 className,可以用来自定义弹窗的相关样式(不支持微信小程序),具体如下:

className说明
.wd-toast可以为根节点设置样式
.wd-toast__mask可以为透明蒙层设置样式
.wd-toast__body可以为主体内容设置样式
.wd-toast__icon可以为 loading 图标设置样式
.wd-toast__title可以为 loading 标题设置样式

$w.utils.hideLoading

功能描述

隐藏 loading 提示框。

示例

$w.utils.hideLoading();

$w.utils.showModal

$w.utils.showModal(options):void

功能描述

显示模态对话框。

入参

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

入参 object.success 回调函数:

属性类型说明
contentstringeditable 为 true 时,用户输入的文本
confirmboolean为 true 时,表示用户点击了确定按钮
cancelboolean为 true 时,表示用户点击了取消

示例

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

$w.utils.callPhone

功能描述

拨打电话

入参

options: object
属性类型默认值必填说明
telstring电话号码

示例

$w.utils.callPhone({
tel: '18718573322',
});

$w.utils.scanCode

功能描述

调起扫码界面进行扫码

入参

options: object
属性类型默认值必填说明
onlyFromCamerabooleanfalse是否只能从相机扫码,不允许从相册选择图片
scanTypestring[]['barCode', 'qrCode']扫码类型
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

scanType 的值有:

合法值说明
barCode条码
qrCode二维码

出参

入参为 object 类型:

属性类型说明
resultstring所扫码的内容
scanTypestring[]所扫码的类型

示例

// 只允许从相机扫码
$w.utils.scanCode({
onlyFromCamera: true,
success: (res) => {
console.log(res);
},
});

$w.utils.setClipboardData

功能描述

设置系统剪贴板的内容

浏览器安全限制

由于浏览器安全限制,该方法不能完全静默触发,只在点击等交互动事件触发时开启的一个窗口期内有效。例如:页面 load 生命周期内调用无效,在组件点击事件触发后,先异步请求一个接口,之后再设置剪贴板也可能无效(异步请求数据时间较长时,点击触发的激活过期,此时无法再访问剪贴板)。

小程序无特别的限制。

入参

options: object
属性类型默认值必填说明
datastring''剪贴板的内容

示例

$w.utils.setClipboardData({
data: '复制内容到剪贴板',
});

$w.utils.navigateTo

功能描述

保留当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

入参

options: object
属性类型默认值必填说明
pageIdstring''页面 id
packageNamestring''子应用包地址,例如 packages/subapp
paramsobject{}query object 对象
urlstring''支持通过协议跳转,传递 url 时,pageId 作为页面路径解析,不需要单独传递
optionsobject{}支持 web/小程序端传递扩展参数

示例

$w.utils.navigateTo({
pageId: 'index', // 页面 Id
params: { key: 'value' },
});

通过协议跳转方式示例:

// 需要跳转到内部页面时,url 使用 weda-page:// 前缀,形如 weda-page://PACKAGE_NAME/PAGE_PATH,未开启分包功能时,packagename为main,开启后为子包名称 如:
$w.utils.navigateTo({
url: 'weda-page://main/index?tt=2323';
options:{
target:'\_blank' //支持 web 端打开新窗口
}
});

// 需要跳转到外部页面时,url 支持http/https协议
$w.utils.navigateTo({
url: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/WdLink';
});

// 需要跳转到其他小程序页面时,url 使用miniprogram:// 前缀,形如 miniprogram://appId/PAGE_PATH
$w.utils.navigateTo({
url: 'miniprogram://wx1574617e567497e1/pages/register_start/index?foo=bar';
options:{
env_version:'\_blank' //要打开的小程序版本,正式版为release,体验版为trial,开发版为develop,仅在微信外打开时生效。注意:若不填写,则默认打开正式版小程序。
}
});

// 需要跳转到小程序插件页面时,url 使用plugin:// 前缀,形如 plugin://PLUGIN_NAME/PLUGIN_PAGE
$w.utils.navigateTo({
url: 'plugin://myPlugin/index';
});

$w.utils.redirectTo

功能描述

关闭当前页面,跳转到应用内的某个页面。

入参

入参为 object 类型:

属性类型默认值必填说明
pageIdstring''页面 id
packageNamestring''子应用名称
paramsobject{}query object 对象

示例

$w.utils.redirectTo({
pageId: 'home', // 页面 Id
packageName: '', // 主应用为空或不填,子模块填写 子包目录,查找位置 子包编辑器 --- 页面 --- 子包目录
params: { key: 'value' },
});

$w.utils.reLaunch

功能描述

关闭所有页面,打开到应用内的某个页面(因浏览器限制,web 下能后退页面)

入参

options: object
属性类型默认值必填说明
pageIdstring''页面 id
packageNamestring''子应用名称
paramsobject{}query object 对象

示例

$w.utils.reLaunch({
pageId: 'home', // 页面 Id
packageName: '', // 主应用为空或不填,子模块填写 子包目录,查找位置 子包编辑器 --- 页面 --- 子包目录
params: {},
});

$w.utils.relaunchHome

功能描述

返回首页

入参

出参

示例

$w.utils.relaunchHome();

$w.utils.navigateBack

功能描述

关闭当前页面,返回上一页面或多级页面。

入参

options: object
属性类型默认值必填说明
deltanumber1返回的页面数,如果 delta 大于现有页面数,则返回到首页。

示例

$w.utils.navigateBack();

$w.utils.getEnumValue

功能描述

获取枚举值,调用方法为 getEnumValue({ enumOptions, optionSetName, key })

入参

params: object
属性类型默认值必填说明
enumOptions{ key: any; value: any }[] | { response: { data: { items: any[] } }枚举列表或通用选项集接口返回值
optionSetNamestring选项集标识,查询 enumOptions 中对应的选项集列表
keyany要获取的选项值对应的 key 或 key 列表,不传时默认返回选项集中的所有值

出参

result: object
属性类型说明
resultany | any[]获取到的选项集值

示例

/**
* 自定义枚举列表查询
*/
const enumOptions = [
{ key: '1', value: 'aa' },
{ key: '2', value: 'bb' },
];
// 不传入optionSetName和key,则返回枚举列表
$w.utils.getEnumValue({ enumOptions }); // result: [{label: 'aa', value: '1'}, {label: 'bb', value: '2'}]
// 不传入optionSetName,传入key,则返回对应key的值
$w.utils.getEnumValue({ enumOptions, key: '1' }); // result: 'aa'

/**
* 通用选项集接口返回值作为enumOptions入参
*/
const enumOptions = $w.query1.data;
// 不传入optionSetName和key,则返回选项集列表对象
$w.utils.getEnumValue({ enumOptions }); // result: { sex: [{label: '女', value: '1'}, {label: '男', value: '2'}]}
// 传入optionSetName,不传入key,则返回对应选项标识的选项集列表
$w.utils.getEnumValue({ enumOptions, optionSetName: 'sex' }); // result: [{label: '女', value: '1'}, {label: '男', value: '2'}]
// 传入optionSetName和key,则返回对应选项标识的选项集列表中对应key的值
$w.utils.getEnumValue({ enumOptions, optionSetName: 'sex', key: '1' }); // result: '女'

$w.utils.getStorage

async getStorage(options: IGetStorageOptions): Promise<IGetStorageRes>

功能描述

从本地缓存中异步获取指定 key 的内容。返回 Promise 对象

入参

params: IGetStorageOptions
属性类型默认值必填说明
keystring本地缓存中指定的 key

出参

result: IGetStorageRes
属性类型说明
dataanykey 对应的内容

示例

$w.utils.getStorage({ key: 'cache_kay' }); // result: { data: xxx }

$w.utils.setStorage

async setStorage(options: ISetStorageOptions): Promise<void>

功能描述

将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。

入参

params: ISetStorageOptions
属性类型默认值必填说明
keystring本地缓存中指定的 key
dataany需要存储的内容。只支持原生类型、Date、及能够通过 JSON.stringify 序列化的对象。

示例

$w.utils.setStorage({ key: 'cache_kay', data: { test: 10 } });

$w.utils.removeStorage

async removeStorage(options: IRemoveStorageOptions): Promise<void>

功能描述

从本地缓存中移除指定 key,调用方法为 removeStorage({ key })

入参

params: IRemoveStorageOptions
属性类型默认值必填说明
keystring本地缓存中指定的 key

示例

$w.utils.removeStorage({ key: 'cache_kay' });

WEB 专属方法

$w.utils.exportData

功能描述

导出数据保存为文件

入参

options: object
属性类型默认值必填说明
dataObject[][]需要导出的数据,如:[{name: 'sam', age: 18}]
fileNameString'download'导出文件名
fileTypeString'csv'导出文件类型,支持 csv 与 xlsx
optionsObject{}其他导出选项
options.options object
属性类型默认值必填说明
sheetNamestringundefined当导出类型为 xlsx 时,指定导出数据的 sheet 名

示例

$w.utils.exportData({
data: [{ name: 'sam', age: 18 }],
fileName: 'filename',
fileType: 'xlsx',
options: { sheetName: 'sheet1' },
});

小程序专属方法

$w.utils.requestSubscribeMessage

功能描述

调起客户端小程序订阅消息界面,返回用户订阅消息的操作结果

入参

options: object
属性类型默认值必填说明
tmplIdsArray需要订阅的消息模板的 id 的集合,一次调用最多可订阅 3 条消息。

出参

options: object
属性类型说明
resobject订阅结果
订阅结果 res: object
属性类型说明
[TEMPLATE_ID: string]String[TEMPLATE_ID]是动态的键,即模板 id,值包括'accept'、'reject'、'ban'、'filter'、'acceptWithAudio'。'accept'表示用户同意订阅该条 id 对应的模板消息,'reject'表示用户拒绝订阅该条 id 对应的模板消息,'ban'表示已被后台封禁,'acceptWithAudio' 表示用户接收订阅消息并开启了语音提醒,'filter'表示该模板因为模板标题同名被后台过滤。例如 { errMsg: 'requestSubscribeMessage:ok', zun-LzcQyW-edafCVvzPkK4de2Rllr1fFpw2A_x0oXE: 'accept'} 表示用户同意订阅 zun-LzcQyW-edafCVvzPkK4de2Rllr1fFpw2A_x0oXE 这条消息。
errMsgString接口调用成功时 errMsg 值为'requestSubscribeMessage:ok'

示例

$w.utils.requestSubscribeMessage({
params: {
tmplIds: ['zun-LzcQyW-edafCVvzPkK4de2Rllr1fFpw2A_x0oXE'],
},
});
// 只能通过 tap 事件触发
// 执行成功后返回
// {
// res: {
// errMsg: 'requestSubscribeMessage:ok',
// zun-LzcQyW-edafCVvzPkK4de2Rllr1fFpw2A_x0oXE: 'accept'
// }
// }

$w.utils.openLocation

功能描述

使用微信内置地图查看位置

入参

options: object
属性类型默认值必填说明
latitudenumber纬度,范围为-90~90,负数表示南纬。使用 gcj02 国测局坐标系
longitudenumber经度,范围为-180~180,负数表示西经。使用 gcj02 国测局坐标系
scalenumber18缩放比例,范围 5~18
namenumber位置名
addressnumber地址的详细说明

出参

示例

$w.utils.openLocation({
latitude: 39.92,
longitude: 116.46,
scale: 18,
name: '北京',
address: '北京市',
});

$w.utils.reserveChannelsLive

功能描述

预约视频号直播

入参

options: object
属性类型默认值必填说明
noticeIdstring预告 id,通过 getChannelsLiveNoticeInfo 接口获取

出参

options: object
属性类型说明
statenumber用户的预约结果 state = 1,正在直播中,用户点击“取消”拒绝前往直播 state = 2,正在直播中,用户点击“允许”前往直播 state = 3,预告已取消 state = 4,直播已结束 state = 5,用户此前未预约,在弹窗中未预约直播直接收起弹窗 state = 6,用户此前未预约,在弹窗中预约了直播 state = 7,用户此前已预约,在弹窗中取消了预约 state = 8,用户此前已预约,直接收起弹窗 state = 9,弹窗唤起前用户直接取消 state = 10,直播预约已过期

示例

$w.utils.reserveChannelsLive({
params: {
noticeId: 'xxxxxxxxxxxxx',
},
});

$w.utils.openChannelsUserProfile

功能描述

打开视频号主页

入参

options: object
属性类型默认值必填说明
finderUserNamestring视频号 id

出参

示例

$w.utils.openChannelsUserProfile({
finderUserName: 'sphxxxxxxxxxxxxx',
});

$w.utils.openChannelsLive

功能描述

打开视频号直播

入参

options: object
属性类型默认值必填说明
finderUserNamestring视频号 id
feedIdstring直播 feedId,通过 getChannelsLiveInfo 接口获取
nonceIdstring直播 nonceId,通过 getChannelsLiveInfo 接口获取

出参

示例

$w.utils.openChannelsLive({
finderUserName: 'sphxxxxxxxxxxxxx',
});

$w.utils.openChannelsEvent

功能描述

打开视频号活动页

入参

options: object
属性类型默认值必填说明
finderUserNamestring视频号 id
eventIdstring活动 id

出参

示例

$w.utils.openChannelsEvent({
finderUserName: 'sphxxxxxxxxxxxxx',
eventId: 'event/ULEZgBPE26EcB1M9DtqAzNPgMJqg8sGefrd7RCKj5fFUerYjasdasdasd',
});

$w.utils.openChannelsActivity

功能描述

打开视频号视频

入参

options: object
属性类型默认值必填说明
finderUserNamestring视频号 id
feedIdstring视频 feedId

出参

示例

$w.utils.openChannelsActivity({
finderUserName: 'sphxxxxxxxxxxxxx',
feedId: 'xxxxxxx',
});

$w.utils.getChannelsLiveNoticeInfo

功能描述

获取视频号直播预告信息

入参

options: object
属性类型默认值必填说明
finderUserNamestring视频号 id

出参

options: object
属性类型说明
noticeIdstring预告 id
statusnumber预告状态:0 可用 1 取消 2 已用
startTimestring开始时间
headUrlstring直播封面
nicknamestring视频号昵称
reservableboolean是否可预约
otherInfosArray除最近的一条预告信息外,其他的预告信息列表(注意:每次最多返回按时间戳增序排列的 15 个预告信息,其中时间最近的那个预告信息会在接口其他的返回参数中展示,其余的预告信息会在该字段中展示)。

示例

$w.utils.getChannelsLiveNoticeInfo({
params: { finderUserName: 'sphxxxxxxxxxxxxx' },
});

$w.utils.getChannelsLiveInfo

功能描述

获取视频号直播信息

入参

options: object
属性类型默认值必填说明
finderUserNamestring视频号 id
startTimenumber起始时间,筛选指定时间段的直播。若上传了 endTime,未上传 startTime,则 startTime 默认为 0
endTimenumber结束时间,筛选指定时间段的直播。若上传了 startTime,未上传 endTime,则 endTime 默认取当前时间

出参

options: object
属性类型说明
feedIdstring直播 feedId
noticeIdstring直播 id
descriptionstring直播主题
statusnumber直播状态:2 直播中 3 直播结束
headUrlstring视频号头像
nicknamestring视频号昵称
replayStatusstring直播回放状态: 0 未生成 1 已生成 3 生成中 6 已过期
otherInfosArray除最近的一条直播外,其他的直播列表(注意:每次最多返回按时间戳增序排列的 15 个直播信息,其中时间最近的那个直播会在接口其他的返回参数中展示,其余的直播会在该字段中展示)。

示例

$w.utils.getChannelsLiveInfo({
params: { finderUserName: 'sphxxxxxxxxxxxxx' },
});