更好的 微信聊天框 组件

注意


此页为于 SCP 维基内部使用的“组件”页。用于在其他页面中引用。

未经组件作者或工作人员允许，请勿修改此页的内容。

评分: +66+–x

这是什么？

该组件是基于hoah2333hoah2333 的 微信聊天框组件的升级（？）版本。

在使用逻辑上没有大的变动，依然是需要一大堆include。虽然麻烦但不会与各大版式产生冲突，毕竟确实有很多版式对blockquote之类元素有自己的定义。

修改内容包括：

  1. 现在整个微信聊天框和所有元素都是圆角的了。
  2. 更改了暗色模式的开启方式，详见下文。
  3. 更改了发送图片的显示大小，现在它会显示较大的图片了。
  4. 更换了底栏中的“语音”、“表情”和“更多”三个emoji，并修正了它们在不同版式下会错位的bug。
  5. 更换了消息被列入黑名单时的红色叹号警告符，并修正了它在不同版式下会错位的bug。
  6. 修正了底栏文字在超出一行后会被整体压缩的bug。
  7. 修正了消息在黑标版式下会随机崩溃的bug。
  8. 可能还有一些我想不起来的。

新增内容包括：

  1. 添加了群聊模式。开启该模式后，所有人的名字都会显示在头像上方。
  2. 添加了透明度更改通道。修改这一参数可以让整个聊天框的背景变得透明，对消息框则不起效果。
  3. 添加了无头像模式。开启该模式后，消息不会显示对应头像。适合同一人持续说话时使用。详见下文。
  4. 添加了多种默认配色。原本的暗色模式被作为其中一种配色整合在其中。

使用方法：

可在任意页面中使用本组件。本组件的使用方法与原版微信聊天框略有不同，请仔细阅读以下使用说明。
你需要填入所有未标记为“（可选）”的参数。缺少参数将会导致组件无法正常运作。

首先插入组件头。组件头包含了整个组件的样式部分以及顶部的标题栏。

[[include :scp-wiki-cn:component:wxchat-backend inc-top=--]
|title=相亲相爱一家人
 |opacity=1
 |groupmode=true
 |theme=dark
 ]]

inc-top 辨识符。
使页面读取组件的标题栏部分。仅可且必须填入 --]。
title 标题。
此即显示在最顶部的“好友昵称”或“群聊名称”。
opacity 透明度更改。
填入0到1之间的数字，1为完全不透明。
这一参数仅会影响整体的背景，在你想要将纯粹的无背景聊天记录放进各种版式的花式div块中时或许有用。
groupmode
（可选）		 群聊模式。
填入 true 时将开启群聊模式。
在这一模式下，所有人的名字都会显示在消息上方。
theme
（可选）		 配色方案。
可填入 dark、ios、discord、instagram和scp。
留空的话就是普通的白色微信配色方案。
具体配色方案见下文。
hide
（可选）		 隐藏顶部标题栏。
填入 hide=hide 时将隐藏顶部的标题栏。

然后是聊天部分。以下为左对话框的全部参数说明。

[[include :scp-wiki-cn:component:wxchat-backend inc-left=--]
|name=username1
|pure-message=true
|icon=http://urlhere.com
|color=white
|content=content1
|image=true
|image-url=http://urlhere.com
|reply=true
|reply-name=username2
|reply-content=content2
|blacklist=true
]]

inc-left 辨识符。
使页面读取组件的左对话框部分。仅可且必须填入 --]。
name 说话人唯一标识符。
在所有的对话框下填入同样的 name 以将该说话人标记为同一人，以保持头像的一致。
在群聊模式下，这一参数会显示在所有人的头像上
请尽量不要带空格和点号（.），否则有可能出现问题。
pure-message
（可选）		 无头像模式。
填入 true 以关闭头像显示。
在群聊模式下，开启这一模式会同时隐藏该条信息的name参数。
开启这一模式的话，下方的icon和color都可以不写，但name还是要写，不然会爆参数。
icon
（可选）		 说话人头像。
该参数仅在 name 相同的所有对话框的最后一个中填入才可生效。
你可以在每一个对话框中都加入此参数，不容易遗漏且不影响组件运作。
color
（可选）		 说话人头像背景色。
支持所有颜色代码，比如 #FFFFFF、rgb(0, 0, 0), hsl(0, 0, 0)。默认为白色。
该参数仅在 name 相同的所有对话框的最后一个中填入才可生效。
你可以在每一个对话框中都加入此参数，不容易遗漏且不影响组件运作。
content
（可选）		 聊天框内容。
image
（可选）		 图片模式。
填入 true 以开启图片模式。开启后在 image-url 处填入图片链接即可发送图片。
注意：开启后将隐藏 content 中所填写的内容。
image-url
（可选）		 图片链接。
需先设置 image=true。
reply
（可选）		 回复模式。
填入 true 以开启回复模式。
reply-name
（可选）		 回复对象名称。
回复对象的名字，显示在回复框的冒号前面。该名称不需要与 name 相同。
需先设置 reply=true。
reply-content
（可选）		 被回复内容。
被回复的内容，显示在回复框的冒号后面。
需先设置 reply=true。
blacklist
（可选）		 黑名单模式。
填入 true 以开启黑名单模式。
开启后对话框的左侧将出现一个红色叹号。用于模拟被拉入黑名单或图片发送失败的情形。

以下为右对话框的全部参数说明。右对话框的大部分参数均与左对话框相同，仅辨识符有区别。

[[include :scp-wiki-cn:component:wxchat-backend inc-right=--]
|name=username1
|pure-message=true
|icon=http://urlhere.com
|color=white
|content=content1
|image=true
|image-url=http://urlhere.com
|reply=true
|reply-name=username2
|reply-content=content2
|blacklist=true
]]

inc-right 辨识符。
使页面读取组件的右对话框部分。仅可且必须填入 --]。

在对话的中间可以插入时间或拍一拍之类的提示语。以下为提示语的参数说明。

[[include :scp-wiki-cn:component:wxchat-backend inc-tip=--]
|content=消息已发出，但被对方拒收了。
]]

inc-tip 辨识符。
使页面读取组件的提示语部分。仅可且必须填入 --]。
content 提示文本。

最后插入组件尾。组件尾包含了聊天时的文本框。

[[include :scp-wiki-cn:component:wxchat-backend inc-end=--]
|content=none
]]

inc-end 辨识符。
使页面读取组件的结尾部分。仅可且必须填入 --]。
content 文本框内容。
填入任意字符会使右边出现发送按钮，填入 none 以使其还原为“更多功能”按钮。
hide
（可选）		 隐藏底部文本框。
填入 hide=hide 时将隐藏底部的文本框。

示例 & 配色方案：

多点关心多点爱

20:31

这是一个示例

这是另一个示例

😮

👍

这个组件好玩吧？

嘿你别说，还真不错

Kcorena：这个组件好玩吧？

我拍了拍“H-Storm Z”
“H-Storm Z”拍了拍我
%E7%A1%AB%E9%85%B8%E9%93%9C%E6%9C%8B%E5%8F%8B
20:47

看我画的像素画

我拍了拍“H-Storm Z”
21:30

爬

啥？

消息已发出，但被对方拒收了。

？？？

消息已发出，但被对方拒收了。
none

示例代码：

+ 展开代码

组件样式代码

+ 展开代码
原创组件
页面版本: 29, 最后编辑于: 05 Apr 2026 09:14
编辑 评分 (+66) 标签 讨论 (11) 历史记录 附件 打印 网站工具 + 选项
除非特别注明，本页内容采用以下授权方式： Creative Commons Attribution-ShareAlike 3.0 License