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

    使用教程·已迁移

    迁移提示#

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

    介绍#

    聊天框-轻蓝 是一款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