Tools/Interaction Methods

General Methods

$w.utils.showToast

$w.utils.showToast(options):void

Feature Description

Show tooltip

Input Parameters

options: object

Property	Type	Default Value	Required	Description
title	title		Yes	The content of the tooltip
icon	string	'success'	No	Icon
image	string		No	The local path or url of the custom icon. The priority of image is higher than that of icon.
duration	number	1500	No	Delay duration of the tooltip (milliseconds)

Valid values for the input parameter object.icon:

Value	Description
success	Displays a success icon. In this case, the title text can display up to 7 Chinese characters.
error	Displays an error icon. In this case, the title text can display up to 7 Chinese characters.
loading	Displays a loading icon. In this case, the title text can display up to 7 Chinese characters.
none	Does not display an icon. In this case, the title text can display up to two lines. Supported in version 1.9.0 and above.

Example

$w.utils.showToast({
  title: 'Success',
  icon: 'success',
  duration: 2000 // 2 seconds
});

$w.utils.showToast({
  title: 'Failure',
  icon: 'error',
  duration: 2000 // 2 seconds
});

$w.utils.showLoading

Feature Description

Display a loading toast. It can only be closed by actively calling $w.utils.hideLoading.

Input Parameters

options: object

Property	Type	Default Value	Required	Description
title	string		false	Content of the prompt
mask	boolean		false	Whether to display a transparent mask on mobile (displaying a transparent mask on mobile prevents touch penetration, while PC end is unaffected by this configuration)

Example

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

showLoading Toast Style

The showLoading toast provides relevant className that can be used to customize the toast's styles (not supported in WeChat Mini Programs), as follows:

className	Description
.wd-toast	Can be used to style the root node
.wd-toast__mask	Can be used to style the transparent mask
.wd-toast__body	Can be used to style the main body
.wd-toast__icon	Can style the loading icon
.wd-toast__title	Can style the loading title

$w.utils.hideLoading

Feature Description

Hide the loading toast.

Example

$w.utils.hideLoading();

$w.utils.showModal

$w.utils.showModal(options):void

Feature Description

Show modal dialog.

Input Parameters

options: object

Property	Type	Default Value	Required	Description
title	string		false	Prompt title
content	string		No	Content of the prompt
showCancel	boolean	true	No	Whether to display the cancel button
cancelText	string	'Cancel'	No	Text for the cancel button, up to 4 characters
cancelColor	string	#000000	No	Text color for the cancel button, must be a hexadecimal color string
confirmText	string	'Confirm'	No	Text for the confirm button, up to 4 characters
confirmColor	string	#576B95	No	Text color for the confirm button, must be a hexadecimal color string
success	function		No	Callback function for successful API calls
fail	function		No	Callback function for failed API calls
complete	function		No	Callback function for API call completion (executed for both successful and failed calls)

Input parameter object.success callback function:

Property	Type	Description
content	string	the text input by the user when editable is true
confirm	boolean	true when the user has clicked the confirm button
cancel	boolean	true when the user has clicked the cancel button

Example

$w.utils.showModal({
  title: 'Prompt',
  content: 'This is a modal dialog',
  success(res) {
    if (res.confirm) {
      console.log('User clicked confirm');
    } else if (res.cancel) {
      console.log('User clicked cancel');
    }
  }
});

$w.utils.callPhone

Feature Description

Call phone

Input Parameters

options: object

Property	Type	Default Value	Required	Description
tel	string		Required	Phone number

Example

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

$w.utils.scanCode

Feature Description

Launch the scanning interface to scan

Input Parameters

options: object

Property	Type	Default Value	Required	Description
onlyFromCamera	boolean	false	No	Only allow scanning from the camera; disallow selecting images from the album
scanType	string[]	['barCode', 'qrCode']	No	Scan type
success	function		No	Callback function for successful API calls
fail	function		No	Callback function for failed API calls
complete	function		No	Callback function for API call completion (executed for both successful and failed calls)

The possible values for scanType are:

Valid Values	Description
barCode	Barcode
qrCode	QR code

Response Parameters

Input parameter is of type object:

Property	Type	Description
result	string	Scanned content
scanType	string[]	Scan type

Example

// Only allow scanning from the camera
$w.utils.scanCode({
  onlyFromCamera: true,
  success: (res) => {
    console.log(res);
  }
});

$w.utils.setClipboardData

Feature Description

Set the content of the system clipboard

Browser security restrictions

Due to browser security restrictions, this method cannot be triggered completely silently and is only effective during a window period initiated by interactive events like clicks. For example: invocations during the page load lifecycle are invalid. If an asynchronous request is made after a component click event, subsequent clipboard settings may also fail (when the asynchronous data request takes too long, the click-triggered activation expires, making clipboard access unavailable).

