微信聊天小程序——（四、聊天页面）

四、聊天页面

步骤一、聊天页面的搭建

效果图：

思路：

聊天页面的搭建

  • 首先在聊天页面获取我们所有的好友信息
  • 其次当点击我们对应好友，进入聊天页面
    注意传递我们此时的聊天记录表id，方便之后进行添加聊天记录
  • 聊天页面下方布局发送消息
    注意为传递参数的发送框
  • 获取我们发送消息，传递到我们的聊天记录表的记录中

在聊天页面中：

getChatRecord()

  // 功能：当跳转到聊天页面的时候，显示聊天信息// 思路：1.更加我们接收到的_id在聊天表中查询，返回查询值//      2.在wxml页面进行渲染

publishChat()

// 功能：当我们发布消息的时候，更新我们的数据库表中的消息
// 思路：1.首先根据页面接收到的值，获取这条消息的_id
//      2.新建一个空白数组，将我们需要记录的信息、聊天内容放到这个数组中
//      3.将这个数组放到我们存放聊天记录的record数组中
//      4.更新我们的数据库表格
//      5.更新之后，再次调用，使刚刚发送的消息出现
//      6.将我们的评论和输入消息内筒赋值为空

getInputValue(event)

// 功能：获取输入框的值

在js文件：

const app=getApp()
const util= require("../../utils/utils")Page({data: {},onShow(){this.setData({userInfo: app.globalData.userInfo})},// 功能：当点击好友的时候，传输好友信息onLoad(options) {console.log(options.id)this.setData({recordId:options.id})this.getChatRecord();},// 功能：当跳转到聊天页面的时候，显示聊天信息// 思路：1.更加我们接收到的_id在聊天表中查询，返回查询值//      2.在wxml页面进行渲染getChatRecord(){var that = this;wx.cloud.database().collection('chat_record1').doc(that.data.recordId).get({success(res){console.log(res)that.setData({chatList: res.data.record})}})},// 功能：当我们发布消息的时候，更新我们的数据库表中的消息
// 思路：1.首先根据页面接收到的值，获取这条消息的_id
//      2.新建一个空白数组，将我们需要记录的信息、聊天内容放到这个数组中
//      3.将这个数组放到我们存放聊天记录的record数组中
//      4.更新我们的数据库表格
//      5.更新之后，再次调用，使刚刚发送的消息出现
//      6.将我们的评论和输入消息内筒赋值为空 publishChat(){var that = this;wx.cloud.database().collection('chat_record1').doc(that.data.recordId).get({success(res){console.log(res)var record = res.data.recordvar msg = {}msg.userId = app.globalData.userInfo._idmsg.nickName = app.globalData.userInfo.nickNamemsg.faceImg = app.globalData.userInfo.faceImgmsg.openid = app.globalData._idmsg.text = that.data.inputValuemsg.time = util.formatTime(new Date())record.push(msg)console.log(msg)wx.cloud.database().collection('chat_record1').doc(that.data.recordId).update({data: {record: record},success(res){console.log(res)wx.showToast({title: '发布成功！',})//刷新下that.getChatRecord()that.setData({inputValue :'',plcaceHolder:'评论'})}})}})},// 功能：获取输入框的值getInputValue(event){console.log(event.detail.value)this.data.inputValue = event.detail.value},
})

在wxml文件中：

<view class="pub-comment"><view class="pub-left"><input class="pub-input" placeholder="{{plcaceHolder}}" bindinput="getInputValue" value="{{inputValue}}"></input></view><view class="pub-button" bindtap="publishChat">发送</view>
</view>

在wxss文件中：

/* 发布评论 */
.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;
}
步骤二、聊天页面实现

具体效果：

在这里插入图片描述

思路：

  • 拿到聊天数据后，进行判断。
    如果是和用户相同的_id，右边头像布局
    如果不相同，左边头像布局
  • 主要是在数据渲染部分
    在这里插入图片描述

在js文件：

主要作用的是这个函数。

  // 功能：当跳转到聊天页面的时候，显示聊天信息// 思路：1.更加我们接收到的_id在聊天表中查询，返回查询值//      2.在wxml页面进行渲染getChatRecord(){var that = this;wx.cloud.database().collection('chat_record1').doc(that.data.recordId).get({success(res){console.log(res)that.setData({chatList: res.data.record})}})},

在wxml 文件：


<block wx:for="{{chatList}}"><block wx:if="{{userInfo._id != item.userId}}"><view class="top"><image class="face" src="{{item.faceImg}}"></image><view class="nick">{{item.nickName}}</view></view><view class="bot"><text class="bot-text">{{item.text}}</text></view>
</block><block wx:if="{{userInfo._id == item.userId}}"><view class="top-right"><view></view><view class="top-2"><view class="nick-right">{{item.nickName}}</view><image class="face-right" src="{{item.faceImg}}"></image></view></view><view class="bot-right"><text class="bot-text">{{item.text}}</text></view>
</block></block><view class="pub-comment"><view class="pub-left"><input class="pub-input" placeholder="{{plcaceHolder}}" bindinput="getInputValue" value="{{inputValue}}"></input></view><view class="pub-button" bindtap="publishChat">发送</view>
</view>

