资源工坊

添加卡片跳转交互 ​

  • 开发者可以在文本、按钮中配置跳转链接，或者将组件或整个卡片配置跳转链接，用户点击后跳转到对应链接。
  • 跳转链接支持差异化链接，即三端跳转到不同的地址，跳转优先级为 android_url、ios_url、pc_url > url。
  • 卡片内交互优先级顺序为：交互型组件自身交互（按钮跳转）、非交互型组件内点击交互（@人名片、跳转链接、超链接）> 各个组件的跳转 > 整个卡片的跳转。

跳转方式 1 ​

在单列文本中使用 markdown 类型，并使用超链接语法配置跳转链接，用户点击后跳转到对应链接，支持差异化链接。 WOA20211207-235225.png

（图1：卡片跳转方式1）

代码示例

{
    "header": {
        "title": {
            "tag": "text",
            "content": {
                "type": "plainText",
                "text": "发起申请-林亮的请假申请：带薪年假/福利年假"
            }
        }
    },
    "elements": [
        {
            "tag": "text",
            "content": {
                "type": "markdown",
                "text": "开始时间：2021-11-18 09:00:00  \n 结束时间：2021-11-19 18:00:00  \n请假原因：带薪年假\n\n[查看详情]($url_val)"
            },
            "href": {
                "url_val": {
                    "url": "https://xz.wps.cn/",
                    "android_url": "https://xz.wps.cn/",
                    "ios_url": "https://xz.wps.cn/",
                    "pc_url": "https://xz.wps.cn/"
                }
            }
        },
        {
            "tag": "action",
            "actions": [
                {
                    "tag": "button",
                    "content": {
                        "type": "plainText",
                        "text": "拒绝"
                    },
                    "style": "secondary",
                    "url":"https://xz.wps.cn/"
                },
                {
                    "tag": "button",
                    "content": {
                        "type": "plainText",
                        "text": "同意"
                    },
                    "style": "normal",
                    "url": "https://xz.wps.cn/"
                }
            ]
        }
    ]
}

跳转方式 2 ​

在按钮组件中配置跳转链接，用户点击后跳转到对应链接，支持差异化链接。 WOA20211207-235612.png

（图2：卡片跳转方式2）

代码示例

{
    "tag": "action",
    "actions": [ 
        {
            "tag": "button",
            "content": {
                "type": "plainText",
                "text": "主要按钮",
            },
            "style":"normal", // normal("") 蓝色, secondary（灰色）, warn（红色告警）
            "href": {
                "url_val": {
                    "url": "https://xz.wps.cn/",
                    "android_url": "https://xz.wps.cn/",
                    "ios_url": "https://xz.wps.cn/",
                    "pc_url": "https://xz.wps.cn/"
                    }
             }
        }
    ]
}

跳转方式 3 ​

设置组件的跳转链接，点击组件时跳转链接，目前支持跳转的组件如下表所示：

模块分类组件说明
文本模块单列文本(tag=text)、双列文本(tag=div)与 tag 并列，可配置差异化链接
图文模块图片(tag=img)、文本+中图(tag=picText)、文本+小图(tag=note)与 tag 并列，可配置差异化链接

card-link-action3.png

（图3：卡片跳转方式3）

代码示例

{
    "elements": [
        {
            "tag": "img",
            "link": {
                "url": "https://xz.wps.cn/",
                "android_url": "https://xz.wps.cn/",
                "ios_url": "https://xz.wps.cn/",
                "pc_url": "https://xz.wps.cn/"
            },
            "content": {
                 "store_key": "FC5E038DMzQ1NjM0NzgLTAwMDAucG5nQGJhc2VAdG..."
            }
        },
        {
            "tag": "hr",
            "style": "dashed"
        },
        {
            "tag": "picText",
            "link": {
                "url": "https://xz.wps.cn/",
                "android_url": "https://xz.wps.cn/",
                "ios_url": "https://xz.wps.cn/",
                "pc_url": "https://xz.wps.cn/"
            },
            "text": {
                "type": "plainText",
                "text": "2022 KSO内推活动第一季度获奖名单出炉啦，快来看看吧"
            },
            "img": {
                 "store_key": "FC5E038DMzQ1NjM0NzgLTAwMDAucG5nQGJhc2VAdG..."
            }
        },
        {
            "tag": "hr",
            "style": "dashed"
        },
        {
            "tag": "picText",
            "link": {
                "url": "https://xz.wps.cn/",
                "android_url": "https://xz.wps.cn/",
                "ios_url": "https://xz.wps.cn/",
                "pc_url": "https://xz.wps.cn/"
            },
            "text": {
                "type": "plainText",
                "text": "价值观夸夸卡系列视频第二期来啦！超值内容，路过不要错过！"
            },
            "img": {
                 "store_key": "FC5E038DMzQ1NjM0NzgLTAwMDAucG5nQGJhc2VAdG..."
            }
        }
    ]
}

跳转方式 4 ​

与 elements 平级增加 link 字段，即可实现点击整个卡片时跳转链接，支持差异化链接。

card-link-action4.png

（图4：卡片跳转交互4）

代码示例

{
    "header": {
        "title": {
            "tag": "text",
            "content": {
                "type": "plainText",
                "text": "今日分享"
            }
        }
    },
    "elements": [
        {
            "tag": "picText",
            "text": {
                "type": "plainText",
                "text": "2022 KSO内推活动第一季度名单出炉啦，快来看看吧！"
            },
            "img": {
                 "store_key": "FC5E038DMzQ1NjM0NzgLTAwMDAucG5nQGJhc2VAdG..."
            }
        },
        {
            "tag": "hr",
            "style": "solid"
        },
        {
            "tag": "note",
            "elements": [
                {
                    "tag": "img",
                    "content": {
                         "store_key": "FC5E038DMzQ1NjM0NzgLTAwMDAucG5nQGJhc2VAdG..."
                    }
                },
                {
                    "tag": "text",
                    "content": {
                        "type": "plainText",
                        "text": "同事圈"
                    }
                }
            ]
        }
    ],
    "link": {
        "url": "https://xz.wps.cn/",
        "android_url": "https://xz.wps.cn/",
        "ios_url": "https://xz.wps.cn/",
        "pc_url": "https://xz.wps.cn/"
    }
}