Mini programs have no special restrictions.

Input Parameters

options: object

Property	Type	Default Value	Required	Description
data	string	''	Required	Content of the clipboard

Example

$w.utils.setClipboardData({
  data: 'Copy content to clipboard'
});

$w.utils.navigateTo

Feature Description

Keep the current page and navigate to a page within the app. However, navigation to tabbar pages is not allowed.

Input Parameters

options: object

Property	Type	Default Value	Required	Description
pageId	string	''	No	Page id
packageName	string	''	No	Sub-application package address, e.g., packages/subapp
params	object	{}	No	query object
url	string	''	No	Supports protocol-based redirection. When a URL is passed, pageId is parsed as the page path and does not need to be passed separately.
options	object	{}	No	Supports passing extended parameters from the web/Mini Program side

Example

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

Example of protocol-based redirection:

// When redirecting to an internal page, use the weda-page:// prefix in the url, e.g., weda-page://PACKAGE_NAME/PAGE_PATH. When the subpackage feature is disabled, the package name is 'main'; when enabled, it becomes the subpackage name, for example:
$w.utils.navigateTo({
  url: 'weda-page://main/index?tt=2323',
  options: {
    target: '_blank' // Supports opening a new window in the web environment
  }
});

// When redirecting to external pages, the url supports http/https protocols.
$w.utils.navigateTo({
  url: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/WdLink'
});

// When redirecting to other Mini Program pages, use the miniprogram:// prefix in the url, e.g., miniprogram://appId/PAGE_PATH
$w.utils.navigateTo({
  url: 'miniprogram://wx1574617e567497e1/pages/register_start/index?foo=bar',
  options: {
    env_version: '_blank' // The Mini Program version to open: 'release' for official version, 'trial' for trial version, 'develop' for development version. This only takes effect when opening outside WeChat. Note: If left blank, the official version will be opened by default.
  }
});

// When redirecting to a Mini Program plugin page, use the plugin:// prefix in the url, e.g., plugin://PLUGIN_NAME/PLUGIN_PAGE
$w.utils.navigateTo({
  url: 'plugin://myPlugin/index'
});

$w.utils.redirectTo

Feature Description

Close the current page and navigate to a page within the app.

Input Parameters

Input parameter is of type object:

Property	Type	Default Value	Required	Description
pageId	string	''	Yes	Page id
packageName	string	''	No	Sub-application name
params	object	{}	No	query object

Example

$w.utils.redirectTo({
  pageId: 'home', // Page Id
  packageName: '', // For the main application, leave empty or unset; for submodules, enter the subpackage directory. Location: Subpackage Editor --- Page --- Subpackage Directory
  params: { key: 'value' }
});

$w.utils.reLaunch

Feature Description

Close all pages and open a specific page within the application (due to browser limitations, in the web environment users can navigate back to pages).

Input Parameters

options: object

Property	Type	Default Value	Required	Description
pageId	string	''	Yes	Page id
packageName	string	''	No	Sub-application name
params	object	{}	No	query object

Example

$w.utils.reLaunch({
  pageId: 'home', // Page Id
  packageName: '', // For the main application, leave empty or unset; for submodules, enter the subpackage directory. Location: Subpackage Editor --- Page --- Subpackage Directory
  params: {}
});

$w.utils.relaunchHome

Feature Description

Return to Home

Input Parameters

None

Response Parameters

None

Example

$w.utils.relaunchHome();

$w.utils.navigateBack

Feature Description

Close the current page and return to the previous page or navigate back multiple pages.

Input Parameters

options: object

Property	Type	Default Value	Required	Description
delta	number	1	No	Number of pages to return. If delta is greater than the current number of pages, it returns to the home page.

Example

$w.utils.navigateBack();

$w.utils.getEnumValue

Feature Description

To get the enumeration value, call the method getEnumValue({ enumOptions, optionSetName, key })

Input Parameters

params: object

