添加卡片跳转交互

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

跳转方式 1

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

（图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

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

（图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 并列，可配置差异化链接

（图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": "DD1AFB29OWU1N2NhZTkxMmM1ZGQ1MTk0M2M0ZTBmYmM3Y2M3ZWE6a3MzOndvYS1zdGF0aWM="
            }
        },
        {
            "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": "DD1AFB29ODE3MDA5NjYzZjA4OTk5YmI1MjA0YTE5NTQ0ZjgxZjU6a3MzOndvYS1zdGF0aWM="
            }
        },
        {
            "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": "DD1AFB29OTU5NjE4M2I4ODU5ODIzZTRlY2VhM2YwNjYzZDY4Yjg6a3MzOndvYS1zdGF0aWM="
            }
        }
    ]
}

跳转方式 4

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

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

代码示例

{
    "header": {
        "title": {
            "tag": "text",
            "content": {
                "type": "plainText",
                "text": "今日分享"
            }
        }
    },
    "elements": [
        {
            "tag": "picText",
            "text": {
                "type": "plainText",
                "text": "2022 KSO内推活动第一季度名单出炉啦，快来看看吧！"
            },
            "img": {
                "store_key": "DD1AFB29ZDk0MWIyMWE5Mzg2NzgwNmVlY2E5Yjc5ZTg3OWJjNmE6a3MzOndvYS1zdGF0aWM="
            }
        },
        {
            "tag": "hr",
            "style": "solid"
        },
        {
            "tag": "note",
            "elements": [
                {
                    "tag": "img",
                    "content": {
                        "store_key": "DD1AFB29ZDk0MWIyMWE5Mzg2NzgwNmVlY2E5Yjc5ZTg3OWJjNmE6a3MzOndvYS1zdGF0aWM="
                    }
                },
                {
                    "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/"
    }
}