组件复写 | 微信开放文档

# 组件复写

# 消息组件重写(自定义插件内容的样式)

从版本 1.0.7 开始支持对小程序内置插件的替换，包括文本消息，天气消息，图片消息，音乐消息，新闻消息和引导消息从版本 1.1.0 开始支持generic:operateCard 参数，底部文字和语音输入增加 customoperateCard 自定义复写的功能从版本 1.1.10 开始支持 feedsCard 短视频消息类组件

<view style="height: 100vh">
    <chat
        bind:queryCallback="getQueryCallback"
        generic:queryMessage="queryMessage"
        generic:textMessage="customTextMessage"
        generic:weatherMessage="customWeatherMessage"
        generic:imageMessage="customImageMessage"
        generic:musicMessage="customMusicMessage"
        generic:newsMessage="customNewsMessage"
        generic:unsupportedMessage="customUnsupportedMessage"
        generic:guideCard="customGuideCard"
        generic:operateCard="customoperateCard"
        generic:miniprogramMessage="customMiniprogramMessage"
        generic:h5Message="customh5Message"
        generic:welcomeCard="customWelcomeCard"
        generic:feedsCard="customFeedsCard"
    >
    </chat>
</view>

{
    "usingComponents": {
        "chat": "plugin://myPlugin/chat",
        "customQueryMessage": "../customQueryMessage/customQueryMessage",
        "customTextMessage": "../customTextMessage/customTextMessage",
        "customWeatherMessage": "../customWeatherMessage/customWeatherMessage",
        "customImageMessage": "../customImageMessage/customImageMessage",
        "customMusicMessage": "../customMusicMessage/customMusicMessage",
        "customNewsMessage": "../customNewsMessage/customNewsMessage",
        "customUnsupportedMessage": "../customUnsupportedMessage/customUnsupportedMessage",
        "customGuideCard": "../customGuideCard/customGuideCard",
        "customOperateCard": "../customOperateCard/customOperateCard",
        "customMiniprogramMessage": "../customMiniprogramMessage/customMiniprogramMessage",
        "customh5Message": "../customh5Message/customh5Message",
        "customWelcomeCard": "../customWelcomeCard/customWelcomeCard",
        "customFeedsCard": "../customFeedsCard/customFeedsCard"
    }
}

# 支持覆盖的组件类别：

queryMessage: 用户发出的消息
textMessage: 文本类消息
weatherMessage: 天气类消息
imageMessage: 图片类消息
musicMessage: 音乐类消息
newsMessage: 新闻类消息
unsupportedMessage: 暂未支持类消息
guideCard: 引导消息
operateCard: 底部操作区域(从版本 1.1.0 开始支持)
miniprogramMessage: 小程序类消息
h5Message： h5 类消息
welcomeCard: 欢迎语
feedsCard: 短视频类消息

注释：插件中不支持唤起小程序与 webview, 代码参考https://github.com/WeChatAI/openai-plugin-overwrite

在平台中配置自定义小程序, 需复写 miniprogramMessage 组件唤起其他小程序
在平台配置自定义 h5, 需复写 h5Message 组件
在文本类消息中插入超链接, 需复写textMessage组件实现超链接跳转

以上七种消息中，组件 1-7 会在组件上收到一个 properties 参数 msg

<queryMessage msg="{{item}}" recording="{{recording}}" userHeader="{{userHeader}}" ></queryMessage>
<textMessage msg="{{item}}" robotHeader="{{robotHeader}}"></textMessage>
<weatherMessage msg="{{item}}" robotHeader="{{robotHeader}}"></weatherMessage>
<newsMessage   msg="{{item}}" robotHeader="{{robotHeader}}"></newsMessage>
<musicMessage  msg="{{item}}" robotHeader="{{robotHeader}}"></musicMessage>
<imageMessage  msg="{{item}}" robotHeader="{{robotHeader}}"></imageMessage>
<unsupportedMessage msg="{{item}}" robotHeader="{{robotHeader}}"></unsupportedMessage>
<miniprogramMessage  msg="{{item}}" robotHeader="{{robotHeader}}"></miniprogramMessage>
<h5Message msg="{{item}}" robotHeader="{{robotHeader}}"></h5Message>
<welcomeCard msg="{{welcome}}" userName="{{userName}}" robotHeader="{{robotHeader}}"></welcomeCard>
<guideCard guideList="{{guideList}}" controlSwiper="{{controlSwiper}}" bind:chooseGuide="choosePageGuide"> </guideCard>
<operateCard bind:bindInput="bindInutvalue" bind:inputVoiceStart="inputVoiceStart" bind:inputVoiceEnd="inputVoiceEnd" bind:back="backHome" focus="{{focus}}"></operateCard>
<feedsCard msg="{{item}}" robotHeader="{{robotHeader}}"></feedsCard>

# queryMessage 的 properties 参数 msg 的数据结构：

{
    content: "用户输入的对话内容",
};

properties 说明:

properties: {
    msg: Object,
    recording: Boolean
}

字段	类型	描述
msg	Object
recording	Boolean	用户按住语音按钮，开始输入时为 true，松开时结束语音输入时为 false

# `textMessage` 的 properties 参数 msg 的数据结构：

{
    msg_type: "text",
    content: "机器人对话结果",
    res: res //NLU结果
};

# `weatherMessage` 的 properties 参数 msg 的数据结构：

{
    cardType: "weather",
    answer: "机器人对话结果",
    docs: Array, //天气结果
    res: res //NLU结果
};

# `newsMessage` 的 properties 参数 msg 的数据结构：