在wxss文件：

/* 发布评论 */
.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 {display: flex;flex-direction: row;margin: 20rpx 20rpx 0 20rpx;
}
.top-2 {display: flex;flex-direction: row;
}
.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: 160rpx;margin-right: 20rpx;}.bot-right {margin-right: 160rpx;margin-left: 20rpx;text-align: right;
}
.bot-text {background-color: #F7F7F7;padding: 10rpx 10rpx;border-radius: 20rpx;
}
.nick {margin-top: 20rpx;
}
.nick-right {margin-top: 20rpx;
}
步骤三、实现自动登录

具体效果：不显示错误。
在这里插入图片描述

思路：

  • 在登录成功之后，把登录信息存储。
  • 把登录信息赋值给主页的js页面，之后再登录和注册页面引用。
  • 在登录和注册页面，每次从缓存中拿我们的登录信息。

在注册页面：

      app.globalData.userInfo=res.data[0]//把个人数据赋值给全局wx.setStorageSync('userInfo', res.data[0])

在登录页面：

    app.globalData.userInfo=res.datawx.setStorageSync('userInfo', res.data)

在主页的js文件中：

    // 功能：判断是否已经登录过。如果是登录过的用户，可以直接获取登录过的信息。if(wx.getStorageSync('userInfo')){this.globalData.userInfo = wx.getStorageSync('userInfo')}
步骤四、消息页面查看最近的聊天消息和时间

具体效果：

在这里插入图片描述

思路：

  • 拿到我们聊天记录中的time和最后一条聊天消息
  • 进行渲染，注意，渲染的时候，左边一个盒子，右边一个盒子

在massage页面

js文件中：

我们拿到了与好友聊天的聊天记录

  // 功能：当我的好友页面展示的时候，显示出我的好友// 思路：1.查询聊天表中，A或B为我们userinfo相同_id同时，好友状态为1。注意这个时候可以用command.or//      2.将满足条件的值给到我们本页的data中//      3.渲染的时候，进行判断，因为A和B都可能是我们的好友，所以，当某个是我们好友的时候，不在本页渲染。myFriends(){var that = this;const _ = wx.cloud.database().commandwx.cloud.database().collection("chat_record1").where(_.or([{userA_id:app.globalData.userInfo._id,isFriend:1},{userB_id:app.globalData.userInfo._id,isFriend:1}])).get({success(res){console.log(res)that.setData({myFriendsList:res.data})}})},

在wxml文件中：

<block class="list_fox" wx:for="{{myFriendsList}}"><view  class="list_item" bindtap="getChat_details" data-index="{{}}"  ><!-- 其中的一个条件 --><block wx:if="{{userInfo._id==item.userA_id}}"><view class="left" bindtap="toChat" data-id="{{item._id}}"><image class="ima" src="{{item.userB_faceImg}}"></image><view class="fox_right"><view class="name">{{item.userB_nickName}}</view><view class="fox_text">{{item.record[item.record.length-1].text}}</view></view></view><view><view class="fox_right">{{item.record[item.record.length-1].time}}</view></view></block><!-- 其中的另外一个条件 --><block wx:if="{{userInfo._id==item.userB_id}}"><view class="left" bindtap="toChat" data-id="{{item._id}}"><image class="ima" src="{{item.userA_faceImg}}"></image><view class="fox_right"><view class="name">{{item.userA_nickName}}</view><view class="fox_text">{{item.record[item.record.length-1].text}}</view></view></view><view><view class="fox_right">{{item.record[item.record.length-1].time}}</view></view></block></view></block>

在wxss页面中：

.myfriends{margin-left: 10rpx;}.ima{width: 120rpx ;height: 120rpx;border-radius: 50%;}.list_item{margin: 10rpx 10rpx;padding: 10rpx;display: flex;flex-direction: row;justify-content: space-between;}.name{margin: 10rpx 10rpx 10rpx 30rpx;color: black;font-size: 40rpx;}.left{display: flex;flex-direction: row;}.right{margin: 10rpx 0rpx 0rpx 350rpx;}.fox_right{margin-right: 20rpx;font-size: 30rpx;color: darkgray;}.fox_text{color: darkgray;font-size: 30rpx;}.fox_right{margin-right: 10rpx;}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/4500.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

在微信小程序中如何支持使用流模式（stream），打造ChatGPT实时回复机器人，最详细讲解。

在微信小程序中如何支持使用流模式（stream），打造ChatGPT实时回复机器人，最详细讲解。

