仿微信聊天小程序weChatRoom案例,一款基于微信小程序开发的聊天室实战项目。很早之前就有开发过一个h5版聊天室,最近又在原先思路的基础上开发了个小程序版聊天室,功能效果非常接近微信聊天,实现了消息、表情发送,小程序表情解析,图片、视频上传预览,打赏、红包等微交互场景。整体界面风格及效果挺不错哒。

◆ 先睹为快

◆ 项目中用到的弹窗插件,是自己开发的小程序弹窗组件wcPop:

<!-- <>引入弹窗模板.Start -->
<import src="/utils/component/wcPop/tpl.wxml" />
<template is="popup" data="{{ ...__options }}" />
<!-- <>引入弹窗模板.End -->

◆ 小程序消息记录数据

module.exports = [{ id: "msg1", msgtype: 1, isme: "", avatar: "", author: "", msg: "2019年01月20日 上午11:11", imgsrc: "", videosrc: "" }, //时间提醒{ id: "msg2", msgtype: 2, isme: "", avatar: "", author: "", msg: "当前群聊人数较多,为了信息安全,请注意聊天隐私", imgsrc: "", videosrc: "" }, //公告提醒{ id: "msg3", msgtype: 1, isme: "", avatar: "", author: "", msg: "2019年01月20日 上午11:15", imgsrc: "", videosrc: "" }, //时间提醒{ id: "msg4", msgtype: 3, isme: false, avatar: "../../img/uimg/u__chat-img01.jpg", author: "马总(Alibaba)", msg: "本聊天室每日10:00开22:00关期间请各位会员遵守规则禁止发言,多次警告无效踢出聊天室,永久黑名单禁止进入。", imgsrc: "", videosrc: "" }, //文字消息【别人】{ id: "msg5", msgtype: 3, isme: true, avatar: "../../img/uimg/u__chat-img14.jpg", author: "Nice奈斯", msg: "老板,表示下呗!", imgsrc: "", videosrc: "" }, //文字消息【自己】{ id: "msg6", msgtype: 4, isme: false, avatar: "../../img/uimg/u__chat-img02.jpg", author: "Sweet甜心", msg: "", imgsrc: "http://pic.sc.chinaz.com/files/pic/pic9/201901/hpic523.jpg", videosrc: "" }, //图片消息【别人】
  {id: "msg7", msgtype: 3, isme: false, avatar: "../../img/uimg/u__chat-img12.jpg", author: "flower花花", msg: "坐等群主的红包哇!:63:", imgsrc: "", videosrc: "" }, //文字消息-含表情【别人】{ id: "msg8", msgtype: 1, isme: "", avatar: "", author: "", msg: "01月20日 下午14:35", imgsrc: "", videosrc: "" }, //时间提醒{ id: "msg9", msgtype: 3, isme: false, avatar: "../../img/uimg/u__chat-img04.jpg", author: "BBK(小龙哥)", msg: "微信公开课演讲文稿,大家有时间的话可以去看看。:33::33::33:", imgsrc: "", videosrc: "" }, //文字消息-含链接【别人】{ id: "msg10", msgtype: 5, isme: false, avatar: "../../img/uimg/u__chat-img04.jpg", author: "BBK(小龙哥)", msg: "", imgsrc: "http://p3.pstatp.com/large/tos-cn-i-0004/39a6ed910d794ea8a6d85860b3464e82", videosrc: "https://v1-tt.ixigua.com/a69066ac303ccae7a155145000555100/5c4abb6b/video/m/2208ef8c54b15ae4be9babf28a888fe6d2411612e7f20000b9e74fcbf091/?rc=anF0NGx0N25tajMzZzczM0ApQHRAbzU1NTU8MzQzMzU2NDUzNDVvQGgzdSlAZjN1KWRzcmd5a3VyZ3lybHh3Zjo1QC1kYGdfcWowb18tLWEtL3NzLW8jbyM2LjYvMjYtLi8tMTIuNi06I28jOmEtcSM6YHZpXGJmK2BeYmYrXnFsOiMuLl4%3D&vfrom=xgplayer" }, //视频消息【别人】{ id: "msg11", msgtype: 3, isme: true, avatar: "../../img/uimg/u__chat-img14.jpg", author: "Nice奈斯", msg: "优秀!好棒棒呀~~ 向大佬学习。:79:", imgsrc: "", videosrc: "" }, //文字消息-含表情【自己】{ id: "msg12", msgtype: 2, isme: "", avatar: "", author: "", msg: "'Luci(王巧巧)' 撤回了一条消息", imgsrc: "", videosrc: "" }, //公告提醒{ id: "msg13", msgtype: 4, isme: false, avatar: "../../img/uimg/u__chat-img11.jpg", author: "Luci(王巧巧)", msg: "", imgsrc: "http://y3.ifengimg.com/bbc8b9401db0d57e/2014/0721/rdn_53ccd985694da.gif", videosrc: "" }, //图片消息【别人】{ id: "msg14", msgtype: 5, isme: true, avatar: "../../img/uimg/u__chat-img14.jpg", author: "Nice奈斯", msg: "", imgsrc: "http://pic.rmb.bdstatic.com/mvideo/70a0790d49998653eb2deb1cadfbdf93", videosrc: "https://vd3.bdstatic.com/mda-ik6254k2dwqi75zr/mda-ik6254k2dwqi75zr.mp4" }, //视频消息【自己】{ id: "msg15", msgtype: 6, isme: false, avatar: "../../img/uimg/u__chat-img03.jpg", author: "科比", msg: "", imgsrc: "../../img/emotion/face04/0.gif", videosrc: "" }, //文字消息-含大表情【别人】{ id: "msg16", msgtype: 3, isme: true, avatar: "../../img/uimg/u__chat-img14.jpg", author: "Nice奈斯", msg: "哈哈哈~~~ 能不能好好聊天,太TM搞笑了,真是笑屎我了。:28:", imgsrc: "", videosrc: "" }, //文字消息-含表情【自己】
];

