聊天框-轻蓝
聊天框-轻蓝
  • 使用教程·已迁移

使用教程·已迁移

迁移提示#

本文档不再更新
新文档已迁移至飞书
点我跳转

介绍#

聊天框-轻蓝 是一款COCO编辑器的可见自定义控件，用于创建一个可包含多条消息的聊天框，每条消息包括头像、昵称、消息内容等元素。
您可以轻松的创建、布局一个精美的聊天界面。
可至123云盘下载本控件，或在COCOQ群中获取，
当前最新版为：1.0.0。
如果使用时出现问题，请转至发生错误章节根据引导检查代码。

示例作品#

🤩

聊天框-轻蓝_示例

可进入协作参考学习。

🥰

鸭信

🥳

UUChat

快速入门#

首先，先按你的需要设置好实际宽高，而不是默认的宽高，
QQ截图20230801164922.png
设置好后，我们来写积木：添加一条消息，超级简单！
block (15).png
我们来看看效果：
屏幕截图 2023-08-06 085748.png
现在了解了大概怎么用，就来看看下面的文档探索更多功能吧。

进阶文档#

消息字典#

所有消息的数据都储存在一个列表中，列表的每一项都是一个字典，对应着一条消息，我们称之为消息字典，以下是这个字典可用的参数。
小技巧：
您可以使用快速消息类积木初步了解消息字典，例如：
block (11).png
字典积木也可以实现同样的效果。例如：
block (14).png

💡

messageType（消息类型）

必填
可选：
消息类（气泡框）
text（纯文本）
raw（富文本（可解析HTML））
系统提示类（小白条）
tipsNormal（灰色）
tipsPrimary（蓝色）
tipsSuccess（绿色）
tipsInfo（青色）
tipsWarning（橙色）
tipsDanger（红色）

💡

html（消息内容）

必填
字符串

💡

headIcon（头像链接）

必填
字符串

💡

name（昵称）

必填
字符串

💡

position（消息位置）

必填
可选：
left（左边）
right（右边）

💡

diamond（是否使用方形头像）

默认为false
布尔值（ture 或 false）

💡

htitleType（头衔类型）

可选：
默认为无头衔
admin（蓝色）
owner（金色）

💡

htitle（头衔标题）

字符串

💡

message（备注信息）

不显示，用于存储这条消息的相关信息，如发送人ID、发送时间等。
任意类型，无强制要求。建议为字典类型，读写信息更方便。

💡

colorDown（气泡背景渐变色下端部分）

仅气泡框可用，与"colorUp"和"color"同时使用时才会生效。
字符串(颜色)

💡

colorUp（气泡背景渐变色上端部分）

仅气泡框可用，与"colorDown"和"color"同时使用时才会生效。
字符串(颜色)

💡

color（气泡文本颜色）

仅气泡框可用，与"colorDown"和"colorUp"同时使用时才会生效。
字符串(颜色)

控件属性#

😎

实际宽度

由于默认的宽度属性可能因消息的长度而改变，所以请填写此属性作为控件的固定宽度。

😎

实际高度

与实际宽度一样，此属性作为控件的固定高度。

😎

数据

此属性用于储存消息数据，为字符串形式的列表。
注意：请一定要将该属性的初始值设为：'[]'（字符串类型）！

😎

深色模式

设置控件是否切换为深色模式。

😎

气泡渐变色·下

右边气泡的渐变色从下端开始的部分，
当值为透明颜色时，会使用默认值。
默认值为：rgba(63, 143, 225, .8)

😎

气泡渐变色·上

右边气泡的渐变色上端开始的部分，
当值为透明颜色时，会使用默认值。
默认值为：#44d7c9

😎

自动滚动

设置控件是否自动滚动到底部。

控件积木#

大多积木看字面意思即可理解，不再详细说明，
以下是注意点。

🎨

关于写入类积木中的两种“消息”参数

1.消息列表
传入一个列表，列表的每一项都是一个消息字典，
用于一次传入多个消息字典。
示例：
2.单个消息（也简称为“消息”）
传入单个消息字典。
示例：

🎨

关于

因为属性中的"数据"是字符串类型，所有才有了此积木，返回对象类型的数据。

🎨

关于“快速消息”类积木

根据参数返回一个消息字典，用于快速创建消息字典。

小技巧#

🤯

如何发送图片/视频/音频/超链接等？

将消息类型改为raw(富文本)，在消息内容中对应插入以下文本：
图片：<img src="图片链接">
视频：<video controls style="width:100%" src="视频链接"></video>
音频：<audio controls src="音频链接"></audio>
超链接：<a href="链接">显示文本</a>
原理很简单，这些文本都是HTML元素，在富文本类型中它们会被解析。
还有很多有趣的HTML元素也可以插入在文本中，
如<b>粗体文本、<i>斜体文本、<del>删除线文本等等，
您可在菜鸟教程中学习使用它们。
小技巧：
快速生成HTML元素控件可以快速生成这些元素，
该控件可在点鸭控件商城中下载。
image.png

发生错误#

本控件的数据储存非常严格，
任何一个小错误都可能导致出现问题。
如果控件出现问题，
如：控件加载不出来、消息呈现错位等，
请先检查消息数据是否错误，
（可将数据在控制台中打印，以文本形式展现，更容易发现错误）
如：
字典中缺少参数（详见消息参数章节）
单词写错 / 哪块多了个空格
值数据类型错误，不可直接填入数字、布尔值等
初始数据未设为'[]' 等（详见控件属性"数据"章节）
和别的积木有没有编写错误。
如果确认无误，
可打开F12看控制台报错自行判断，
或反馈给作者。

📌

作者编程猫：https://shequ.codemao.cn/user/6384716
作者QQ：2357942846
也可加入COCOQQ交流群艾特作者：861247613

其他#

本控件主要使用github开源的 LiteWebChat_Frame(轻网页聊天框架) 制作，
在此感谢作者。
可转至github项目页面，探索更多：
https://github.com/MorFansLab/LiteWebChat_Frame
另外，还有作者提供的网页原生示例作品，可以参观：
https://lab.morfans.cn/LiteWebChat_Frame/dist/html/chat_with_inputarea_module_example.html
修改于 2023-10-20 09:33:02
Built with