Skip to main content
Supported Regions:上海

Advanced Link

WdUnifiedLink

Applicable Scenarios​

Supports clicking hyperlinks for redirection on the web end. Supports navigating to Mini Program pages on the Mini Program end.

Basic Capabilities Description​

  1. Basic properties of links support configuring the opening modes, including four scenarios: opening internal application pages, opening external links, opening pages of other mini-programs, and opening pages of plugin mini-programs. Support configuring options extension parameters to open new windows on the web end or set environment parameters on the mini-program end.
  2. The link component serves as a container that can hold text components and any other components to meet scenario requirements.

Extended Scenarios Description​

  1. Open internal page

  1. Open external page

  1. Open other mini-program pages

Extension parameters can be passed via options. For the parameters that can be passed, please refer to Parameter specifications.

Static Website H5 Jump to Mini Program Notes: H5 pages can redirect to WeChat Mini Programs within the WeChat built-in browser, as well as in external browsers or other apps (such as WeCom, QQ, etc.). The underlying implementation uses the plaintext scheme provided by WeChat to launch the mini-program. This needs to be declared at MP Platform -> Settings -> Privacy & Security -> Plaintext Scheme to Launch This Mini-Program.

Fill in the mini-program path, with the format reference as pages/pageId/index; use ";" to separate multiple entries.

pages/+pageId+/index is the mini-program page path, such as pages/index/index, pages/logs/index
  1. Open the mini-program plugin page

Mini Program plugin Usage Guide

Extension parameters can be passed via options. For the parameters that can be passed, please refer to Parameter specifications.

Example

// 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:
url: 'weda-page://main/index?tt=2323';

// When redirecting to external pages, the url supports http/https protocols.
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
url: 'miniprogram://wx1574617e567497e1/pages/register_start/index?foo=bar';

// When redirecting to a Mini Program plugin page, use the plugin:// prefix in the url, e.g., plugin://PLUGIN_NAME/PLUGIN_PAGE
url: 'plugin://myPlugin/index';

How to pass parameters via variable binding during page redirection​

Example

When navigating to the target page via the link component, pass [Hello] to the target page for display.

Configuration Method

Add an advanced link component, and click the fx button to configure the dynamic link address.

Limitation Description​

  • Since Mini Programs only support redirecting to external links through the webview component, the link component does not support redirecting to external links in Mini Programs.
  • Opening Mini Program plugin pages is only supported in Mini Program scenarios.
  • In web scenarios, opening other Mini Programs is only supported on mobile devices.
  • Opening other Mini Programs via the advanced link component in webview is not supported. Refer to the web-view documentation to implement it yourself using jssdk.

Properties​

External properties received by the component

Property Name
Property Identifier
Type
Description
链接地址urlstring

点击右侧fx，支持写入动态URL地址

扩展参数optionsobject

扩展参数，例如web端target属性,小程序端env_version属性

Events​

Events exposed by the component. You can listen to component events to trigger external actions

Event Name
Event Code
Event Output Parameters event.detail
Applicable Scenarios
Description
点击链接tapCompatible with all platforms

-

Property API​

Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

Read-only Property Name
Property Identifier
Type
Description
链接地址urlstring

点击右侧fx，支持写入动态URL地址

扩展参数optionsobject

扩展参数，例如web端target属性,小程序端env_version属性

Method API​

None

Style API​

Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

Name
Class Name
Description and Examples
根元素.wd-link链接组件根元素
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-link {
  /* Write CSS styles here */
}
PC 端链接根元素.wd-pc-link可以为 PC 端的链接编写样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-pc-link {
  /* Write CSS styles here */
}
H5 端链接根元素.wd-h5-link可以为 H5 端的链接编写样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-h5-link {
  /* Write CSS styles here */
}

Learn about Style API