跳到主要内容

高级链接

WdUnifiedLink

适用场景

支持 web 端点击超链接跳转。支持小程序端跳转小程序页面。

基础能力说明

  1. 链接的基础属性支持配置链接的打开模式,包括 4 个场景:打开应用内部页面,打开外部链接,打开其他小程序页面,打开插件小程序页面。支持配置 options 扩展参数,用于实现 web 端打开新窗口,或小程序端的环境参数。
  2. 链接组件作为一个容器,可以承载文本组件等其他任意组件,来配合场景所需。

扩展场景说明

不同场景下链接跳转配置示例

  1. 打开内部页面

  1. 打开外部页面

  1. 打开其他小程序页面

扩展参数可通过 options 传递,支持传递的参数可参考参数说明

静态网站 H5 跳小程序注意事项: 可以在微信内部浏览器的 H5 跳转小程序,也可以在微信外部浏览器或其他部分 App (如企业微信、QQ 等)跳转微信小程序。 底层实现是通过微信提供的明文 scheme方式唤起,需在MP 平台->设置->隐私与安全->明文 Scheme 拉起此小程序声明

  1. 打开小程序插件页面

小程序插件使用指引

通过动态配置 url,可实现链接跳转,支持以下协议

示例

// 需要跳转到内部页面时,url 使用 weda-page:// 前缀,形如 weda-page://PACKAGE_NAME/PAGE_PATH,未开启分包功能时,packagename为main,开启后为子包名称 如:
url: 'weda-page://main/index?tt=2323';

// 需要跳转到外部页面时,url 支持http/https协议
url: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/WdLink';

// 需要跳转到其他小程序页面时,url 使用miniprogram:// 前缀,形如 miniprogram://appId/PAGE_PATH
url: 'miniprogram://wx1574617e567497e1/pages/register_start/index??foo=bar';

// 需要跳转到小程序插件页面时,url 使用plugin:// 前缀,形如 plugin://PLUGIN_NAME/PLUGIN_PAGE
url: 'plugin://myPlugin/index';

如何实现页面跳转时通过变量绑定传递参数

示例

通过链接组件跳转到目标页面时,传递【你好】给目标页面做展示

配置方法

添加一个高级链接组件,点击 fx 配置动态链接地址:

限制说明

  • 由于小程序仅支持通过 webview 组件的方式进行外部链接的跳转,因此链接组件不支持在小程序中跳转外部链接。
  • 仅支持在小程序场景下,打开小程序插件页面
  • web 场景,仅支持在移动端打开其他小程序

属性

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

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

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

扩展参数optionsobject

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

事件

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

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

-

属性 API

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

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

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

扩展参数optionsobject

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

方法 API

样式 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