# 简单描述：

此产品是本人耗时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、个人资料：个人信息更新修改

# 完整项目结构

# 代码实现完整项目结构

## 连续熬了那么多天的夜终于把项目给干出来了

### 文字发送

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,// 设置最长时间60scamera: '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))
})

后续再更新文章.......

【三端通用】微信即时通讯+视频聊天（安卓、IOS、小程序）项目完整版相关推荐

微信开发者工具怎么导入电商小程序项目教程
从网上下载的小程序源码怎么导入微信开发者工具呢? 1.打开已经安装的微信官方开发者工具,登录. 2.选择"无AppID",随意取个项目名称,然后点击"选择"找到 ...
即时通讯视频聊天代码和技术架构
1.简介一款可以实现实时在线聊天的app,一对一实时在线聊天,可以实现客服功能,可以文字聊天,可以发图片聊天,简单实用 2.技术架构 3.技术选型框架版本号备 ...
微信小程序项目开发教程
一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可. 2.注册成功后进入首页,在小程序发布流程->小程序 ...
即时通讯im聊天仿v信聊呗闲聊潮信该有的功能都有ios安卓web端
即时通讯im聊天仿v信聊呗闲聊潮信该有的功能都有ios安卓web端 App特色说明经过测试.好用的,无BUG. 这个直接就可以运营了.聊天通信流畅. 推荐服务器配置:4核4G带宽5M 网盘下载地址: ...
即时通讯在线聊天APP开发解决方案
即时通讯是目前移动端最为流行的通讯方式,各种各样的即时通讯软件也层出不穷:服务提供商也提供了越来越丰富的通讯服务功能,打造一个实时通信系统,允许两人或多人使用网络实时的传递文字消息.文件.语音与视频交 ...
融云聊天 php_thinkphp整合系列之融云即时通讯在线聊天
随着技术的发展:现代的网站:越来越趋于应用形式了: 不再是像以前那样需要用户刷新页面:获取数据了: 服务器端可以主动向用户推送数据:更加及时性了: 比较突出的就是即时通讯在线聊天: 今个:我们要打造的 ...
thinkphp整合系列之融云即时通讯在线聊天
随着技术的发展:现代的网站:越来越趋于应用形式了: 不再是像以前那样需要用户刷新页面:获取数据了: 服务器端可以主动向用户推送数据:更加及时性了: 比较突出的就是即时通讯在线聊天: 今个:我们要打造的 ...
高仿Telegram IM Chat 聊天软件即时通讯在线聊天加社群纯静态UI架构介绍
高仿Telegram IM Chat 聊天软件即时通讯在线聊天加社群纯静态UI 全端覆盖!苹果手机端.安卓手机端.网页版.电脑PC版.无论哪个平台,都能畅通无阻! 性价比高!功能全面而价格低廉! ...
仿口袋助理源码 uniapp三端通用
口袋助理: 仿口袋助理源码 uniapp三端通用https://gitee.com/phper_echo/pocket-assistant?_from=gitee_search 一个协作APP,用于人 ...

【三端通用】微信即时通讯+视频聊天（安卓、IOS、小程序）项目完整版

# 简单描述：

# 功能模块：

聊天、通讯录、我

# 效果展示：

## 主会话界面

### 功能描述：

## 聊天界面

### 功能描述：

## 通讯录界面

### 功能描述：

## 我

### 功能描述：

# 完整项目结构

# 代码实现完整项目结构

## 连续熬了那么多天的夜终于把项目给干出来了

【三端通用】微信即时通讯+视频聊天（安卓、IOS、小程序）项目完整版相关推荐

最新文章

热门文章