Skip to main content

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​

组件接收的外部传入的属性

属性名
属性标识
类型
说明
链接地址urlstring

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

扩展参数optionsobject

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

Events​

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
点击链接tap兼容三端

-

Property API​

通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考 属性 API

只读属性名
属性标识
类型
说明
链接地址urlstring

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

扩展参数optionsobject

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

Method API​

无

Style API​

通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

名称
类名
说明和示例
根元素.wd-link链接组件根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-link {
  /* 在这里编写CSS 样式 */
}
PC 端链接根元素.wd-pc-link可以为 PC 端的链接编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-pc-link {
  /* 在这里编写CSS 样式 */
}
H5 端链接根元素.wd-h5-link可以为 H5 端的链接编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-h5-link {
  /* 在这里编写CSS 样式 */
}

了解样式 API