📌个人主页：个人主页
🧀 推荐专栏：小程序开发成神之路 --【这是一个为想要入门和进阶小程序开发专门开启的精品专栏！从个人到商业的全套开发教程，实打实的干货分享，确定不来看看？ 😻😻】
📝作者简介：从web开发，再到大数据算法，踩过了无数的坑，用心总结经验教训，助你在技术生涯一臂之力！若想获取更多精彩内容，敬请订阅专栏或者关注😁😂🤣😃😆😉😊😋😍😘🥰
⭐️您的小小关注是我持续输出的动力！⭐️

干货内容推荐

🥇入门和进阶小程序开发，不可错误的精彩内容🥇 ：

《小程序开发必备功能的吐血整理【个人中心界面样式大全】》

《微信小程序 | 动手实现双十一红包雨》

《微信小程序 | 人脸识别的最终解决方案》

《来接私活吧？小程序接私活必备功能-婚恋交友【附完整代码】》

《吐血整理的几十款小程序登陆界面【附完整代码】》

文章目录

干货内容推荐
- 效果预览
- 一、需求背景
- 二、功能剖析
- - 2.1 聊天列表
  - - 2.1.1 效果展示
    - 2.1.2 源码解析
  - 2.2 聊天列表
  - - 2.2.1 效果展示
    - 2.2.2 源码解析
  - 2.3 朋友圈界面
  - - 2.3.1 效果展示
    - 2.3.2 源码解析
- 三、完整源码

效果预览

在这里插入图片描述

一、需求背景

微信作为熟人社交领域类的顶流。其中有非常多的功能值得借鉴和推敲。其中的用户聊天界面，联系人界面特别是朋友圈界面妥妥是进行社交类应用开发的参考和借鉴的典范！

特此，本文整理了基于vue 2.0语法，结合uniapp框架，从而实现了可覆盖到移动全端的功能。同时使用了小程序端优秀的UI组件库uVIew进行构建，使得开发的成本更低，效果更好。

二、功能剖析

2.1 聊天列表

2.1.1 效果展示

在这里插入图片描述

2.1.2 源码解析

在联系人聊天记录条中，使用了uView中的u-swipe-action组件，使得消息具备了滑动展示菜单操作的功能。

<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list" btn-width="160" :key="item.id" @click="click" @open="open" :options="options">
			<view class="item" :class="item.isTop ? 'bg_view' : ''" hover-class="message-hover-class" @tap="linkTo(item)">
				<image mode="aspectFill" :src="item.images" />
				
				<view class="right u-border-bottom title-wrap">
					<view class="right_top">
						<view class="right_top_name u-line-1">{{ item.name }}</view>
						<view class="right_top_time ">{{ item.updateTime }}</view>
					</view>
					<view class="right_btm ">
						<view class="u-line-1">-</view>
						<view class=""></view>
					</view>
				</view>
			</view>
		</u-swipe-action>

2.2 聊天列表

2.2.1 效果展示

在这里插入图片描述

2.2.2 源码解析

在该聊天界面中，集成进了语音聊天功能，其中通过监听录音设备和用户点击录音按钮的时间长短来动态生成录音内容的大小，并将其转为mp3文件数据进行传输。

//处理录音文件
		handleRecorder({ tempFilePath,duration }) {
			let contentDuration;
			// #ifdef MP-WEIXIN
			this.voiceTime = 0;
			if (duration < 600) {
				this.voiceIconText="说话时间过短";
				setTimeout(()=>{
					this.recording = false;
				},200)
				return;
			} 
			contentDuration = duration/1000;
			// #endif
			
			// #ifdef APP-PLUS
			contentDuration = this.voiceTime +1;
			this.voiceTime = 0;
			if(contentDuration <= 0) {
				this.voiceIconText="说话时间过短";
				setTimeout(()=>{
					this.recording = false;
				},200)
				return;
			};
			// #endif
			
			this.recording = false;
			const params = {
				contentType: 2,
				content: tempFilePath,
				contentDuration: Math.ceil(contentDuration)
			};
			this.canSend && this.sendMsg(params);
		},

2.3 朋友圈界面

2.3.1 效果展示

在这里插入图片描述

2.3.2 源码解析

针对用户所发的朋友圈信息，根据信息的类型：图片或者文字信息，需要根据类型进行不同的排版。针对点赞的列表需要根据用户的点赞时间进行按需排列。

