Supported Regions:上海

Advanced Link

WdUnifiedLink

Applicable Scenarios

Supports navigating via hyperlinks on the web side. Supports navigating to Mini Program pages on the Mini Program side.

Basic Capabilities Description

The basic properties of the link support configuring the opening mode, 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 the options extension parameters to open new windows on the web side or set environment parameters on the mini-program side.
As a container, the link component can host any other components such as text components to meet scenario requirements.

Extended Scenarios Description

Configuration Examples for Link Redirection in Different Scenarios

Open internal page

Open external pages. Redirecting to external links is only supported on the web side.

Open other Mini Program pages. Only supported on mobile for opening Mini Program pages.

Extended parameters can be passed via options. For supported parameters, please refer to the parameter description.

Static Website H5 Jump to Mini Program Notes: It is possible to redirect to WeChat Mini Program from H5 within the WeChat built-in browser, or from external browsers or other apps such as WeCom and QQ. The underlying implementation uses the plaintext scheme provided by WeChat to launch the mini program. It must be declared in the MP platform -> Settings -> Privacy and Security -> Plaintext Scheme to Launch This Mini Program.

Fill in the Mini Program path, format reference: pages/pageId/index; use ";" as separator for batch addition.

pages/+pageId+/index is the Mini Program page path, such as pages/index/index, pages/logs/index

Open Mini Program plugin pages. This is only supported in the Mini Program environment for opening plugin pages.

Mini Program plugin Usage Guide

Extended parameters can be passed via options. For supported parameters, please refer to the parameter description.

Link redirection can be achieved by dynamically configuring URLs, supporting the following protocols

Example

// When you need to jump to an internal page, use the weda-page:// prefix for the url, such as weda-page://PACKAGE_NAME/PAGE_PATH. When the subpackage feature is not enabled, packagename is main; after enabling, it is the subpackage name, for example:
url: 'weda-page://main/index?tt=2323';

The underlying implementation uses the [plaintext scheme](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html) provided by WeChat to launch the mini program. It must be declared in the [MP platform -> Settings -> Privacy and Security -> Plaintext Scheme to Launch This Mini Program](https://mp.weixin.qq.com/wxamp/basicprofile/index?token=2058489984&lang=zh_CN).
url: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/WdLink';

// To jump to another Mini Program page, use the miniprogram:// prefix for the url, such as miniprogram://appId/PAGE_PATH
url: 'miniprogram://wx1574617e567497e1/pages/register_start/index?foo=bar';

// When you need to jump to a Mini Program plugin page, use the plugin:// prefix for the url, such as plugin://PLUGIN_NAME/PLUGIN_PAGE
url: 'plugin://myPlugin/index';

Example

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

Configuration Method

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

Limits Description

Since mini-programs only support jumping to external links via the webview component, the link component does not support jumping to external links in mini-programs.
Opening Mini Program plugin pages is only supported in the Mini Program scenario.
In the web scenario, opening other Mini Programs is only supported on mobile.
Opening other Mini Programs via the advanced link component in webview is not supported. Please refer to the web-view documentation and use the jssdk to implement it yourself.

Properties

External properties received by the component

URL

url

string

Click fx on the right, write support for dynamic URL address

Extension parameter.

options

object

additional parameters, such as the target property for web and the env_version property for mini program

Events

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

click the link

tap

Compatible with all platforms

Properties 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

URL	`url`	`string`	Click fx on the right, write support for dynamic URL address
Extension parameter.	`options`	`object`	additional parameters, such as the target property for web and the env_version property for mini program

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

root element

.wd-link

link component root element

/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-link {
  /* Write CSS styles here */
}

PC-side root element link

.wd-pc-link

Write styles for PC URLs

/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-pc-link {
  /* Write CSS styles here */
}

H5 root element link

.wd-h5-link

Write style for H5 URLs

/* :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

Advanced Link

Applicable Scenarios​

Basic Capabilities Description​

Extended Scenarios Description​

Configuration Examples for Link Redirection in Different Scenarios​

Link redirection can be achieved by dynamically configuring URLs, supporting the following protocols​

How to pass parameters via variable binding during page navigation​

Limits Description​

Properties​

Events​

Properties API​

Method API​

Style API​