{
    cardType: "news",
    answer: "机器人对话结果",
    docs: Array, //新闻结果
    res: res //NLU结果
};

# `musicMessage` 的 properties 参数 msg 的数据结构：

{
    cardType: "voice",
    answer: "",
    docs: Array, //音乐结果
};

# `imageMessage` 的 properties 参数 msg 的数据结构：

{
    cardType: "image",
    data: Object,
    res: res //NLU结果
};

# `unsupportedMessage` 的 properties 参数 msg 的数据结构：

{
    cardType: "unsupported",
    data: Object,//自定义的JSON结构
    res: res //NLU结果
};

# `miniprogramMessage` 的 properties 参数 msg 的数据结构：

{
    cardType: "miniprogrampage",
    data: Object,
    res: res //NLU结果
};

# `h5Message` 的 properties 参数

{
    "cardType": "h5",
    "docs": Array,
    "res": res //NLU结果
}

# `guideCard` 的 properties 参数

<guideCard
    guideList="{{guideList}}"
    controlSwiper="{{controlSwiper}}"
></guideCard>

properties 说明:

字段	类型	描述
guideList	Array	[ "北京天气怎么样", "上海今天有雨吗", "中午吃啥呢", "你知道如何排解压力吗", "法国国土面积是多少", "世界最高峰" ]
controlSwiper	Boolean	用来通知用户引导模块是否应当响应用户点击事件，防止误触发生
bind:chooseGuide	Event	当用户点击菜单内选项时，通知机器人用户点击的菜单内容

如果响应用户点击事件

this.triggerEvent("chooseGuide", "用户点击了菜单的什么内容");

# `operateCard` 的 properties 参数

<operateCard
    bind:bindInput="bindInutvalue"
    bind:inputVoiceStart="inputVoiceStart"
    bind:inputVoiceEnd="inputVoiceEnd"
    bind:sendMedia="sendMedia"
    focus="{{focus}}"
></operateCard>

properties 说明:

字段	类型	描述
bind:bindInput	Event	用户需要发送消息时需要触发的事件
bind:inputVoiceStart	Event	用户需要开始语音输入的时候需要触发的事件
bind:inputVoiceEnd	Event	用户需要结束语音输入的时候需要触发的事件
bind:sendMedia	Event	用户需要发送图片、视频消息时需要触发的事件
focus	Boolean	输入框是否获得焦点

响应用发送消息事件

this.triggerEvent("bindInput", "用户要发送的消息");

响应用发送图片、视频消息事件

this.triggerEvent("sendMedia", "用户要发送的本地临时文件");

用户按住某一个按钮，需要触发开始录音的事件

this.triggerEvent("inputVoiceStart");

用户送开某一个按钮，需要触发结束录音的事件

this.triggerEvent("inputVoiceEnd");

发送消息、开启录音、结束录音、也可以通过 plugin.getChatComponent() 方法获取到 UI 后，通过组件方法来实现（图片、视频调用频次 60次/小时）

const chat = plugin.getChatComponent();

//用户需要开始语音输入的时候需要触发的事件
chat.inputVoiceStart();

//用户需要结束语音输入的时候需要触发的事件
chat.inputVoiceEnd();

//用户需要发送消息时需要触发的事件
chat.send("你好！");

//用户需要发送图片、视频消息时需要触发的事件
chat.sendMedia(res.tempFiles[0]);

获取Emoji列表数据及Emoji解析

var plugin = requirePlugin("chatbot");

//拉取Emoji列表数据
const EmojiAry = plugin.api.getEmojiPanel();

//解析单个选中Emoji (参数index: 选中EmojiAry.index)
const Emoji = plugin.api.decodeEmoji(index);

# `welcomeCard` 的 properties 参数

{
    "content": string / Array
}

# `feedsCard` 的 properties 中的 item 参数

1.1.10 版本开始支持，当机器人回答中包含列表遍历并且遍历内容为<a href="{跳转链接}" img="{图片地址}">{视频标题}</a>时，可在小程序插件中触发短视频类消息组件

{
    "cardType": "feedsCard",
    "data": Array,
    "res": res, //NLU结果
    "query": String
}

# 组件复写

# 消息组件重写(自定义插件内容的样式)

# 支持覆盖的组件类别：

# queryMessage 的 properties 参数 msg 的数据结构：

# textMessage 的 properties 参数 msg 的数据结构：

# weatherMessage 的 properties 参数 msg 的数据结构：

# newsMessage 的 properties 参数 msg 的数据结构：

# musicMessage 的 properties 参数 msg 的数据结构：

# imageMessage 的 properties 参数 msg 的数据结构：

# unsupportedMessage 的 properties 参数 msg 的数据结构：

# miniprogramMessage 的 properties 参数 msg 的数据结构：

# h5Message 的 properties 参数

# guideCard 的 properties 参数

# operateCard 的 properties 参数

# welcomeCard 的 properties 参数

# feedsCard 的 properties 中的 item 参数

# `textMessage` 的 properties 参数 msg 的数据结构：

# `weatherMessage` 的 properties 参数 msg 的数据结构：

# `newsMessage` 的 properties 参数 msg 的数据结构：

# `musicMessage` 的 properties 参数 msg 的数据结构：

# `imageMessage` 的 properties 参数 msg 的数据结构：

# `unsupportedMessage` 的 properties 参数 msg 的数据结构：

# `miniprogramMessage` 的 properties 参数 msg 的数据结构：

# `h5Message` 的 properties 参数

# `guideCard` 的 properties 参数

# `operateCard` 的 properties 参数

# `welcomeCard` 的 properties 参数

# `feedsCard` 的 properties 中的 item 参数