按钮

按钮在 tag=action 元素下，分为跳转型按钮和回传型按钮两种。

跳转型按钮

跳转型按钮，点击跳转到配置的链接，支持配置多端差异化链接。

字段定义

字段	是否必填	类型	说明
tag	是	string	tag=button
content	是	object	内容
∟ type	是	string	文本类型 plainText
∟ text	是	string	文本内容
style	是	string	样式
href	否	object	该字段用于实现差异化链接

图片示例

（图1：跳转型按钮）

代码示例

{
    "elements": [
        {
            "tag": "action",
            "actions": [
                {
                    "tag": "button",
                    "content": {
                        "type": "plainText",
                        "text": "查看详情"
                    },
                    "style": "secondary",// normal(主要按钮) , secondary（辅助按钮）, warn（警示按钮），disable(禁用按钮)
                    "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/"
                        }
                    }
                }
            ]
        }
    ]
}

回传型按钮

回传型按钮，用于回传用户操作产生的数据，key 字段作为标识，用于回调时使第三方确认是哪个 action 事件。

下面给出双 action 按钮的代码示例。其中，modal 组件为按钮弹框，目前仅作用于回传型按钮中。配置后点击按钮会弹出弹窗，用户填写内容后，服务端会将用户填写的内容回传给第三方。

字段定义

字段	是否必填	类型	说明
tag	是	string	tag=button
content	是	object	内容
∟ type	是	string	文本类型 plainText
∟ text	是	string	文本内容
style	是	string	样式
key	否(回传必须)	object	用于回传标识，会将该字段值回传
modal	否	object	弹框，仅用于 button 组件

图片示例

（图2：回传型按钮）

（图3：弹框）

代码示例

{
    "tag": "action",
    "actions":[
        {
            "tag": "button",
            "key": "key1",  // 标识，作用：回调时使第三方确认是哪个action事件
            "modal": {   // 弹框
                "tag": "modal",
                "header": "拒绝理由",
                "body": [
                    {
                        "tag": "textarea",
                        "size": 50, // 内容大小
                        "name": "input",  //  弹框交互标识 例如name="test"，那么回传的时候，服务端就将这个数据放入http.body里面传过去，例如输入框填入1111，那么回传为{"test":"1111"}
                        "placeholder": "请填写内容"  // 输入提示文案
                    }
                ]
            },
            "content": {
                "type": "plainText",
                "text": "拒绝"
            },
            "style": "secondary"
        },
        {
            "tag": "button",
            "content": {
                "type": "plainText",
                "text": "同意"
            },
            "style": "normal",
            "key": "key2"
        }
    ]
}

回传示例

用户点击交互组件时触发回调，会将组件携带 key 和其余信息回传。在此例中，用户点击同意/拒绝按钮时，服务端会将对应的按钮 key 数据取出拼接数据，作为请求 body 传输。以下分别为用户点击同意、拒绝时回传请求 body 数据举例：

{
    "company_id":"11111",            // 企业id
    "app_ctx_id":"11111",        // 消息上下文id
    "content":{                          // 回传具体内容
        "action":"key2",                 // 同意
    },
    "company_uid":"11111"      // 操作用户id
}
{
    "company_id":"11111",            // 企业id
    "app_ctx_id":"11111",        // 消息上下文id
    "content":{                          // 回传具体内容
        "action":"key1",                 // 拒绝
        "input":"输入框内容"               // 当有弹框组件时，会以tag=modal中name值作为字段名
    },
    "company_uid":"11111"      // 操作用户id
}