有开发过ChatGPT相关应用的都知道&#xff0c;小程序是不支持流式请求的&#xff0c;目前市面上大多数开发者的解决方案都是使用websocket来解决。 还有一部分开发者是小程序嵌套网页解决这个问题&#xff0c;前者对于我们软件销售型的团队来说&#xff0c;交付会很麻烦&#…
阅读更多...
chatgpt写微信小程序

chatgpt写微信小程序

作为微信小程序开发者&#xff0c;您的任务是使用微信小程序原生开发&#xff0c;编写一个计数器页面&#xff0c;请回复满足以下要求的代码: 创建一个包含wxml、js、wxss和json文件的微信小程序页面&#xff0c;并在其中实现一个计数器页面。视图中显示的文本应为中文。请注意…
阅读更多...
基于ChatGPT的智能问答、ai绘图微信小程序思路

基于ChatGPT的智能问答、ai绘图微信小程序思路

ChatGPT ![在这里插入图片描述](https://img-blog.csdnimg.cn/186d9ecc453b48be9f19c467da7c3f07.jpeg ChatGPT是openai公司的一个人工智能机器人产品&#xff0c;目前已经升级到4.0版本。其因便捷高效&#xff0c;已经在大学生、IT届、科研界等领域广为流传。但是直接进入其…
阅读更多...
微信小程序ChatGpt流式响应

微信小程序ChatGpt流式响应

最近用微信小程序做chatGpt的Ai对话&#xff0c;其中重要的一点就是流式响应&#xff0c;现在分享处理逻辑&#xff0c;先给演示图。 下面是关键代码实现逻辑 const that this;const requestTask wx.request({url: xxxxx,responseType: "arraybuffer",method: POST…
阅读更多...
微信小程序_把chatgpt聊天数据复制到剪切板

微信小程序_把chatgpt聊天数据复制到剪切板

文章目录 ⭐ 前言⭐ 开始网格背景样式配置对话框样式配置复制到剪切板 ⭐ 结束 ⭐ 前言 大家好&#xff0c;我是yma16&#xff0c;不止前端&#xff0c;本文将介绍微信小程序中 chatgpt聊天页面设计和复制聊天数据。 往期微信小程序文章 小程序自定义微信昵称和头像 小程序制作…
阅读更多...
KeepChatGPT：让ChatGPT畅聊无阻的浏览器插件

KeepChatGPT：让ChatGPT畅聊无阻的浏览器插件

ChatGPT是一款强大的自然语言处理模型&#xff0c;但在使用过程中经常出现网络报错、刷新网页等问题&#xff0c;让使用体验大打折扣。而今天介绍的KeepChatGPT浏览器插件则能够有效解决这些问题&#xff0c;让ChatGPT畅聊无阻&#xff01; KeepChatGPT是一款解决ChatGPT畅聊过…
阅读更多...
浏览器插件的使用

浏览器插件的使用

善于使用浏览器插件&#xff0c;能起到高效上网的作用。 Microsoft Edge 是全球广受欢迎的浏览器&#xff0c;浏览器本身具有快速、简单和轻量级的特点。一流的性能系统和访问速度极大提升您的浏览体验。 对于浏览器的用户来说&#xff0c;安装一些实用的插件&#xff0c;能让…
阅读更多...
CHATGPT精选插件

CHATGPT精选插件

CHATGPT是帮你做事&#xff0c;而不是替你做事 1、联网插件&#xff1a; 使用Webpilot插件联网时还可以同时使用其它两种插件&#xff08;一次可以同时使用三个插件&#xff09;&#xff0c;而使用Web Browsing插件功能联网时无法使用插件功能&#xff08;联网功能和插件只能…
阅读更多...
这款工具被网友玩疯了！我又玩物丧志了...

这款工具被网友玩疯了！我又玩物丧志了...

羿阁 发自 凹非寺量子位 | 公众号 QbitAI 一款新的聊天AI被网友们玩疯了。 能直接生成代码、会自动修复bug、在线问诊、模仿莎士比亚风格写作……各种话题都能hold住&#xff0c;它就是OpenAI刚刚推出的——ChatGPT。 有脑洞大开的网友甚至用它来设计游戏&#xff1a;先用ChatG…
阅读更多...
OpenAI发布ChatGPT！手把手debug代码！

OpenAI发布ChatGPT！手把手debug代码！

卷友们好&#xff0c;我是rumor。 已经好久没看OpenAI的官网[1]了&#xff0c;但今天冥冥之中感觉受到了什么召唤&#xff0c;心想GPT4什么时候发布&#xff0c;莫名地就打开了&#xff0c;果然有料&#xff1a; 试用&#xff1a;https://chat.openai.com/ 它把魔抓又伸向对话了…
阅读更多...
【哪些工作会被ChatGPT取代?】我用ChatGPT全自动化生成代码进行了深度分析

【哪些工作会被ChatGPT取代?】我用ChatGPT全自动化生成代码进行了深度分析

【哪些工作会被ChatGPT取代?】我用ChatGPT全自动化生成代码进行了深度分析 前言 配置好ChatGPT的几个小时之后&#xff0c;我发现了一个宝藏网页https://github.com/f/awesome-chatgpt-prompts&#xff0c;也是我这篇文章的灵感所在&#xff0c;github里面给出让chatgpt扮演…
阅读更多...
GPT-3/ChatGPT 复现的经验教训

GPT-3/ChatGPT 复现的经验教训

为什么所有公开的对 GPT-3 的复现都失败了&#xff1f;我们应该在哪些任务上使用 GPT-3.5 或 ChatGPT&#xff1f; 对于那些想要复现一个属于自己的 GPT-3 或 ChatGPT 的人而言&#xff0c;第一个问题是关键的。第二个问题则对那些想要使用它们的人是重要的&#xff08;下文提…
阅读更多...
Day921.chatGPT

Day921.chatGPT

chatGPT Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于chatGPT的内容。 一、什么是chatGPT ChatGPT&#xff08;全名&#xff1a;Chat Generative Pre-trained Transformer&#xff09;&#xff0c;ChatGPT 是一种基于 GPT (Generative Pre-trained Transformer)…
阅读更多...
面向开发人员的 ChatGPT 提示词教程中文版 - ChatGPT 版

面向开发人员的 ChatGPT 提示词教程中文版 - ChatGPT 版

面向开发人员的 ChatGPT 提示词教程中文版 - ChatGPT 版 1. 指南1-1. 提示的指南1-2. 配置1-3. 提示语原则原则 1: 写出清晰而具体的指示技巧 1: 使用分隔符来清楚地表明输入的不同部分技巧 2: 要求提供结构化的输出技巧 3: 要求模型检查条件是否得到满足技巧 4: "少许样本…
阅读更多...
ChatGPT支持第三方plugins，并且推出了网络浏览器和代码解释器两个插件

ChatGPT支持第三方plugins，并且推出了网络浏览器和代码解释器两个插件

2023年3月23日&#xff0c;OpenAI实现了对ChatGPT插件的初步支持&#xff0c;还推出了两个插件&#xff0c;一个网络浏览器和代码解释器&#xff0c;并且开源了知识库检索插件的代码&#xff0c;任何有信息的开发者都可以自行托管&#xff0c;以增强ChatGPT的功能。 在目前已实…
阅读更多...
06-发送短信验证码实现登录功能

06-发送短信验证码实现登录功能

1、发送短信验证码实现登录功能的流程 1.1、获取验证码流程 1.2、登录流程 1.3、页面带有图形验证码的流程 2、 注册登录二合一页面的开发 2.1、将src目录下的App.vue页面上通用显示的删掉 2.2、在router目录下的index.js文件中通过懒加载的方式添加login.vue页面 对于rout…
阅读更多...
手把手教你使用短信验证码接口

手把手教你使用短信验证码接口

因为闪速码短信平台可以免费赠送200条使用&#xff0c;所以本文档以闪速码为列讲解。 一、账号注册、登录 一、注册、登录闪速码&#xff08;www.shansuma.com&#xff09;&#xff0c;进行实名认证。实名认证分为个人认证和企业认证&#xff0c;值得注意的是&#xff1a;个人…
阅读更多...
最好用的发短信（验证码、语音短信）接口

最好用的发短信（验证码、语音短信）接口

使用阿里大鱼短信接口 注册 进入大鱼页面&#xff0c;如果没有账号&#xff0c;则自行注册&#xff0c;再此不在过多详述。注册完成或者有账号的则在首页中点击加入“加入阿里大鱼”&#xff0c;如下&#xff1a; 创建引用 点击“管理中心”&#xff0c;然后再点击右上角…
阅读更多...
短信接口调用-手机短信，验证码

短信接口调用-手机短信，验证码

本文章短信平台接口基于中国网建SMS短信平台API&#xff0c;相关网址为点我打开--->中国网建SMS短信平台。注册后即可立即使用&#xff0c;无信息审核验证延迟。 通过中国网建第三方API发送一条短信&#xff0c;需要知道以下信息&#xff1a;用户注册时的Uid&#xff1a;用户…
阅读更多...
Android-短信验证码

Android-短信验证码

效果图 简介 基本上只要需要登录的APP&#xff0c;都会有验证码输入&#xff0c;所以说是比较常用的控件&#xff0c;而且花样也是很多的&#xff0c;这里列出来4种样式&#xff0c;分别是&#xff1a; 表格类型 方块类型 横线类型 圈圈类型 其实还有很多其他的样式&#xff0c…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023