uniapp仿微信--聊天界面模板

项目演示

前言

我是看B站的视频一个一个敲的，讲的还不错。可以去看看vue+node.js即时通讯聊天室APP开发前端篇

主界面

chat.vue

<template>
	<!-- 聊天界面展示https://www.bilibili.com/video/BV1hT4y1P75N?p=22  搭建1和2 -->
	<view class="content">

		<!-- 聊天内容 -->
		<scroll-view class="chat" scroll-y="true" scroll-with-animation="true" :scroll-into-view="scrollToView">
			<view class="chat-main" :style="{paddingBottom:inputh+'px'}">
				<view class="chat-ls" v-for="(item,index) in unshiftmsg" :key="index" :id="'msg'+ index">
					<view class="chat-time" v-if="item.createTime != ''">{
  {changeTime(item.createTime)}}</view>
					<view class="msg-m msg-left" v-if="item.sendName ==  friendName">
						<image class="user-img" src="../../../static/logo.png"></image>
						<view class="message" v-if="item.TextType == 0">
							<!-- 文字 -->
							<view class="msg-text">{
  {item.sendText}}</view>
						</view>
						<view class="message" v-if="item.TextType == 1" @tap="previewImg(item.sendText)">
							<!-- 图像 -->
							<image :src="item.sendText" class="msg-img" mode="widthFix"></image>
						</view>
						<view class="message" v-if="item.TextType == 2" @tap="playVoice(item.sendText.voice)">
							<!-- 音频 -->
							<view class="msg-text voice" :style="{width:item.sendText.time*4+'rpx'}">
								<image src="../../../static/icon/Hotline.png" class="voice-img"></image>
								{
  {item.sendText.time}}″
							</view>
						</view>
						<view class="message" v-if="item.TextType == 3" @tap="openLocation(item.sendText)">
							<!-- 位置 -->
							<view class="msg-map">
								<view class="map-name">{
  {item.sendText.name}}</view>
								<view class="map-address">{
  {item.sendText.address}}</view>
								<!-- 如果map不起作用，就可以直接用一张图片去替代 -->
								<map class="map" :longitude="item.sendText.longitude" :latitude="item.sendText.latitude"
									:markers="covers(item.sendText)"></map>
							</view>
						</view>
					</view>
					<view class="msg-m msg-right" v-if="item.sendName != friendName">
						<image class="user-img" src="../../../static/logo.png"></image>
						<view class="message" v-if="item.TextType == 0">
							<view class="msg-text">{
  {item.sendText}}</view>
						</view>
						<view class="message" v-if="item.TextType == 1" @tap="previewImg(item.sendText)">
							<image :src="item.sendText" class="msg-img" mode="widthFix"></image>
						</view>
						<view class="message" v-if="item.TextType == 2" @tap="playVoice(item.sendText.voice)">
							<!-- 音频 -->
							<view class="msg-text voice" :style="{width:item.sendText.time*4+'rpx'}">
								{
  {item.sendText.time}}″
								<image src="../../../static/icon/Hotline.png" class="voice-img"></image>
							</view>
						</view>
						<view class="message" v-if="item.TextType == 3" @tap="openLocation(item.sendText)">
							<!-- 位置 -->
							<view class="msg-map">
								<view class="map-name">{
  {item.sendText.name}}</view>
								<view class="map-address">{
  {item.sendText.address}}</view>
								<map class="map" :longitude="item.sendText.longitude" :latitude="item.sendText.latitude"
									:markers="covers(item.sendText)"></map>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<submit @inputs="inputs" @heights="heights"></submit>
	</view>
</template>

<script>
	import dateTime from '../../../common/dateTime.js';
	import submit from '../../../components/submit/submit.vue';

	
	//音频播放
	const innerAudioContext = uni.createInnerAudioContext();

	export default {
		data() {
			return {
				friendName: "xpq",
				msg: [{
						"sendName": "xpq",
						"receviceName": "゛时光い",
						"sendText": {
							"address": "湖南省岳阳市湘阴县新世纪大道",
							"latitude": 28.68925,
							"longitude": 112.90917,
							"name": "湘阴县政府(新世纪大道北)",
						},
						"createTime": "2022-01-06 12:40:12",
						"updateTime": null,
						"chatmState": 1,
						"TextType": 3
					}, {
						"sendName": "゛时光い",
						"receviceName": "xpq",
						"sendText": {
							"voice": "时光匆匆流过",
							"time": 2 //秒
						},
						"createTime": "2022-01-06 12:22:12",
						"updateTime": null,
						"chatmState": 1,
						"TextType": 2
					}, {
						"sendName": "xpq",
						"receviceName": "゛时光い",
						"sendText": {
							"voice": "谢谢你",
							"time": 60 //秒
						},
						"createTime": "2022-01-06 12:00:12",
						"updateTime": null,
						"chatmState": 1,
						"Text