关键词：
参考文章
1、小程序模仿微信聊天界面
2、微信小程序实现仿微信聊天界面(各种细节处理)
3、微信小程序之页面中关于聊天框三角形的制作和使用
4、仿微信聊天记录时间显示
5、微信小程序-同时获取麦克风、相机权限、获取多个权限
6、【uni-app】模仿微信实现简易发送/取发语音功能
前言
代码参考自上述文章，样式和功能上根据自己需要做了一些改动以及删减，灰常感谢上述博主大大。ps:软键盘弹出还未进行测试。
消息交互的实现使用openfire，这里代码不做展示。
-----------------------2022/07/21修改-添加时间显示
-----------------------2022/07/22修改-发送按钮、空白消息提示
-----------------------2022/07/26修改-图片、语音消息
效果图
整体效果：
发送语音时（丑了点哈哈哈哈哈）：
点击加号图标时：
代码
1、wxml
<wxs module="filters" src="../../../../utils/addmul.wxs"></wxs>
<view>
<view >
<scroll-view scroll-y scroll-into-view='toView' style='height: scrollHeight;' refresher-enabled="true" bindrefresherrefresh="loadMore" refresher-triggered="triggered">
<view class='scrollMsg' >
<block wx:key="key" wx:for='msgList' wx:for-index="index">
<!-- 时间显示，时间间隔为5分钟（5分钟内的消息不必再显示时间） -->
<view class="showTime" wx:if="item.showTime !== null">
item.showTime
</view>
<!-- 单个消息1 客服发出（左） -->
<view class="server" wx:if="item.jid == 'server'" id='msg-index'>
<view class="serverIcon">
<image src='head_img'></image>
</view>
<view class="serverContent">
<view class="Angle">
</view>
<view class="Data">
<view class="leftMsg" wx:if="item.type == '1' ">item.msg</view>
<view class="leftMsg" wx:if="item.type == '2' ">
<image src="item.msg" class="image" catchtap="picture" data-src="item.msg"></image>
</view>
<view class="leftMsg" wx:if="item.type == '3' ">
<view bindtap='playVoice' data-item="item" data-index="index">
<image style='height:32rpx;width:32rpx;'
src="imgs.yyxx" mode="aspectFit"></image>
filters.toFix(item.duration / 1000)"
</view>
</view>
</view>
</view>
</view>
<!-- 单个消息2 用户发出（右） -->
<view class="customer" wx:else id='msg-index'>
<!-- 发起方的聊天框 -->
<view class="customerContent">
<view class="Data">
<view class="rightMsg" wx:if="item.type == '1' ">item.msg</view>
<view class="rightMsg" wx:if="item.type == '2' ">
<image class="image" src="item.msg" catchtap="picture" data-src="item.msg"></image>
</view>
<view class="rightMsg" wx:if="item.type == '3' ">
<view bindtap='playVoice' data-item="item" data-index="index">
filters.toFix(item.duration / 1000)"
<image style='height:32rpx;width:32rpx;margin-right:28rpx;'
src="imgs.yyxx" mode="aspectFit"></image>
</view>
</view>
</view>
<view class="AngleRight">
</view>
</view>
<!-- 发起方的头像 -->
<view class="serverIcon">
<image src='head_img'></image>
</view>
</view>
</block>
</view>
</scroll-view>
</view>
<!-- 底部键盘、语音、加号 -->
<view class='inputRoom' style="bottom: inputBottom + 'px'">
<image src='!voice ? imgs.icon_yy : imgs.xjp' catchtap="addSpeakMsg" mode='widthFix'></image>
<input wx:if="!voice" bindconfirm='sendClick' adjust-position='false' value="inputVal" confirm-type='send' bindfocus='focus' bindblur='blur' bindinput="getInputVal" maxlength="100"></input>
<view wx:else class="touch" bindtouchstart="touchdown" bindtouchend="touchup" bindtouchmove="touchmove">长按 说话</view>
<image src='imgs.icon_gdgn' mode='widthFix' catchtap="addOtherFormatMsg"></image>
</view>
<!-- 点击加号图标 -->
<view class="chat-camera" wx:if="camera">
<view wx:for="feature" wx:key="index" class="camera-feature" catchtap="featch" data-index="index">
<view class="feature-src">
<image src="item.src"></image>
</view>
<view class="feature-text">item.name</view>
</view>
</view>
</view>
<!-- 语音遮罩层 -->
<view class="voice-mask" wx:if="mask">
<!--语音条 -->
<view class="voice-bar needCancel ? 'voiceDel' : ''">
<image src="imgs.sb_c" class="voice-volume needCancel ? 'voiceDel' : ''"></image>
</view>
<!-- 底部区域 -->
<view class="voice-send">
<!-- 取消图标 -->
<view class="voice-middle-wrapper">
<!-- 取消 -->
<view class="voice-left-wrapper">
<view class="voice-middle-inner close needCancel ? 'bigger' : ''">
<image src="imgs.voiceCancel" class="close-icon"></image>
</view>
</view>
<view class="send-tip needCancel ? sendTipNone:''">sendtip</view>
</view>
<!-- 底部语音显示 -->
<view class="mask-bottom">
<image src="imgs.ht"></image>
</view>
</view>
</view>
2、wxss
page
background-color: #f1f1f1;
.inputRoom
width: 100vw;
height: 60px;
border-top: 1px solid #EEE;
background-color: #fff;
position: fixed;
bottom: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
z-index: 20;
padding: 0 2vw;
.inputRoom image
width: 7vw;
input
width: 70vw;
height: 45%;
background-color: #F2F2F2;
border-radius: 2px;
padding: 4px;
font-size: 28rpx;
color: #444;
.touch
width: 72vw;
height: 60%;
text-align: center;
background-color: #F2F2F2;
border-radius: 2px;
padding: 4px;
font-size: 28rpx;
color: #444;
.leftMsg
padding: 2vh 2.5vw;
background-color: #fff;
border-radius: 10rpx;
z-index: 10;
font-size: 14px;
color: #3B3B3B;
line-height: 20px;
font-weight: 400;
.rightMsg
font-size: 14px;
line-height: 20px;
padding: 2vh 2.5vw;
background-color: #149C89;
border-radius: 10rpx;
z-index: 10;
color: #FDFDFD;
font-weight: 400;
.Angle
display:flex;
width:0;
height:0;
border-width:10px;
border-style:solid;
border-color:transparent #fff transparent transparent;
.AngleRight
display:flex;
width:0;
height:0;
border-width:10px;
border-style:solid;
border-color:transparent transparent transparent #149C89 ;
.showTime
display: flex;
justify-content: center;
color:#AEAEAE;
font-size: 14px;
padding: 1vh 0;
.server
display: flex;
padding: 2vh 11vw 2vh 2vw;
flex-direction: row;
justify-content: flex-start;
align-items: center;
.serverIcon
width: 10vw;
height: 10vw;
.serverIcon image
width: 100%;
height: 100%;
.serverContent
width: 71vw;
height: auto;
display: flex;
justify-content: flex-start;
align-items: center;
z-index: 9;
.customer
display: flex;
justify-content: flex-end;
padding: 1vh 2vw 1vh 11vw;
align-items: center;
.customerContent
width: 71vw;
height: auto;
display: flex;
justify-content: flex-end;
align-items: center;
z-index: 9;
.chat-camera
width: 100%;
height: 100px;
float: left;
overflow: hidden;
background-color: #EDEDED;
overflow-y: auto;
margin-top: 60px;
.camera-feature
margin: 5% 0 0 5%;
width模仿android微信小程序，实现小程序独立任务视图的效果(代码片段)
本文同步发表于我的微信公众号，扫一扫文章底部的二维码或在微信搜索郭霖即可关注，每个工作日都有文章更新。大家好，久违的原创又来了。今天跟大家分享一个非常有趣的技术，如何在我们的App中实现类似... 查看详情
模仿android微信小程序，实现小程序独立任务视图的效果(代码片段)
本文同步发表于我的微信公众号，扫一扫文章底部的二维码或在微信搜索郭霖即可关注，每个工作日都有文章更新。大家好，久违的原创又来了。今天跟大家分享一个非常有趣的技术，如何在我们的App中实现类似... 查看详情
模仿android微信小程序，实现小程序独立任务视图的效果(代码片段)
本文同步发表于我的微信公众号，扫一扫文章底部的二维码或在微信搜索郭霖即可关注，每个工作日都有文章更新。大家好，久违的原创又来了。今天跟大家分享一个非常有趣的技术，如何在我们的App中实现类似... 查看详情
微信小程序和微信怎么可以一起分屏？
微信小程序和微信可以通过分屏的方式，同时在一台手机或平板电脑上运行。具体方法如下：1.打开微信，进入聊天界面，找到想要使用小程序的聊天记录。2.在聊天界面中，按住小程序图标，将其拖拽到聊天界面中的任意位置... 查看详情
微信小程序｜基于小程序+c#实现聊天功能(代码片段)
...;界面友好，开发简单。二、开发流程及准备2.1、注册微信公众平台账号。2.2、下载安装VisualStudio(后端语言开发工具)，SQLServer数据库，微信Web开发者工具。三、开发步骤3.1、打开VisualStudio，创建新项目，选择AS... 查看详情
微信小程序｜基于小程序+c#实现聊天功能(代码片段)
...;界面友好，开发简单。二、开发流程及准备2.1、注册微信公众平台账号。2.2、下载安装VisualStudio(后端语言开发工具)，SQLServer数据库，微信Web开发者工具。三、开发步骤3.1、打开VisualStudio，创建新项目，选择AS... 查看详情
模仿android微信小程序，实现小程序独立任务视图的效果(代码片段)
本文同步发表于我的微信公众号，扫一扫文章底部的二维码或在微信搜索郭霖即可关注，每个工作日都有文章更新。大家好，久违的原创又来了。今天跟大家分享一个非常有趣的技术，如何在我们的App中实现类似... 查看详情
微信小程序绘制二维码（附微信小程序开发学习手册）(代码片段)
...也希望能够给有需要的同学一些帮助。二、实现原理使用微信小程序的canvas组件进行绘制，但是在该组件用起来并不是很顺手，所以使用了第三方的框架： 查看详情
微信小程序绘制二维码（附微信小程序开发学习手册）(代码片段)
...也希望能够给有需要的同学一些帮助。二、实现原理使用微信小程序的canvas组件进行绘制，但是在该组件用起来并不是很顺手，所以使用了第三方的框架： 查看详情
微信小程序初探类微信ui聊天简单实现(代码片段)
微信小程序最近很火，火到什么程度，只要你一打开微信，就是它的身影，几乎你用的各个APP都可以在微信中找到它的复制版，另外官方自带的跳一跳更是将它推到了空前至高的位置。对比公众号，就我的... 查看详情
微信小程序之swoole/websocket创建聊天室（php）(代码片段)
一、php安装扩展组件Swoole参考连接 二、配置linux服务器在站点的配置文件中#SSL-END下面添加代码location/wss/ #通过配置端口指向部署websocker的项目 proxy_passhttp://127.0.0.1:9205/; proxy_http_version1.1; proxy_set_headerUpgrade$http_upgrade; proxy_se 查看详情
微信小程序的那些坑(代码片段)
早闻微信小程序是个坑，结果名不虚传，细数一下我开发小程序遇过到坑。 1.UI组件过度封装。微信小程序的组件是模仿react.js或vue.js的web组件设计的，并且封装了weui.css样式。PS：实现自定义多选或多选。（看微信小程序开... 查看详情
5分钟实现微信小程序绘制二维码(代码片段)
...，真是好久不见。在我们日常生活中，经常使用微信小程序亮健康码，那么就好奇前端怎么实现的，其实也并不难，下面5分钟带你快速实现~本文效果是绘制出二维码，且5秒时间到后自动刷新 查看详情
微信小程序绘制二维码（附微信小程序开发学习手册）(代码片段)
...也希望能够给有需要的同学一些帮助。二、实现原理使用微信小程序的canvas组件进行绘制，但是在该组件用起来并不是很顺手，所以使用了第三方的框架：PainterPainter的Github地址用你的方法，把这个框架下载下来&#... 查看详情
微信小程序——云音乐界面(代码片段)
文章目录第一章开发前的准备一、项目展示二、项目分析三、项目初始化第二章标签页切换一、任务分析二、常用组件介绍三、编写页面结构和样式第三章音乐推荐一、任务分析二、组件介绍三、编写音乐推荐页面结构和样式第... 查看详情
微信小程序绘制地图轨迹线路(代码片段)
绘制轨迹的话需要拿到坐标点，获取到坐标点之后再地图上进行绘制就可以；布局文件： <map class="mapUI" id="myMap" markers="markers" latitude="latitude" longitude="longitude" polyl... 查看详情
微信小程序置顶显示的小技巧
...技巧，把小程序置顶在聊天顶部，随时随地切换状态，用微信聊天的同时也能快速回到小程序。步骤一：首先打开微信客户端，点击底部的“发现”按钮步骤二：点击小程序步骤三：进入到某个小程序的界面，这里以“街店”为... 查看详情
#yyds干货盘点#愚公系列2022年12月微信小程序-webgl立体图形的绘制(代码片段)
前言在现实中webgl的用途很多，比如医院运维网站，地铁运维网站，海绵城市，可以以三维网页形式展示出现实状态。WebGL相关文档：http://doc.yonyoucloud.com/doc/wiki/project/webgl/webgL-fundamentals.html一、webgl的使用安装第三方包：npmi--savet... 查看详情