Property	Type	Default Value	Required	Description
enumOptions	{ key: any; value: any }[] | { response: { data: { items: any[] } }		Yes	Enumeration list or return value of a generic option set interface
optionSetName	string		No	Option set identifier used to query the corresponding option set list in enumOptions.
key	any		No	The key or list of keys corresponding to the option value to be retrieved. Returns all values in the option set by default when not passed.

Response Parameters

result: object

Property	Type	Description
result	any | any[]	Retrieved option set value

Example

/**
 * Custom Enumeration List Query
 */
const enumOptions = [
  { key: '1', value: 'aa' },
  { key: '2', value: 'bb' }
];
// If optionSetName and key are not passed, the enumeration list is returned.
$w.utils.getEnumValue({ enumOptions }); // result: [{label: 'aa', value: '1'}, {label: 'bb', value: '2'}]
// If optionSetName is not passed but key is passed, the value corresponding to the key is returned.
$w.utils.getEnumValue({ enumOptions, key: '1' }); // result: 'aa'

/**
 * Return value of the generic option set interface as the input parameter for enumOptions
 */
const enumOptions = $w.query1.data;
// If optionSetName and key are not passed, the option set list object is returned.
$w.utils.getEnumValue({ enumOptions }); // result: { sex: [{label: 'Female', value: '1'}, {label: 'Male', value: '2'}]}
// If optionSetName is passed and key is not passed, the option set list corresponding to the option identifier is returned.
$w.utils.getEnumValue({ enumOptions, optionSetName: 'sex' }); // result: [{label: 'Female', value: '1'}, {label: 'Male', value: '2'}]
// If optionSetName and key are passed, the value corresponding to the key in the option set list of the corresponding option identifier is returned.
$w.utils.getEnumValue({ enumOptions, optionSetName: 'sex', key: '1' }); // result: 'Female'

$w.utils.getStorage

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

Feature Description

Asynchronously fetches the content of the specified key from the local cache. Returns a Promise object.

Input Parameters

params: IGetStorageOptions

Property	Type	Default Value	Required	Description
key	string		Yes	The specified key in the local cache

Response Parameters

result: IGetStorageRes

Property	Type	Description
data	any	Content corresponding to the key

Example

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

$w.utils.setStorage

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

Feature Description

Stores data in the specified key in the local cache. This overwrites any existing content associated with the key. The data remains available unless actively deleted by the user or cleared by the system due to storage space limitations. A single key supports a maximum data length of 1MB, with a total storage limit of 10MB for all data.

Input Parameters

params: ISetStorageOptions

Property	Type	Default Value	Required	Description
key	string		Yes	The specified key in the local cache
data	any		Yes	The content to be stored. Only supports primitive types, Date, and objects that can be serialized via JSON.stringify.

Example

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

$w.utils.removeStorage

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

Feature Description

Removes the specified key from the local cache. The method to call is removeStorage({ key })

Input Parameters

params: IRemoveStorageOptions

Property	Type	Default Value	Required	Description
key	string		Yes	The specified key in the local cache

Example

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

WEB-Specific Methods

$w.utils.exportData

Feature Description

Export data to a file

Input Parameters

options: object

Property	Type	Default Value	Required	Description
data	Object[]	[]	Yes	The data to be exported, e.g., [{name: 'sam', age: 18}]
fileName	String	'download'	Optional	Export file name
fileType	String	'csv'	Optional	Export file type, supports csv and xlsx
options	Object	{}	Optional	Additional export options

options.options object

Property	Type	Default Value	Required	Description
sheetName	string	undefined	Optional	Specifies the sheet name for the exported data when the file type is xlsx

Example

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

Mini Program Exclusive Method

$w.utils.requestSubscribeMessage

Feature Description

Invokes the client-side mini program's subscription message interface and returns the user's subscription operation result.

Input Parameters

options: object

Property	Type	Default Value	Required	Description
tmplIds	Array		Yes	The collection of message template IDs to be subscribed. A single call can subscribe to up to 3 messages.

Response Parameters

options: object

Property	Type	Description
res	object	Subscription result

Subscription result res: object

Property	Type	Description
[TEMPLATE_ID: string]	String	[TEMPLATE_ID] is a dynamic key representing the template ID. The value can be 'accept', 'reject', 'ban', 'filter', or 'acceptWithAudio'. 'accept' indicates the user agreed to subscribe to the template message corresponding to that ID. 'reject' indicates the user refused to subscribe to the template message corresponding to that ID. 'ban' indicates the template has been banned by the backend. 'acceptWithAudio' indicates the user accepted the subscription message and enabled voice reminders. 'filter' indicates the template was filtered by the backend due to duplicate template titles. For example, { errMsg: 'requestSubscribeMessage:ok', zun-LzcQyW-edafCVvzPkK4de2Rllr1fFpw2A_x0oXE: 'accept'} indicates the user agreed to subscribe to the message with ID zun-LzcQyW-edafCVvzPkK4de2Rllr1fFpw2A_x0oXE.
errMsg	String	When the API call is successful, the value of errMsg is 'requestSubscribeMessage:ok'.

Example

$w.utils.requestSubscribeMessage({
  params: {
    tmplIds: ['zun-LzcQyW-edafCVvzPkK4de2Rllr1fFpw2A_x0oXE']
  }
});
// can only be triggered by the tap event
// Returns after successful execution
// {
//   res: {
//     errMsg: 'requestSubscribeMessage:ok',
//     zun-LzcQyW-edafCVvzPkK4de2Rllr1fFpw2A_x0oXE: 'accept'
//   }
// }

$w.utils.openLocation

Feature Description

Use the WeChat built-in map to view locations

Input Parameters

options: object

Property	Type	Default Value	Required	Description
latitude	number		Required	Latitude, ranging from -90 to 90. Negative values indicate south latitude. Uses the GCJ-02 coordinate system.
longitude	number		Required	Longitude, ranging from -180 to 180. Negative values indicate west longitude. Uses the GCJ-02 coordinate system.
scale	number	18	No	Scale, range 5~18
name	number		No	Location name
address	number		No	Detailed address description

Response Parameters

None

Example

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

$w.utils.reserveChannelsLive

Feature Description

Reserve Channels live

Input Parameters

options: object

Property	Type	Default Value	Required	Description
noticeId	string		Required	Notice id, obtained via the getChannelsLiveNoticeInfo interface

Response Parameters

options: object

Property	Type	Description
state	number	The user's reservation result: state = 1, live in progress, user clicked "Cancel" to decline going to the live stream; state = 2, live in progress, user clicked "Allow" to go to the live stream; state = 3, notice has been canceled; state = 4, live stream has ended; state = 5, user had not reserved before, directly closed the pop-up without reserving; state = 6, user had not reserved before, reserved the live stream in the pop-up; state = 7, user had reserved before, canceled the reservation in the pop-up; state = 8, user had reserved before, directly closed the pop-up; state = 9, user canceled directly before the pop-up was invoked; state = 10, live stream reservation has expired

Example

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

$w.utils.openChannelsUserProfile

Feature Description

Open Channels Profile

Input Parameters

options: object

Property	Type	Default Value	Required	Description
finderUserName	string		Required	Channels id

Response Parameters

None

Example

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

$w.utils.openChannelsLive

Feature Description

Open Channels Live Stream

Input Parameters

options: object

Property	Type	Default Value	Required	Description
finderUserName	string		Required	Channels id
feedId	string		No	Live feedId, obtained via the getChannelsLiveInfo interface
nonceId	string		No	Live nonceId, obtained via the getChannelsLiveInfo interface

Response Parameters

None

Example

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

$w.utils.openChannelsEvent

Feature Description

Open Channels Event Page

Input Parameters

options: object

Property	Type	Default Value	Required	Description
finderUserName	string		Required	Channels id
eventId	string		Required	Event id

Response Parameters

None

Example

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

$w.utils.openChannelsActivity

Feature Description

Open Channels Video

Input Parameters

options: object

Property	Type	Default Value	Required	Description
finderUserName	string		Required	Channels id
feedId	string		Required	video feedId

Response Parameters

None

Example

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

$w.utils.getChannelsLiveNoticeInfo

Feature Description

Get Channels live schedule information

Input Parameters

options: object

Property	Type	Default Value	Required	Description
finderUserName	string		Required	Channels id

Response Parameters

options: object

Property	Type	Description
noticeId	string	Notice id
status	number	Notice status: 0 (Available), 1 (Cancelled), 2 (Used)
startTime	string	Start time
headUrl	string	Live cover
nickname	string	Channels nickname
reservable	boolean	Reservable
otherInfos	Array	List of other notices except the most recent one (Note: a maximum of 15 notices are returned each time in ascending timestamp order; the latest notice is displayed in other API response parameters, while the remaining notices are displayed in this field).

Example

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

$w.utils.getChannelsLiveInfo

Feature Description

Get Channels live information

Input Parameters

options: object

Property	Type	Default Value	Required	Description
finderUserName	string		Required	Channels id
startTime	number		Optional	Start time to filter live streams within a specified time period. If endTime is provided without startTime, startTime defaults to 0.
endTime	number		Optional	End time to filter live streams within a specified time period. If startTime is provided without endTime, endTime defaults to the current time.

Response Parameters

options: object

Property	Type	Description
feedId	string	live feedId
noticeId	string	live id
description	string	Live Stream Topic
status	number	Live status: 2 (Live streaming), 3 (Live ended)
headUrl	string	Channels avatar
nickname	string	Channels nickname
replayStatus	string	Live replay status: 0 (Not generated), 1 (Generated), 3 (Generating), 6 (Expired)
otherInfos	Array	List of other live streams except the most recent one (Note: a maximum of 15 live streams are returned each time in ascending timestamp order; the latest live stream is displayed in other response parameters of the interface, while the remaining live streams are displayed in this field).

Example

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