微信小程序 - - 聊天室

一、准备

1.准备

2.utils.js - - 获取时间的配置文件

/** @Author: wenmiao* @Date: 2021-11-12 16:11:21* @Last Modified by:   wenmiao* @Last Modified time: 2021-11-13 11:12:21 */
function formatTime(date) {var year = date.getFullYear()var month = date.getMonth() + 1var day = date.getDate()var hour = date.getHours()var minute = date.getMinutes()var second = date.getSeconds()return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')}function formatNumber(n) {n = n.toString()return n[1] ? n : '0' + n}module.exports = {formatTime: formatTime}

1.index.js

var util=require("../../utils/util.js")
// 1. 初始化，获取数据库引用
const db=wx.cloud.database()
// 2. 获取定义的集合
const chatList=db.collection('chatList')
Page({data: {InputBottom: 0,chatList:[{photoUrl:'https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg',   //发送人头像messageData:'内容1',   //发送内容time:'2018年3月23日 13:24',   //发送时间isMe:true,   //是不是我发送的，如果是true，发送人就是我，如果是false，发送人就是对方},{photoUrl:'https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg',messageData:'内容2',time:'2018年3月23日 13:24',isMe:false,}],message:'',    //输入的长文本（聊天内容）},onLoad(){var that=this//增删改查chaList -- 之查询chatList.get({success:function(res){var length=res.data.lengthvar message=res.data[length-1]console.log("sabdabsn"+message)that.setData({chatList:message})}})},InputFocus(e) {this.setData({InputBottom: e.detail.height})},InputBlur(e) {this.setData({InputBottom: 0})},message(e){this.setData({message:e.detail.value    //输入的信息会自动保存到message中，并回显到页面})},cleanInput() {     //清除输入框的内容var setMessage = { sendInfo: this.data.message }       this.setData(setMessage) },send(){//获取当前chatList数组的长度var index = this.data.chatList.length;//获取输入框中的文本内容var inputmessage=this.data.message.trim();//获取发送信息当前时间var nowtime=util.formatTime(new Date())this.setData({//属性对象的赋值[`chatList[${index}].messageData`]:inputmessage,[`chatList[${index}].photoUrl`]:'https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg',  //每次登录获取登录人的头像存储到storage中[`chatList[${index}].time`]:nowtime,[`chatList[${index}].isMe`]:true,});// 将本地的chatList数组存储到云端数据库集合中const chatListData=this.data.chatList;// 3.插入数据chatList.add({// data 字段表示需新增的 JSON 数据data: {...chatListData},success: function(res) {// res 是一个对象，其中有 _id 字段标记刚创建的记录的 idconsole.log(res)}})},
})

2.index.wxml

<!-- <cu-custom bgColor="bg-gradual-pink" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">聊天</view></cu-custom> -->
<!-- 使用wx:for="{{chatList}}"进行循环，chatList是在index.js的data中定义的数组-->
<view class="cu-chat" wx:for="{{chatList}}" wx:key="unique">   <!-- 自己发送的信息 --><view class="cu-item self" wx:if="{{item.isMe}}"><!-- 发送的内容 --><view class="main"><view class="content bg-green shadow"><text>{{item.messageData}}</text></view></view><!-- 自己的头像 --><view class="cu-avatar radius" style="background-image:url({{item.photoUrl}});"></view><!-- 发送的时间 --><view class="date">{{item.time}}</view></view><!-- 别人发送的信息 --><view class="cu-item"  wx:if="{{!item.isMe}}"><!-- 对方的头像 --><view class="cu-avatar radius" style="background-image:url({{item.photoUrl}});"></view><!-- 发送的内容 --><view class="main"><view class="content shadow"><text>{{item.messageData}}</text></view></view><!-- 发送的时间 --><view class="date ">{{item.time}}</view></view>
</view><!-- 底部 -->
<form bindreset="cleanInput"><view class="cu-bar foot input {{InputBottom!=0?'cur':''}}" style="bottom:{{InputBottom}}px"><!--cuIcon-sound声音小图标--><view class="action"><text class="cuIcon-sound text-grey"></text>   </view><!-- 输入框,bindinput="message"绑定多行文本输入框到index.js的data中的message属性中 --><input class="solid-bottom" placeholder="输入消息" bindfocus="InputFocus" bindblur="InputBlur" adjust-position="{{false}}" focus="{{false}}" maxlength="300" cursor-spacing="10"bindinput="message"></input><!-- cuIcon-emojifill表情小图标 --><view class="action"><text class="cuIcon-emojifill text-grey"></text></view><!-- 发送按钮,bindtap="send" --><button class="cu-btn bg-green shadow" bindtap="send" formType="reset">发送</button></view>
</form>

3.index.wxss

page{padding-bottom: 100rpx;
}

微信小程序 - - 聊天室相关推荐

接入网易云信IM即时通讯的微信小程序聊天室
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 接入流程: 初次接触网易云通信IM服务,您可以通过以下产品介绍文档了解我们的产品功能.相关概念.业务限制: 产 ...
微信小程序聊天室+websocket+文件上传（发送图片）
最近哥们在写微信小程序,其中有个需求是搭建一个聊天室,可多人聊天,可私聊,可发送图片.但是由于一直没有这方面相关的了解,于是慢慢的去看,去做,前期真的很困难,路子不好走,慢慢的再搭建. 先看看效果吧 ...
微信小程序聊天室前后端源码附效果图和数据库结构图
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 122 <!-- <button bindtap='close'>关闭</bu ...
微信小程序聊天室（云开发）
在写聊天是之前我们可以先看一需要建四个云数据表,user(用户列表),qunList (群列表),qunUserList(群用户列表),news(消息列表)接下来就是 ...
微信小程序聊天室表情
聊天室需要发送表情怎么实现,其实非常简单,只需要这样 let emoji =['?','?','?','?','?','?','?','?','?','?','?','?','?','?','?',' ...
php 小程序即时聊天,网易云IM小程序聊天室集成。PHP版SDK API使用示例
搜索热词出售微信小程序聊天室完整源码,也可定制开发微信小程序.扫码加微信详聊 /** 网易云信server API 接口使用示例 1.6 @author hzchensheng15@corp.ne ...
[微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
云开发微信小程序聊天群
功能支持创建群,邀请群成员,群成员列表展示,图片发送,设置群公告,踢人,全体禁言,个人禁言,发送语音信息等相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音 ...
小程序聊天室开发，发送文字，表情，图片，音频，视频，即时通讯，快速部署，可定制开发
效果图: 微信小程序聊天功能模块,现在已经支持发送图片,文字,音频,视频,表情,在线即时聊天啦. 需要做的可以联系我微信.13977284413 上代码: <view class="b ...

微信小程序 - - 聊天室

一、准备

1.准备

2.utils.js - - 获取时间的配置文件

1.index.js

2.index.wxml

3.index.wxss

微信小程序 - - 聊天室相关推荐

最新文章

热门文章