<template>
	<view class="content" id="content">
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar title=" " :background="{ background: '#f8f8f8' }" :border-bottom="false">
			<view class="slot-wrap" slot="right"><u-icon name="camera-fill" size="36" @click="linkToRelease"></u-icon></view>
		</u-navbar>
		<!-- #endif -->
		<view class="content-imgbox">
			<image class="bgimg" :src="_user_info.pictureBanner" mode="scaleToFill" @tap="showSheet"></image>
			<image class="headimg" :src="_user_info.headImg" @tap="linkToBusinessCard(_user_info.id)"></image>
			<text class="nickname">{{ _user_info.userName }}</text>
		</view>
		<view class="signature">
			<view class="">{{ _user_info.signature }}</view>
		</view>

		<!-- 朋友圈列表 -->
		<view class="content-circle">
			<view class="content-circle-box" v-for="(item, index) in circleData" :key="item.circleMegId">
				<view class="headimg"><image class="img" :src="item.userHeadImg" @tap="linkToBusinessCard(item.userId)"></image></view>
				<view class="content">
					<view class="content-name" @tap="linkToBusinessCard(item.userId)">{{ item.userName }}</view>
					<view class="content-desc">{{ item.content }}</view>
					<view class="content-img" v-if="item.imageList.length">
						<!-- //只有一张图时候 -->
						<view v-if="item.imageList.length == 1"><image class="img-1" :src="item.imageList[0]" mode="widthFix" @tap="previewImg(0, item.imageList)"></image></view>
						<!-- 有多张图的时候 -->
						<view v-else-if="item.imageList.length > 1">
							<view class="content-img-more">
								<image
									class="img-more"
									v-for="(src, index) in item.imageList"
									:key="index"
									:class="index % 3 == 0 && 'img-3'"
									:src="src"
									mode="aspectFill"
									@tap="previewImg(index, item.imageList)"
								></image>
							</view>
						</view>
					</view>
					<!-- 相对时间 点赞按钮等 -->
					<view class="relavivetime" :id="`comment-${'null'}-${index}`">
						<view class="time">{{ item.createTime }}</view>
						<view class="icon-box">
							<view @tap="clickThumb(item)">
								<image class="img icon-box-item thumb" :src="item.isPraise ? require('@/static/like-fill.png') : require('@/static/like.png')" mode=""></image>
							</view>
							<view @tap="handleComment(item.circleMegId, null, index)">
								<image class="img icon-box-item" :src="require('@/static/comment.png')" mode=""></image>
							</view>
						</view>
					</view>
					<!-- 点赞人 评论 -->
					<view class="msg-box">
						<view class="thumbinfo" v-if="item.praise.length">
							<image class="thumbinfo-icon" :src="require('@/static/like.png')"></image>
							<text class="thumbinfo-name" v-for="(userInfo, index) in item.praise" :key="userInfo.id" @tap="linkToBusinessCard(userInfo.id)">
								{{ userInfo.userName }}{{ index != item.praise.length - 1 ? '，' : '' }}
							</text>
						</view>
						<view class="comment" v-if="item.comment.length">
							<view
								class="comment-box"
								v-for="(comment, index) in item.comment"
								:key="index"
								hover-class="comment-hover-class"
								:id="`comment-${item.circleMegId}-${index}`"
								@tap="handleComment(item.circleMegId, comment, index)"
							>
								<text class="comment-box-name" v-if="!comment.replyUserId" @tap.stop="linkToBusinessCard(comment.userId)">{{ comment.userName }}：</text>
								<text class="comment-box-name" v-if="comment.replyUserId" @tap.stop="linkToBusinessCard(comment.userId)">
									{{ comment.userName }}
									<text class="callback">回复</text>
								</text>
								<text v-if="comment.replyUserId" class="comment-box-name" @tap.stop="linkToBusinessCard(comment.replyUserId)">{{ comment.replyUserName }}：</text>
								<text class="comment-box-content">{{ comment.content }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- #ifdef H5 -->
			<view :style="{ height: showInput ? '100rpx' : 0 }"></view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view v-show="showInput" :style="{ height: viewOffsetBottom + 'px' }"></view>
			<!-- #endif -->
		</view>

		<!-- 底部聊天输入框 其实可以封装成组件的...-->
		<!-- #ifdef MP-WEIXIN -->
		<view class="input-box" v-if="showInput" id="input-box" :style="{ bottom: inputOffsetBottom > 0 ? inputOffsetBottom + 'px' : '0' }">
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="input-box" v-show="showInput" id="input-box" :style="{ bottom: inputOffsetBottom > 0 ? inputOffsetBottom + 'px' : '0' }">
		<!-- #endif -->
			<view class="input-box-flex">
				<view class="input-box-flex-grow">
					<input
						type="text"
						class="content"
						id="input"
						v-model="content"
						:adjust-position="false"
						:confirm-type="'send'"
						:confirm-hold="true"
						placeholder-style="color:#DDD;"
						:cursor-spacing="6"
						:placeholder="placeholder"
						:focus="showInput"
						@blur="blurInput"
						@confirm="sendMsg"
					/>
				</view>
				<button class="btn" type="primary" size="mini" @touchend.prevent="sendMsg">发送</button>
			</view>
		</view>

		<u-action-sheet :list="list" v-model="show" border-radius="25" safe-area-inset-bottom @click="clickAction"></u-action-sheet>
	</view>
</template>