使用教程·已迁移
迁移提示
本文档不再更新
新文档已迁移至飞书
点我跳转
介绍
聊天框-轻蓝 是一款COCO编辑器的可见自定义控件，用于创建一个可包含多条消息的聊天框，每条消息包括头像、昵称、消息内容等元素。
您可以轻松的创建、布局一个精美的聊天界面。
可至123云盘下载本控件，或在COCOQ群中获取，
当前最新版为：1.0.0。
如果使用时出现问题，请转至发生错误章节根据引导检查代码。
示例作品
:::highlight red 🤩
聊天框-轻蓝_示例
:::
可进入协作参考学习。
:::highlight purple 🥰
鸭信
:::
:::highlight yellow 🥳
UUChat
:::
快速入门
首先，先按你的需要设置好实际宽高，而不是默认的宽高，
设置好后，我们来写积木：添加一条消息，超级简单！
我们来看看效果：
现在了解了大概怎么用，就来看看下面的文档探索更多功能吧。
进阶文档
消息字典
所有消息的数据都储存在一个列表中，列表的每一项都是一个字典，对应着一条消息，我们称之为消息字典，以下是这个字典可用的参数。
小技巧：
您可以使用快速消息类积木初步了解消息字典，例如：
字典积木也可以实现同样的效果。例如：
:::highlight purple 💡
messageType（消息类型）
:::
必填
可选：
消息类（气泡框）
- text（纯文本）
- raw（富文本（可解析HTML））
系统提示类（小白条）
- tipsNormal（灰色）
- tipsPrimary（蓝色）
- tipsSuccess（绿色）
- tipsInfo（青色）
- tipsWarning（橙色）
- tipsDanger（红色）
:::highlight yellow 💡
html（消息内容）
:::
必填
- 字符串
:::highlight orange 💡
headIcon（头像链接）
:::
必填
- 字符串
:::highlight blue 💡
name（昵称）
:::
必填
- 字符串
:::highlight red 💡
position（消息位置）
:::
必填
可选：
left（左边）
right（右边）
:::highlight green 💡
diamond（是否使用方形头像）
:::默认为false
布尔值（ture 或 false）
:::highlight purple 💡
htitleType（头衔类型）
:::
可选：默认为无头衔
admin（蓝色）
owner（金色）
:::highlight yellow 💡
htitle（头衔标题）
:::
- 字符串
:::highlight green 💡
message（备注信息）
:::
不显示，用于存储这条消息的相关信息，如发送人ID、发送时间等。
- 任意类型，无强制要求。建议为字典类型，读写信息更方便。
:::highlight red 💡
colorDown（气泡背景渐变色下端部分）
:::
仅气泡框可用，与"colorUp"和"color"同时使用时才会生效。
- 字符串(颜色)
:::highlight purple 💡
colorUp（气泡背景渐变色上端部分）
:::
仅气泡框可用，与"colorDown"和"color"同时使用时才会生效。
- 字符串(颜色)
:::highlight blue 💡
color（气泡文本颜色）
:::
仅气泡框可用，与"colorDown"和"colorUp"同时使用时才会生效。
- 字符串(颜色)
控件属性
:::highlight purple 😎
实际宽度
:::
由于默认的宽度属性可能因消息的长度而改变，所以请填写此属性作为控件的固定宽度。
:::highlight orange 😎
实际高度
:::
与实际宽度一样，此属性作为控件的固定高度。
:::highlight yellow 😎
数据
:::
此属性用于储存消息数据，为字符串形式的列表。
注意：请一定要将该属性的初始值设为：'[]'（字符串类型）！
:::highlight blue 😎
深色模式
:::
设置控件是否切换为深色模式。
:::highlight purple 😎
气泡渐变色·下
:::
右边气泡的渐变色从下端开始的部分，
当值为透明颜色时，会使用默认值。
默认值为：rgba(63, 143, 225, .8)
:::highlight purple 😎
气泡渐变色·上
:::
右边气泡的渐变色上端开始的部分，
当值为透明颜色时，会使用默认值。
默认值为：#44d7c9
:::highlight yellow 😎
自动滚动
:::
设置控件是否自动滚动到底部。
控件积木
大多积木看字面意思即可理解，不再详细说明，
以下是注意点。
:::highlight yellow 🎨
关于写入类积木中的两种“消息”参数
:::
1.消息列表
传入一个列表，列表的每一项都是一个消息字典，
用于一次传入多个消息字典。
示例：
2.单个消息（也简称为“消息”）
传入单个消息字典。
示例：
:::highlight blue 🎨
关于
:::
因为属性中的"数据"是字符串类型，所有才有了此积木，返回对象类型的数据。
:::highlight purple 🎨
关于“快速消息”类积木
:::
根据参数返回一个消息字典，用于快速创建消息字典。
小技巧
:::highlight orange 🤯
如何发送图片/视频/音频/超链接等？
:::
将消息类型改为raw(富文本)，在消息内容中对应插入以下文本：
图片：<img src="图片链接">
视频：<video controls style="width:100%" src="视频链接"></video>
音频：<audio controls src="音频链接"></audio>
超链接：<a href="链接">显示文本</a>
原理很简单，这些文本都是HTML元素，在富文本类型中它们会被解析。
还有很多有趣的HTML元素也可以插入在文本中，
如<b>粗体文本、<i>斜体文本、<del>删除线文本等等，
您可在菜鸟教程中学习使用它们。
小技巧：
快速生成HTML元素控件可以快速生成这些元素，
该控件可在点鸭控件商城中下载。
发生错误
本控件的数据储存非常严格，
任何一个小错误都可能导致出现问题。
如果控件出现问题，
如：控件加载不出来、消息呈现错位等，
请先检查消息数据是否错误，
（可将数据在控制台中打印，以文本形式展现，更容易发现错误）
如：
和别的积木有没有编写错误。
如果确认无误，
可打开F12看控制台报错自行判断，
或反馈给作者。
:::highlight blue 📌
作者编程猫：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