《微信小程序案例8》实现聊天框下部分别人向我发消息

一、先安装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 higherconst 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;

《微信小程序案例8》实现聊天框下部分别人向我发消息相关推荐

微信小程序案例TODO备忘录
微信小程序案例TODO备忘录微信小程序案例TODO备忘录本节展示一个制作todo备忘录的案例讲解代码:https://github.com/Harryjun/WeChatPrj/tree/mas ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
【微信小程序封装底部弹出框二】
[微信小程序封装底部弹出框二]  <view><button style="margin-top: 300px;" ...
许嵩音乐智能问答系统微信小程序之客服聊天室
许嵩音乐智能问答系统微信小程序之客服聊天室项目简介. 音乐播放器搭建. 获取数据及文本分类. 智能客服聊天界面. 连接前端微信小程序输入和后端python,并返回值连接知识图谱你还在为因为性格腼 ...
微信小程序对接环信聊天室
微信小程序对接环信聊天室 1.下载demo 链接: https://pan.baidu.com/s/1IpQeSYO54Dg0CliZ6XNhpQ 提取码: 9gsu 复制这段内容后打开百度网盘手机A ...
微信小程序案例一成绩计算
微信小程序案例一 :成绩计算效果图 2.WXML文件属性 bindinput 的类型为 handlerEvent 除了date/time 类型的输入框,当键盘输入时触发 input 事件,e.de ...
微信小程序解决苹果端在禁止下拉刷新以后仍可以拖到屏幕的问题
微信小程序解决苹果端在禁止下拉刷新以后仍可以拖到屏幕的问题 .json文件中----缺点是固定整个页面 {"navigationBarTitleText": "首页&qu ...
小程序加入人脸识别_人脸识别微信小程序案例：11.案例概述
1案例介绍本项目将应用python.mongodb.tornado.pymongo.ip2region.dlib.pillow.opencv.werkzeug.wtforms.wxss/wxml/j ...
微信小程序 WebSocket 通信 —— 在线聊天
在Node栏目就讲到了Socket通信的内容,使用Node实现Socke通信,还使用两个流行的WebSocket 库,ws 和 socket.io,在小程序中的WebSocket接口和HTML5的We ...

《微信小程序案例8》实现聊天框下部分别人向我发消息

一、先安装node.js

如若安装时出现磁盘无效的报错信息，以下解决方法

二、安装一个egg服务器

在cmd中输入命令，运行启动服务器

三、使用vscode打开这个服务器文件

router.js