◆ 聊天页面数据处理

// pages/groupChat/groupChat.jsvar util = require('../../utils/util.js');import { wcPop } from '../../utils/component/wcPop/tpl.js';const emotions = require('./emotion-mock-data.js');
const messages = require('./chat.mock-data.js');
var emojParse = require('./emojParse.js');Page({/*** 页面的初始数据*/data: {cursorSpacing: 15, //光标与键盘的距离toView: "scrollBottom", //定位到聊天底部isEditorFocus: false, //编辑器获取焦点isEditorPreview: false, //编辑器消息预览// 消息记录
    __messages: messages,// 表情集合
    __emotions: emotions.list,// 预览图片地址
    previewImgList: [],},onLaunch: function(){// ...
  },onLoad: function () {// 初始化解析表情emojParse.init(this, ":_/");// 解析消息记录里面的表情符号var _messages = this.data.__messages;for (var i = 0, len = _messages.length; i < len; i++) {// 解析含表情的消息if (_messages[i].msgtype == 3){// 解析消息记录表情字符串_messages[i].msg = { emojiTextArray: emojParse.transEmojStr(_messages[i].msg)};}}this.setData({__messages: _messages});},/*** 聊天页面JS功能模块-------------------------------------------------*/// 滚动聊天底部bindToMsgBottom: function (e) {var that = this;setTimeout(function(){that.setData({ toView: "scrollBottom" });}, e ? 100 : 0);},// 点击聊天面板区域bindTapMsgPanel: function (e) {this.setData({ isShowChoosePanel: false });},// 表情/选择区切换bindSwtEmotion: function (e) {var that = this;this.setData({isShowChoosePanel: true, isShowEmotion: true, isShowChoose: false,});// 滚动到聊天底部this.bindToMsgBottom();},bindSwtChoose: function (e) {var that = this;this.setData({isShowChoosePanel: true, isShowEmotion: false, isShowChoose: true,});// 滚动到聊天底部this.bindToMsgBottom();},// 底部多表情切换bindSwtEmotionBar: function(e) {var idx = e.currentTarget.dataset.index;var _lists = this.data.__emotions;for (var i = 0, len = _lists.length; i < len; i++){_lists[i].selected = false;}_lists[idx].selected = true;this.setData({ __emotions: _lists });},// 点击大图bindGifImageTap: function (e) {wx.showLoading({title: '发送中...',});var that = this;var _messages = this.data.__messages;var _len = _messages.length;var gifpath = e.currentTarget.dataset.path;// 消息队列var _data = {id: `msg${++_len}`,msgtype: 6, //大表情isme: true,avatar: "../../img/uimg/u__chat-img14.jpg",author: "Nice奈斯",msg: "",imgsrc: gifpath,videosrc: ""};_messages = _messages.concat(_data);this.setData({ __messages: _messages });setTimeout(function () { wx.hideLoading(); }, 100);// 滚动到聊天底部this.bindToMsgBottom(true);},// 选择图片bindChooseImage: function (e) {var that = this;var _messages = this.data.__messages;var _len = _messages.length;// 消息队列var _data = {id: `msg${++_len}`,msgtype: 4, //发送图片isme: true,avatar: "../../img/uimg/u__chat-img14.jpg",author: "Nice奈斯",msg: "",imgsrc: "",videosrc: ""};wx.chooseImage({count: 1,success: function(res) {// console.log(res);// console.log(res.tempFilePaths);
_data.imgsrc = res.tempFilePaths.toString(); //把单张数组格式图片转换为字符串格式_messages = _messages.concat(_data);that.setData({ __messages: _messages });// 滚动到聊天底部that.bindToMsgBottom(true);},})},// 预览图片bindPreviewImage: function (e) {// 遍历所有当前聊天记录图片var _src = e.currentTarget.dataset.src;var _messages = this.data.__messages;var _imglist = this.data.previewImgList;for (var i = 0, len = _messages.length; i < len; i++) {if (_messages[i].imgsrc != "" && _messages[i].msgtype == 4) {if (_imglist.indexOf(_messages[i].imgsrc) == -1) {_imglist.push(_messages[i].imgsrc);}}}// preview images
    wx.previewImage({current: _src,urls: _imglist,})},// 预览视频bindPreviewVideo: function (e) {var _id = e.currentTarget.dataset.id;this.playContext = wx.createVideoContext("video_" + _id, this);this.playContext.play();this.playContext.requestFullScreen({ direction: 0 });},// 全屏事件bindFullscreenchange: function (e) {var _id = e.currentTarget.dataset.id;this.fullchangeContext = wx.createVideoContext("video_" + _id, this);if (e.detail.fullscreen == false){this.fullchangeContext.pause();this.fullchangeContext.exitFullScreen();}},// 视频播放结束bindEndedVideo: function (e) {var _id = e.currentTarget.dataset.id;this.stopContext = wx.createVideoContext("video_" + _id, this);this.stopContext.stop();this.stopContext.exitFullScreen();},// 打赏bindDashang: function (e) {var dsIdx = wcPop({skin: 'android',content: ['wc__tmpl_dashang'],xclose: true,shadeClose: false,style: 'background: #f3f3f3;',});},// 发送红包bindHongbao: function (e) {var hbIdx = wcPop({skin: 'android',content: ['wc__tmpl_hongbao'],xclose: true,shadeClose: false,style: 'background: #f3f3f3;',});},})

转载于:https://www.cnblogs.com/xiaoyan2017/p/10336556.html

小程序版聊天室|聊天小程序|仿微信聊天界面小程序相关推荐

  1. php写的微信聊天界面,Android_Android高仿微信聊天界面代码分享,微信聊天现在非常火,是因其 - phpStudy...

    Android高仿微信聊天界面代码分享 微信聊天现在非常火,是因其界面漂亮吗,哈哈,也许吧.微信每条消息都带有一个气泡,非常迷人,看起来感觉实现起来非常难,其实并不难.下面小编给大家分享实现代码. 先 ...

  2. html 表情转换器,HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能

    之前做过一版h5微信聊天移动端,这段时间闲来无事就整理了下之前项目,又重新在原先的那版基础上升级了下,如是就有了现在的h5仿微信聊天高仿版,新增了微聊.通讯录.探索.我四个模块 左右触摸滑屏切换,聊天 ...

  3. html5微信超链接对话窗口,HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能...

    之前做过一版h5微信聊天移动端,这段时间闲来无事就整理了下之前项目,又重新在原先的那版基础上升级了下,如是就有了现在的h5仿微信聊天高仿版,新增了微聊.通讯录.探索.我四个模块 左右触摸滑屏切换,聊天 ...

  4. android仿微信聊天功能,Android高仿微信聊天界面代码分享

    微信聊天现在非常火,是因其界面漂亮吗,哈哈,也许吧.微信每条消息都带有一个气泡,非常迷人,看起来感觉实现起来非常难,其实并不难.下面小编给大家分享实现代码. 先给大家展示下实现效果图: OK,下面我们 ...

  5. android 微信高仿,Android高仿微信聊天界面代码分享

    微信聊天现在非常火,是因其界面漂亮吗,哈哈,也许吧.微信每条消息都带有一个气泡,非常迷人,看起来感觉实现起来非常难,其实并不难.下面小编给大家分享实现代码. 先给大家展示下实现效果图: OK,下面我们 ...

  6. 小程序仿微信聊天按住说话功能

    小程序仿微信聊天按住说话功能 实现:按住说话有录音动画,上滑可取消发送,松开发送录音 录音授权判断 # .wxml <view class="btn {{touchBtn?'hover ...

  7. php按住说话然后播放,小程序仿微信聊天按住说话功能

    小程序仿微信聊天按住说话功能 实现:按住说话有录音动画,上滑可取消发送,松开发送录音 录音授权判断 # .wxml bind:longpress="onLongpress" cat ...

  8. 微信小程序:装B神器P图修改微信流量主小程序源码下载趣味恶搞图制作免服务器域名

    今天给大家带来的这一款小程序是装逼生成,趣味制图工具 该小程序免服务器和域名,低成本运营 内容丰富,搭建简单,而且更逼真哟 内涵N种模板制作,另外还可以设置推荐小程序更好的互引 简单说几个模板吧 红包 ...

  9. 仿 微信/QQ 实现小程序功能 -IOS

    仿 微信/QQ 实现小程序功能 -IOS 1. 需求 首先,来大致看一下 微信/QQ 小程序的功能. Android端: 点击图标进入小程序,会新开一个任务栈,每个小程序一个任务栈(有的机型所有小程序 ...

  10. vue整合uniapp_uni-app仿微信App界面|vue+uniapp聊天室|仿微信朋友圈

    项目简介 基于uni-app+vue+vuex+uniPop+swiper等技术开发的仿微信聊天室uniapp-chatroom项目,类似vue及小程序api语法使开发更加方便,实现了发送图文消息.表 ...

最新文章

  1. 国外优秀开源PHP建站程序一览
  2. python中怎么比较两个列表-Python两个列表元素比较
  3. 数据结构实验之图论九:最小生成树(Prim/Kruskal)
  4. csdn编辑器模板2
  5. Linux安装PHP报错Sorry, I cannot run apxs. Possible reasons follow:
  6. c语言中的指针语法,C语言中指针的用法介绍
  7. 【机器学习】sklearn实现---归类为5大类
  8. 扩展欧几里得算法与模乘逆元的程序
  9. cad转dxf格式文件太大_DWG格式怎么转换成DXF格式?实测好用的转换工具都在这了...
  10. java计算机毕业设计校园社团管理平台演示录像2021源码+数据库+系统+lw文档+部署
  11. C语言程序设计题(函数题中15道)
  12. 韩顺平老师php从入门到精通149讲
  13. 2db多少功率_功率换算(dB与W).doc
  14. 【论文笔记】Combining EfficientNet and Vision Transformers for Video Deepfake Detection
  15. dbeaver连接hive3.1.2,不需添加驱动
  16. 如何设置快递送达时短信提醒
  17. C/S和B/S平滑模糊的时代----推荐:云计算时代的生命周期(吕建伟)
  18. java 判断三角形计算面积
  19. Python生成兔年祝福词云图,快拿去发给小姐姐吧!祝大家兔年大吉,桃花运多多
  20. Lua ipairs、pairs

热门文章

  1. Python的张量运算
  2. CDH-CM资源下载!!免费!!!
  3. 「网络流 24 题」负载平衡
  4. 联想微型计算机m73拆机,联想M73更换处理器 | 更换i3 4330t处理器_什么值得买
  5. OpenGL ——安装和环境配置
  6. html日历修改,HTML精美日历插件
  7. 扩展GridView控件(3) - 根据按钮的CommandName设置其客户端属性
  8. 不用找,你想要的建筑园林3d模型素材都在这里
  9. 基于SSM的小区物业管理系统(附源码+论文)
  10. DOS控制台启动方式+DOS控制台常用命令