如何0成本制作AI对话微信小程序(附源码)
道长不会写代码 2024-09-20 17:01:01 阅读 62
在当今数字化时代，微信小程序因其便捷性和广泛的用户基础，成为了开发者和企业推广服务的热门选择。而结合人工智能技术的AI对话功能，更是为小程序增添了智能互动的亮点。本文将分享如何0成本制作一个AI对话微信小程序，让每个人都能享受到AI带来的便利。
1. 准备工作
在开始之前，确保你已经拥有微信开发者账号，并且熟悉基本的小程序开发流程。微信开发者工具可以免费下载使用，这是开发微信小程序的基础。
百度智能云注册账号，在千帆大模型平台创建应用，在线服务-预置服务的“ERNIE-Speed-128K”、“ERNIE-Speed-8K”是免费使用的大模型。
2. 定义小程序结构
小程序的结构通常由三个部分组成：<code>.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',code>
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 }}">code>
<view class="chat-comment-assistant">code>
<block wx:if="{ { item.role == 'assistant' }}">code>
<view class="top">code>
<image class="face" src="img/bot.png"></image>code>
</view>
<view class="bot">code>
<text class="bot-text">{ { item.content }}</text>code>
</view>
</block>
</view>
<view class="chat-comment-user">code>
<block wx:if="{ {item.role == 'user'}}">code>
<view class="top-right">code>
<view></view>
<view>
<image class="face-right" src="img/user.png"></image>code>
</view>
</view>
<view class="bot-right">code>
<text class="user-text">{ {item.content}}</text>code>
</view>
</block>
</view>
</block>
<view class="blank-view"></view>code>
<view class="pub-comment">code>
<view class="pub-left">code>
<input class="pub-input" placeholder="{ {plcaceHolder}}" value="{ { question }}" bindinput="updateQuestion"></input>code>
</view>
<view class="pub-button" bind:tap="sendMessage">发送</view>code>
</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_42545951/89510336
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。