Skip to Content
Welcome to Vyno! 🍷
文档内置组件WeChat

WeChat

微信聊天界面组件，模拟微信对话效果，支持文本和图片消息。

导入

import WeChat from "@plugins/default/components/we-chat";

基础用法

await Game.use(
  "phone",
  <WeChat
    title="聊天对话"
    messages={[
      {
        position: "left",
        name: "小明",
        contents: "你好！",
      },
      {
        position: "right",
        name: "我",
        contents: "你好，有什么事吗？",
      },
    ]}
  />
);

多条消息

await Game.use(
  "phone",
  <WeChat
    title="群聊"
    messages={[
      {
        position: "left",
        name: "小明",
        contents: ["你好！", "最近怎么样？"],
      },
      {
        position: "right",
        name: "我",
        contents: ["挺好的", "你呢？"],
      },
    ]}
  />
);

自定义动画

通过 delay 和 duration 控制消息动画：

await Game.use(
  "phone",
  <WeChat
    title="对话"
    messages={[
      {
        position: "left",
        name: "小明",
        contents: [
          { type: "text", content: "第一条消息", delay: 0.5 },
          { type: "text", content: "第二条消息", delay: 1 },
          { type: "text", content: "第三条消息", delay: 0.8, duration: 0.3 },
        ],
      },
    ]}
  />
);

图片消息

await Game.use(
  "phone",
  <WeChat
    title="分享图片"
    messages={[
      {
        position: "left",
        name: "小明",
        contents: [
          { type: "text", content: "看这个！" },
          { type: "image", content: "/images/photo.jpg", delay: 1 },
        ],
      },
      {
        position: "right",
        name: "我",
        contents: "好看！",
      },
    ]}
  />
);

头像

<WeChat
  title="对话"
  messages={[
    {
      position: "left",
      name: "小明",
      avatar: "/avatars/xiaoming.png",
      contents: "带头像的消息",
    },
  ]}
/>

如果不提供头像，会显示名字的前两个字符作为默认头像。

Props

属性类型必填描述
titlestring是聊天标题
messagesMessage[]是消息列表
classNamestring否自定义样式类
styleCSSProperties否自定义样式

Message

属性类型必填描述
position”left” | “right”是消息位置
namestring是发送者名称
avatarstring否头像图片路径
contentsContentType是消息内容

ContentType

消息内容支持多种格式：

// 简单字符串
contents: "你好"
 
// 字符串数组
contents: ["消息1", "消息2"]
 
// 对象格式
contents: { type: "text", content: "你好", delay: 1 }
 
// 混合数组
contents: [
  "普通消息",
  { type: "text", content: "带延迟的消息", delay: 1 },
  { type: "image", content: "/path/to/image.jpg" }
]

Content

属性类型必填默认值描述
type”text” | “image”是-内容类型
contentstring是-文本内容或图片路径
delaynumber否1相对于上一条的延迟（秒）
durationnumber否0.6动画持续时间（秒）

交互行为

  • 消息按顺序动画显示
  • 点击屏幕可跳过动画，直接显示所有消息
  • 动画完成后，点击”关闭”按钮或屏幕继续游戏
  • 支持自动播放模式

完整示例

import { createScene } from "@core/scene";
import { Game } from "@core/game";
import WeChat from "@plugins/default/components/we-chat";
 
const chatScene = createScene("chat", async () => {
  Game.narrate`收到了一条新消息...`;
 
  await Game.use(
    "phone",
    <WeChat
      title="老同学"
      messages={[
        {
          position: "left",
          name: "张三",
          avatar: "/avatars/zhangsan.png",
          contents: [
            { type: "text", content: "好久不见！", delay: 0.5 },
            { type: "text", content: "最近在忙什么？", delay: 1 },
          ],
        },
        {
          position: "right",
          name: "我",
          contents: [
            { type: "text", content: "是啊，好久不见", delay: 1 },
            { type: "text", content: "最近在做一个游戏项目", delay: 0.8 },
          ],
        },
        {
          position: "left",
          name: "张三",
          avatar: "/avatars/zhangsan.png",
          contents: [
            { type: "text", content: "哇，听起来很有趣！", delay: 1 },
            { type: "image", content: "/images/thumbsup.gif", delay: 0.5 },
          ],
        },
      ]}
    />
  );
 
  Game.narrate`聊天结束了`;
});
Last updated on
InputDialog进阶