# 簡單描述：

此產品是本人耗時12day開發出來的，采用的是uniapp框架開發出來的，可快速云打包上線，也可以進行二次開發符合自己的具體需求，

為什么要選擇uni-app框架去開發？

跨端、周期快、滿足需求

1、跨端：uniapp可同時發布H5、APP（安卓、IOS）微信小程式等....

2、周期：減輕開發成本，如果你用原生安卓和IOS、小程式去開發，周期長，成本高

3、應用層的業務需求可以滿足，底層的東西可通過插件去完成，定義基座

# 功能模塊：

聊天、通訊錄、我

# 效果展示：

## 主會話界面

### 功能描述：

1、實時監聽：全域監聽好友發送過來的會話訊息，并置頂在上面更新訊息會話

2、好友串列：獲取頭像、昵稱、聊天記錄回顯

3、時間計算：計算好友是什么時候發送過來的會話訊息 如：剛剛、分鐘、天數...

## 聊天界面

### 功能描述：

1、基礎通訊：文字聊天、表情發送、錄音發送、拍攝照片、發送照片、拍攝視頻、發送視頻

2、拓展通訊：常用語、發送訂單、服務評價（可二次開發自定義添加發紅包轉賬等等功能）

3、高級通訊：語音通話、視頻通話

## 通訊錄界面

### 功能描述：

1、實時監聽：全域監聽新好友串列更新

2、好友串列：獲取頭像、昵稱、發訊息、洗掉好友

3、新的朋友：添加好友、實時監聽別人添加你為好友

4、手機通訊錄：獲取本機手機通訊錄

## 我

### 功能描述：

1、我的資訊：頭像、昵稱、ID

2、查看頭像、切換登錄、退出登錄

3、個人資料：個人資訊更新修改

# 完整專案結構

# 代碼實作完整專案結構

## 連續熬了那么多天的夜終于把專案給干出來了

QQ：1969913702

### 文字發送

sendTextMessage(msg, flag) {
				const to = this.getToAccount();
				const text = flag ? msg : this.inputText;
				const message = uni.$TUIKit.createTextMessage({
					to,
					conversationType: this.conversation.type,
					payload: {
						text
					}
				});
				this.setData({
					inputText: '',
					sendMessageBtn: false
				});
				this.$sendTIMMessage(message);
			},

### 錄音發送

switchAudio() {
				this.setData({
					isAudio: !this.isAudio,
					text: '按住說話'
				});
			},
			handleLongPress(e) {
				this.recorderManager.start({
					duration: 60000,
					// 錄音的時長，單位 ms，最大值 600000（10 分鐘）
					sampleRate: 44100,
					// 采樣率
					numberOfChannels: 1,
					// 錄音通道數
					encodeBitRate: 192000,
					// 編碼碼率
					format: 'aac' // 音頻格式，選擇此格式創建的音頻訊息，可以在即時通信 IM 全平臺（Android、iOS、微信小程式和Web）互通

				});
				this.setData({
					startPoint: e.touches[0],
					title: '正在錄音',
					// isRecording : true,
					// canSend: true,
					notShow: true,
					isShow: false,
					isRecording: true,
					popupToggle: true,
					recordTime: 0
				});
				this.recordTimer = setInterval(() => {
					this.recordTime++;
				}, 1000)
			},
			// 錄音時的手勢上劃移動距離對應文案變化
			handleTouchMove(e) {
				if (this.isRecording) {
					if (this.startPoint.clientY - e.touches[e.touches.length - 1].clientY > 100) {
						this.setData({
							text: '抬起停止',
							title: '松開手指，取消發送',
							canSend: false
						});
					} else if (this.startPoint.clientY - e.touches[e.touches.length - 1].clientY > 20) {
						this.setData({
							text: '抬起停止',
							title: '上劃可取消',
							canSend: true
						});
					} else {
						this.setData({
							text: '抬起停止',
							title: '正在錄音',
							canSend: true
						});
					}
				}
			},

### 圖片發送#

sendImageMessage(type) {
				uni.chooseImage({
					sourceType: [type],
					count: 1,
					success: res => {
						if (res) {
							const message = uni.$TUIKit.createImageMessage({
								to: this.getToAccount(),
								conversationType: this.conversation.type,
								payload: {
									file: res
								},
								onProgress: percent => {
									message.percent = percent;
								}
							});
							this.$sendTIMMessage(message);
						}
					}
				});
			},

### 發送視頻

sendVideoMessage(type) {
				uni.chooseVideo({
					sourceType: [type],
					// 來源相冊或者拍攝
					maxDuration: 60,
					// 設定最長時間60s
					camera: 'back',
					// 后置攝像頭
					success: res => {
						if (res) {
							const message = uni.$TUIKit.createVideoMessage({
								to: this.getToAccount(),
								conversationType: this.conversation.type,
								payload: {
									file: res
								},
								onProgress: percent => {
									message.percent = percent;
								}
							});
							this.$sendTIMMessage(message);
						}
					}
				});
			},

### 雙人音視頻通話

TUICalling.call({
    userID: 'user1',
    type: 1
},(res) => {
    console.log(JSON.stringify(res))
})

后續再更新文章.......