如何0成本制作AI对话微信小程序(附源码)

在当今数字化时代，微信小程序因其便捷性和广泛的用户基础，成为了开发者和企业推广服务的热门选择。而结合人工智能技术的AI对话功能，更是为小程序增添了智能互动的亮点。本文将分享如何0成本制作一个AI对话微信小程序，让每个人都能享受到AI带来的便利。

1. 准备工作

在开始之前，确保你已经拥有微信开发者账号，并且熟悉基本的小程序开发流程。微信开发者工具可以免费下载使用，这是开发微信小程序的基础。

百度智能云注册账号，在千帆大模型平台创建应用，在线服务-预置服务的“ERNIE-Speed-128K”、“ERNIE-Speed-8K”是免费使用的大模型。

2. 定义小程序结构

小程序的结构通常由三个部分组成：.js（JavaScript文件）、.json（配置文件）和.wxml（类似HTML的标记语言）。根据提供的源代码文件，我们可以对小程序的结构有一个初步的了解。

2.1 index.js - 逻辑层

index.js文件包含了小程序的主要逻辑。它定义了数据绑定、事件处理和API调用。例如，getAccessToken函数用于获取访问令牌，这是调用百度AI服务的前提。

getAccessToken(){//获取token
    wx.request({
      url: 'https://aip.baidubce.com/oauth/2.0/token',
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: {
        grant_type: 'client_credentials',
        client_id: '替换自己的API Key',
        client_secret: '替换自己的Secret Key'
      },
      success: (res) => {
        this.setData({
          access_token: res.data.access_token
        });
      }
    })
  }

callAI(){//调用大模型
    wx.request({
      url: 'https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/ernie_speed?access_token=' + this.data.access_token,
      method: 'POST',
      header: {
        'content-type': 'application/json'
      },
      data: {
        system: '你的名字叫61叔叔，是一名儿童心理学专家，对话时不要说自己是专家，专门和儿童对话，说话的语气要温柔，简洁，能让儿童听懂',
        messages: this.data.messages
      },
      success: (res) => {
        this.data.messages.push({ content: res.data.result, role: 'assistant' });
        this.setData({
          messages: this.data.messages,
          question: ''
        });
      }
    })
  }

2.2 index.json - 配置文件

index.json文件用于定义页面标题等。

{
  "usingComponents": {},
  "navigationBarTitleText": "61问吧"
}

2.3 index.wxml- 视图层

index.html文件使用wxml语法定义了用户界面，分两个区域，历史聊天记录区，发送消息区。

<block wx:for="{{ messages }}">
  <view class="chat-comment-assistant">
    <block wx:if="{{ item.role == 'assistant' }}">
      <view class="top">
        <image class="face" src="img/bot.png"></image>
      </view>
      <view class="bot">
        <text class="bot-text">{{ item.content }}</text>
      </view>
    </block>
  </view>

    <view class="chat-comment-user">
      <block wx:if="{{item.role == 'user'}}">
        <view class="top-right">
          <view></view>
          <view>
            <image class="face-right" src="img/user.png"></image>
          </view>
        </view>
        <view class="bot-right">
          <text class="user-text">{{item.content}}</text>
        </view>
      </block>
    </view>
</block>
<view class="blank-view"></view>
<view class="pub-comment">
  <view class="pub-left">
    <input class="pub-input" placeholder="{{plcaceHolder}}" value="{{ question }}" bindinput="updateQuestion"></input>
  </view>

  <view class="pub-button" bind:tap="sendMessage">发送</view>
</view>

2.4 index.wxss- 样式层

index.css文件定义了小程序的样式。

.pub-comment {
  background-color: #F7F7F7;
  padding: 20rpx 40rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: fixed;
  bottom: 0;
}
.pub-left {
  background-color: #fff;
  color: #7F7F7F;
  border-radius: 10rpx;
  margin-right: 20rpx;
}
.pub-input {
  padding: 10rpx 20rpx;
  width: 500rpx;
}
.pub-button {
  color: #7F7F7F;
  border: solid 1rpx #7F7F7F;
  border-radius: 10rpx;
  padding: 10rpx 15rpx;
  direction:ltr;
}



.top {
  margin: 20rpx 20rpx 0 20rpx;
}

.top-right {
  display: flex;
  flex-direction: row;
  margin: 20rpx 20rpx 0 20rpx;
  justify-content: space-between;
}
.face {
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
  margin-right: 30rpx;
}
.face-right {
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
  margin-left: 30rpx;
}
.bot {
  margin-left: 5rpx;
  margin-right: 50rpx;
 
}

.bot-right {
  margin-right: 10rpx;
  margin-left: 20rpx;
  
  text-align: right;
}
.bot-text {
  background-color: #f7f7f7;
  padding: 5rpx 5rpx;
  border-radius: 20rpx;
}
.user-text {
  background-color: #18f85b;
  padding: 5rpx 5rpx;
  border-radius: 20rpx;
}
.nick {
  margin-top: 20rpx;
}
.nick-right {
  margin-top: 20rpx;
}
.chat-comment-assistant {
  padding-top: 20rpx;
  display: flex;
  /* flex-wrap: wrap; */
  flex-direction: row;
  align-items: center;
}
.chat-comment-user {
  padding-top: 20rpx;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
.blank-view {
  height: 130rpx;
}

3. 测试与部署

开发完成后，使用微信开发者工具进行测试，确保所有功能正常运行。测试无误后，可以提交审核并发布小程序。