一、先安装node.js
如若安装时出现磁盘无效的报错信息,以下解决方法
?1、win+r? ?输入subst Y: %TEMP%
?2、再次win+r? 输入subst Y:/Y
Y代表报错时出现的盘符
以下方法检查是否安装完成:

二、安装一个egg服务器
egg 是阿里出品的一款 node.js 后端 web 框架,egg 的定位是企业级 web 基础框架
学习egg.js,看这一篇就够了! - 掘金 (juejin.cn)
这里使用一现成的服务器,网盘地址下载:
链接:https://pan.baidu.com/s/1jKNHhIgEXu1tBb6j4bWt3w?pwd=6666? 提取码:6666

?在cmd中输入命令,运行启动服务器
npm:相当于有一个仓库

最后一行是服务器地址: http://127.0.0.1:7001
?三、使用vscode打开这个服务器文件

router.js

router.js是写接口的,上图的斜杠/就是接口,这里我们添加一个接口chat,controller.home.index表示这个接口对应在home.js文件里面的index()方法。

?async是处理js异步操作的处理函数

?如若不勾选则会报以下错误

四、微信小程序发送网络请求
wx.request({
url: 'http://127.0.0.1:7001/chat',
method:"POST",
// data表示给后端传的数据
data:{
myMsg:myMsg
},
// success表示从后端获取的数据
success(res){
console.log(res.data.ResponseText);
}
})
五、后端服务器接收请求并返回数据


?后端服务器接收前端传来的数据
var myMsg = ctx.request.body.myMsg

?
六、腾讯AI开发平台


?注册登录实名认证后即可创建Bot开始使用了

?
?
?
?
?复制右侧那段代码,并粘贴到以下位置:


?下载方法:
打开刚刚启动的服务器的cmd界面按ctrl+c终止服务器

?cls代码表示清屏
下载成功如下图:


?
?拿到密钥id和key粘贴到刚刚复制的代码里面的secretId 和 secretKey里面

?七、实现效果

八、聊天框当消息多了时实现消失滚动和发消息时自动滚动到底部?
1、问题效果

2、解决方法
给聊天框这部分使用<scroll-view>滚动区域
3、实现自动滚动到最底部
当聊天记录到底部时,再次发送聊天会发现没有自动滚动。

