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

大家好，欢迎来到IT知识分享网。

在当今数字化时代，微信小程序因其便捷性和广泛的用户基础，成为了开发者和企业推广服务的热门选择。而结合人工智能技术的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. 测试与部署

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

4.完整源码下载地址

https://download.csdn.net/download/weixin_/