工具/交互方法
通用方法
$w.utils.showToast
$w.utils.showToast(options):void
功能描述
显示提示框
入参
options: object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
title | title | 是 | 提示的内容 | |
icon | string | 'success' | 否 | 图标 |
image | string | 否 | 自定义图标的本地路径或 url ,image 的优先级高于 icon | |
duration | number | 1500 | 否 | 提示的延迟时间(毫秒) |
入参 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
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
title | string | false | 提示的内容 | |
mask | boolean | false | 移动端是否显示透明蒙层(移动端显示透明蒙层可以防止触摸穿透,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
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
title | string | 否 | 提示的标题 | |
content | string | 否 | 提示的内容 | |
showCancel | boolean | true | 否 | 是否显示取消按钮 |
cancelText | string | '取消' | 否 | 取消按钮的文字,最多 4 个字符 |
cancelColor | string | #000000 | 否 | 取消按钮的文字颜色,必须是 16 进制格式的颜色字符串 |
confirmText | string | '确定' | 否 | 确认按钮的文字,最多 4 个字符 |
confirmColor | string | #576B95 | 否 | 确认按钮的文字颜色,必须是 16 进制格式的颜色字符串 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
入参 object.success 回调函数:
属性 | 类型 | 说明 |
---|---|---|
content | string | editable 为 true 时,用户输入的文本 |
confirm | boolean | 为 true 时,表示用户点击了确定按钮 |
cancel | boolean | 为 true 时,表示用户点击了取消 |
示例
$w.utils.showModal({
title: '提示',
content: '这是一个模态弹窗',
success(res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
},
});
$w.utils.callPhone
功能描述
拨打电话
入参
options: object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
tel | string | 是 | 电话号码 |
示例
$w.utils.callPhone({
tel: '18718573322',
});
$w.utils.scanCode
功能描述
调起扫码界面进行扫码
入参
options: object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
onlyFromCamera | boolean | false | 否 | 是否只能从相机扫码,不允许从相册选择图片 |
scanType | string[] | ['barCode', 'qrCode'] | 否 | 扫码类型 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
scanType 的值有:
合法值 | 说明 |
---|---|
barCode | 条码 |
qrCode | 二维码 |
出参
入参为 object 类型:
属性 | 类型 | 说明 |
---|---|---|
result | string | 所扫码的内容 |
scanType | string[] | 所扫码的类型 |
示例
// 只允许从相机扫码
$w.utils.scanCode({
onlyFromCamera: true,
success: (res) => {
console.log(res);
},
});
$w.utils.setClipboardData
功能描述
设置系统剪贴板的内容
由于浏览器安全限制,该方法不能完全静默触发,只在点击等交互动事件触发时开启的一个窗口期内有效。例如:页面 load 生命周期内调用无效,在组件点击事件触发后,先异步请求一个接口,之后再设置剪贴板也可能无效(异步请求数据时间较长时,点击触发的激活过期,此时无法再访问剪贴板)。
小程序无特别的限制。
入参
options: object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
data | string | '' | 是 | 剪贴板的内容 |
示例
$w.utils.setClipboardData({
data: '复制内容到剪贴板',
});
$w.utils.navigateTo
功能描述
保留当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
入参
options: object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
pageId | string | '' | 否 | 页面 id |
packageName | string | '' | 否 | 子应用包地址,例如 packages/subapp |
params | object | {} | 否 | query object 对象 |
url | string | '' | 否 | 支持通过协议跳转,传递 url 时,pageId 作为页面路径解析,不需要单独传递 |
options | object | {} | 否 | 支持 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 类型:
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
pageId | string | '' | 是 | 页面 id |
packageName | string | '' | 否 | 子应用名称 |
params | object | {} | 否 | query object 对象 |
示例
$w.utils.redirectTo({
pageId: 'home', // 页面 Id
packageName: '', // 主应用为空或不填,子模块填写 子包目录,查找位置 子包编辑器 --- 页面 --- 子包目录
params: { key: 'value' },
});
$w.utils.reLaunch
功能描述
关闭所有页面,打开到应用内的某个页面(因浏览器限制,web 下能后退页面)
入参
options: object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
pageId | string | '' | 是 | 页面 id |
packageName | string | '' | 否 | 子应用名称 |
params | object | {} | 否 | query object 对象 |
示例
$w.utils.reLaunch({
pageId: 'home', // 页面 Id
packageName: '', // 主应用为空或不填,子模块填写 子包目录,查找位置 子包编辑器 --- 页面 --- 子包目录
params: {},
});
$w.utils.relaunchHome
功能描述
返回首页
入参
无
出参
无
示例
$w.utils.relaunchHome();
$w.utils.navigateBack
功能描述
关闭当前页面,返回上一页面或多级页面。
入参
options: object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
delta | number | 1 | 否 | 返回的页面数,如果 delta 大于现有页面数,则返回到首页。 |
示例
$w.utils.navigateBack();
$w.utils.getEnumValue
功能描述
获取枚举值,调用方法为 getEnumValue({ enumOptions, optionSetName, key })
入参
params: object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
enumOptions | { key: any; value: any }[] | { response: { data: { items: any[] } } | 是 | 枚举列表或通用选项集接口返回值 | |
optionSetName | string | 否 | 选项集标识,查询 enumOptions 中对应的选项集列表 | |
key | any | 否 | 要获取的选项值对应的 key 或 key 列表,不传时默认返回选项集中的所有值 |
出参
result: object
属性 | 类型 | 说明 |
---|---|---|
result | any | 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
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
key | string | 是 | 本地缓存中指定的 key |
出参
result: IGetStorageRes
属性 | 类型 | 说明 |
---|---|---|
data | any | key 对应的内容 |
示例
$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
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
key | string | 是 | 本地缓存中指定的 key | |
data | any | 是 | 需要存储的内容。只支持原生类型、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
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
key | string | 是 | 本地缓存中指定的 key |
示例
$w.utils.removeStorage({ key: 'cache_kay' });
WEB 专属方法
$w.utils.exportData
功能描述
导出数据保存为文件
入参
options: object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
data | Object[] | [] | 是 | 需要导出的数据,如:[{name: 'sam', age: 18}] |
fileName | String | 'download' | 否 | 导出文件名 |
fileType | String | 'csv' | 否 | 导出文件类型,支持 csv 与 xlsx |
options | Object | {} | 否 | 其他导出选项 |
options.options object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
sheetName | string | undefined | 否 | 当导出类型为 xlsx 时,指定导出数据的 sheet 名 |
示例
$w.utils.exportData({
data: [{ name: 'sam', age: 18 }],
fileName: 'filename',
fileType: 'xlsx',
options: { sheetName: 'sheet1' },
});
小程序专属方法
$w.utils.requestSubscribeMessage
功能描述
调起客户端小程序订阅消息界面,返回用户订阅消息的操作结果
入参
options: object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
tmplIds | Array | 是 | 需要订阅的消息模板的 id 的集合,一次调用最多可订阅 3 条消息。 |
出参
options: object
属性 | 类型 | 说明 |
---|---|---|
res | object | 订阅结果 |
订阅结果 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 这条消息。 |
errMsg | String | 接口调用成功时 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
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
latitude | number | 是 | 纬度,范围为-90~90,负数表示南纬。使用 gcj02 国测局坐标系 | |
longitude | number | 是 | 经度,范围为-180~180,负数表示西经。使用 gcj02 国测局坐标系 | |
scale | number | 18 | 否 | 缩放比例,范围 5~18 |
name | number | 否 | 位置名 | |
address | number | 否 | 地址的详细说明 |
出参
无
示例
$w.utils.openLocation({
latitude: 39.92,
longitude: 116.46,
scale: 18,
name: '北京',
address: '北京市',
});
$w.utils.reserveChannelsLive
功能描述
预约视频号直播
入参
options: object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
noticeId | string | 是 | 预告 id,通过 getChannelsLiveNoticeInfo 接口获取 |
出参
options: object
属性 | 类型 | 说明 |
---|---|---|
state | number | 用户的预约结果 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
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
finderUserName | string | 是 | 视频号 id |
出参
无
示例
$w.utils.openChannelsUserProfile({
finderUserName: 'sphxxxxxxxxxxxxx',
});
$w.utils.openChannelsLive
功能描述
打开视频号直播
入参
options: object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
finderUserName | string | 是 | 视频号 id | |
feedId | string | 否 | 直播 feedId,通过 getChannelsLiveInfo 接口获取 | |
nonceId | string | 否 | 直播 nonceId,通过 getChannelsLiveInfo 接口获取 |
出参
无
示例
$w.utils.openChannelsLive({
finderUserName: 'sphxxxxxxxxxxxxx',
});
$w.utils.openChannelsEvent
功能描述
打开视频号活动页
入参
options: object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
finderUserName | string | 是 | 视频号 id | |
eventId | string | 是 | 活动 id |
出参
无
示例
$w.utils.openChannelsEvent({
finderUserName: 'sphxxxxxxxxxxxxx',
eventId: 'event/ULEZgBPE26EcB1M9DtqAzNPgMJqg8sGefrd7RCKj5fFUerYjasdasdasd',
});
$w.utils.openChannelsActivity
功能描述
打开视频号视频
入参
options: object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
finderUserName | string | 是 | 视频号 id | |
feedId | string | 是 | 视频 feedId |
出参
无
示例
$w.utils.openChannelsActivity({
finderUserName: 'sphxxxxxxxxxxxxx',
feedId: 'xxxxxxx',
});
$w.utils.getChannelsLiveNoticeInfo
功能描述
获取视频号直播预告信息
入参
options: object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
finderUserName | string | 是 | 视频号 id |
出参
options: object
属性 | 类型 | 说明 |
---|---|---|
noticeId | string | 预告 id |
status | number | 预告状态:0 可用 1 取消 2 已用 |
startTime | string | 开始时间 |
headUrl | string | 直播封面 |
nickname | string | 视频号昵称 |
reservable | boolean | 是否可预约 |
otherInfos | Array | 除最近的一条预告信息外,其他的预告信息列表(注意:每次最多返回按时间戳增序排列的 15 个预告信息,其中时间最近的那个预告信息会在接口其他的返回参数中展示,其余的预告信息会在该字段中展示)。 |
示例
$w.utils.getChannelsLiveNoticeInfo({
params: { finderUserName: 'sphxxxxxxxxxxxxx' },
});
$w.utils.getChannelsLiveInfo
功能描述
获取视频号直播信息
入参
options: object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
finderUserName | string | 是 | 视频号 id | |
startTime | number | 否 | 起始时间,筛选指定时间段的直播。若上传了 endTime,未上传 startTime,则 startTime 默认为 0 | |
endTime | number | 否 | 结束时间,筛选指定时间段的直播。若上传了 startTime,未上传 endTime,则 endTime 默认取当前时间 |
出参
options: object
属性 | 类型 | 说明 | |
---|---|---|---|
feedId | string | 直播 feedId | |
noticeId | string | 直播 id | |
description | string | 直播主题 | |
status | number | 直播状态:2 直播中 3 直播结束 | |
headUrl | string | 视频号头像 | |
nickname | string | 视频号昵称 | |
replayStatus | string | 直播回放状态: 0 未生成 1 已生成 3 生成中 6 已过期 | |
otherInfos | Array | 除最近的一条直播外,其他的直播列表(注意:每次最多返回按时间戳增序排列的 15 个直播信息,其中时间最近的那个直播会在接口其他的返回参数中展示,其余的直播会在该字段中展示)。 | 、 |
示例
$w.utils.getChannelsLiveInfo({
params: { finderUserName: 'sphxxxxxxxxxxxxx' },
});