max是根据聊天记录的增加而动态的增加的,
九、代码
wxml代码
<!-- 聊天盒子 -->
<view class="chatBox">
<scroll-view class="gd" scroll-y scroll-top="{{max}}" scroll-with-animation>
<!-- 循环渲染收到的消息 -->
<block wx:for="{{msgBox}}">
<!-- 判断是否属于自己的消息 -->
<view class="myBox" wx:if="{{item.isMine}}">
<view class="myMsg">{{item.msg}}</view>
<view class="myHd"></view>
</view>
<!-- 判断是否属于别人的消息 -->
<view class="youBox" wx:else>
<view class="youHd"></view>
<view class="youMsg">{{item.msg}}</view>
</view>
</block>
</scroll-view>
</view>
<!-- 发送消息盒子 -->
<view class="sendBox">
<input type="text" class="iptBox" model:value="{{msg}}" bindinput="aa" />
<view class="sendBtn" bindtap="sendMsg">发送</view>
</view>
wxss代码
.chatBox {
height: 80vh;
width: 100vw;
background-color: papayawhip;
padding: 5px 5px;
box-sizing: border-box;
}
.gd{
height: 80vh;
}
.myBox {
display: flex;
justify-content: flex-end;
margin-bottom: 5px;
align-items: flex-start;
}
.myMsg {
display: flex;
align-items: center;
max-width: 250px;
/* width: 200px;
height: 100px; */
background-color: skyblue;
border-radius: 10px;
padding: 5px;
}
.myHd {
height: 50px;
width: 50px;
border-radius: 50%;
background-color: pink;
margin-left: 5px;
}
.youBox {
display: flex;
justify-content: flex-start;
margin-bottom: 15px;
}
.youMsg {
display: flex;
align-items: center;
max-width: 250px;
background-color: skyblue;
border-radius: 10px;
padding: 5px;
}
.youHd {
height: 50px;
width: 50px;
border-radius: 50%;
background-color: pink;
margin-right: 5px;
}
.sendBox {
display: flex;
justify-content: center;
align-items: center;
height: 20vh;
width: 100vw;
background-color: pink;
}
.iptBox {
height: 45px;
width: 250px;
background-color: #fff;
border-radius: 20px;
padding-left: 20px;
box-sizing: border-box;
}
.sendBtn {
height: 40px;
width: 80px;
background-color: powderblue;
border-radius: 10px;
text-align: center;
line-height: 40px;
font-size: 18px;
color: #fff;
font-weight: bold;
letter-spacing: 5px;
margin-left: 10px;
}
js代码
// pages/chat/chat.js
Page({
/**
* 页面的初始数据
*/
data: {
msg:"",
msgBox:[],
max:""
},
// 避免输入警告
aa:function(){},
sendMsg:function(){
// 判断用户是否输入了值
if(this.data.msg) {
var that=this
// 缓存用户输入的值
var myMsg = this.data.msg;
// 自定义对象
var myObj = {
msg:myMsg,
isMine:true
}
// 将自定义对象放入消息盒子
this.data.msgBox.push(myObj);
// 将消息盒子重新赋值,将用户输入的值赋值为空
this.setData({
msg:"",
msgBox:this.data.msgBox,
max:10000+this.data.msgBox.length
});
wx.request({
url: 'http://127.0.0.1:7001/chat',
method:"POST",
// data表示给后端传的数据
data:{
myMsg:myMsg
},
// success表示从后端获取的数据
success(res){
console.log(res.data.ResponseText);
var myObj = {
msg:res.data.ResponseText,
isYour:false
};
// 将自定义对象放入消息盒子
that.data.msgBox.push(myObj);
// 将消息盒子重新赋值,将用户输入的值赋值为空
that.setData({
// msg:"",
msgBox:that.data.msgBox,
max:10000+that.data.msgBox.length
});
}
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
node.js代码
router.js代码
'use strict';
/**
* @param {Egg.Application} app - egg application
*/
module.exports = app => {
const { router, controller } = app;
router.post('/',controller.home.index);
router.post('/chat',controller.home.chat)
};
?home.js代码
'use strict';
const Controller = require('egg').Controller;
class HomeController extends Controller {
async index() {
const { ctx } = this;
ctx.body = 'hi, egg';
}
// 结合腾讯AI开发平台的智能对话,首先前端发送聊天内容后端服务器接收到后再通过InputText把聊天数据发送到腾讯服务器获取智能AI的回复聊天内容,再把该内容返回到前端
async chat() {
const { ctx } = this;
//下面这段代码是腾讯AI开发平台生成的
console.log(ctx.request.body);
var myMsg = ctx.request.body.myMsg //从前端接收到的数据
// Depends on tencentcloud-sdk-nodejs version 4.0.3 or higher
const tencentcloud = require("tencentcloud-sdk-nodejs");
//该代码表示需要去下载tencentcloud-sdk-nodejs这个模块
const TbpClient = tencentcloud.tbp.v20190627.Client;
// 实例化一个认证对象,入参需要传入腾讯云账户secretId,secretKey,此处还需注意密钥对的保密
// 密钥可前往https://console.cloud.tencent.com/cam/capi网站进行获取
const clientConfig = {
credential: {
secretId: "AKIDSkmY4LM8euue8MK2UgcIismQTHq9CzWn",
secretKey: "3qMddNr55qMccNs76pIVR7XhaEclfIn2",
},
region: "",
profile: {
httpProfile: {
endpoint: "tbp.tencentcloudapi.com",
},
},
};
// 实例化要请求产品的client对象,clientProfile是可选的
const client = new TbpClient(clientConfig);
const params = {
"BotId": "c472c9ea-8edf-4486-a58d-560c5e14c814",
"BotEnv": "dev",
"TerminalId": "1447608208",
"InputText": myMsg
// 前端传过来的数据,再传给腾讯服务器,以获取智能AI回复的数据
};
// await是等待执行,等返回数据后再执行
await client.TextProcess(params).then(
(data) => {
console.log(data);
ctx.body = data; //返回到前端的数据
},
(err) => {
console.error("error", err);
}
);
}
}
module.exports = HomeController;
|