【扣子coze+微信开发者工具】实现ai自定义对话02：微信小程序对话页面简单设计

摘要

本系列文章实现了运用国内扣子Coze与微信开发者工具实现一个简单的微信小程序页面，一个与自定义AI语言交互问答的功能。本系列文章详细讲解的从创建bot到微信小程序页面还有接口的编写。后续可能会加入后端Java+SpringBoot的逻辑功能来丰富项目。

成果预览：

专栏相关操作 ** **传送==>（^_^）

1、创建自定义Bot

2、微信小程序对话页面简单设计

3、逻辑和接口实现

一、前言

在这之前要先拥有一个微信公众平台的账号，如果没有的话要去微信公众平台注册，然后创建一个小程序，记得更改成自己的AppID。

在pages里创建一个文件夹我这里命名为AIchat，在这个文件夹里再新建page。

我在小程序编译的时候出现了工具未校验合法域名的问题，这是我们在学习或者测试的时候，要把这方面的设置给选中，要不然是不可以编译的。

二、.wxml 文件编写

我们的主要目的是功能的实现，页面后期可以再慢慢修改，因此这里是一个比较简洁的页面。

<!-- pages/AIchat/AIchat.wxml -->
<view class="chat-container">
  <scroll-view scroll-y="true" style="height: 100vh;">
    <block wx:for="{{messages}}" wx:key="*this">
      <view class="chat-message {{item.sender === 'user' ? 'user' : 'assistant'}}">
        <!-- 文本消息 -->
        <view wx:if="{{item.type === 'text'}}" class="bubble text-bubble">
          {{item.content}}
        </view>
        <!-- 图片消息 -->
        <view wx:if="{{item.type === 'image'}}" class="bubble image-bubble">
        <image src="{{item.content}}" /></view>
      </view>
    </block>
  </scroll-view>

  <!-- 输入框区域 -->
  <view class="input-container">
    <input class="message-input" placeholder="请输入消息" bindinput="onInputMessage" value="{{inputValue}}" />
    <view class="send-button-container">
      <button class="message-send" bindtap="onSendMessage">发送</button>
      <!-- 假设图标用于触发图片或文件选择 -->
      <image class="add-icon" src="/images/ai.png" mode="widthFix" bindtap="onAddAction" />
    </view>
  </view>
</view>

三、.wxss文件编写

/* pages/AIchat/AIchat.wxss */
.chat-container {
  margin-left: 3%;
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  /* overflow-y: auto; */
  height: 100%;
}
/* 对话气泡基础样式 */
.chat-message {
  display: flex;
  align-items: flex-end; /* 文本垂直底部对齐 */
  margin-bottom: 10px;
  max-width: 90%; /* 宽度最大80% */
}

/* 用户气泡 */
.user {
  align-self: flex-end; /* 用户消息靠右 */
}

/* 助手气泡 */
.assistant {
  align-self: flex-start; /* 助手消息靠左 */
}

/* 文本气泡 */
.bubble.text-bubble {
  background-color: white; /* 默认背景色 */
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  max-width: calc(80% - 20px); /* 减去边距以适应80%宽度限制 */
}

/* 用户文本气泡颜色 */
.user .text-bubble {
  background-color: lightblue;
}

/* 助手文本气泡颜色 */
.assistant .text-bubble {
  background-color: #f0f0f0;
}

/* 图片气泡基础样式 */
.bubble.image-bubble {
  position: relative; /* 为上传文本提供定位上下文 */
}

/* 图片气泡中的图片样式 */
.bubble.image-bubble image {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius:5px ;
  /* max-width: 100%; */
  /* height: auto; */
}

/* 上传文本提示 */

.input-container {
  background-color: rgb(241, 231, 231);
  position: fixed;
  height: 8%;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  display: flex;
  flex-direction: row; /* 改为列布局 */
  justify-content: center; /* 垂直居中对齐 */
  align-items: center; /* 水平居中对齐，如果需要 */
  flex-grow: 1;
}

.message-input {
  background-color: rgb(236, 231, 231);
  border: 1px solid #000;
  border-radius: 4px;
  padding-left: 5px;
  padding-right: 5px;
  height: 70%;
  /* flex-grow: 1; */
  font-size: 20px;
  letter-spacing: 2px;
  /* 设置字间距 */
  width: 80%;
  margin-top: auto;
  margin-bottom: auto;
  /* opacity: 1; */
  margin-right: 10px;
}
.send-button-container {
  width: 30%;
  height: 100%;
  display: flex; /* 使按钮和图片水平排列 */
  justify-content: space-between;
  align-items: center; /* 垂直居中 */
}
.message-send{
  background-color: deepskyblue;
  height: 70%;
  width: 50%;
  letter-spacing: 4px;
  /* text-align: center; */
  padding: 0 0;
  margin-right: 5px;
}

.add-icon {
  width: 100%; /* 根据实际图片大小调整 */
  margin-left: 10px; /* 调整与发送按钮的间距 */
}

四、总结

本文主要讲的是微信小程序页面的创建与设计。

作者为正在学习的在读研究生，希望可以与大家交流学习，欢迎指正！！