feat: 移动端支持语音消息

README.md

@@ -41,7 +41,7 @@
 
 ![输入图片说明](%E6%88%AA%E5%9B%BE/wx%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg)
 
-
+注:由于每次发布小程序都需要经过严格且繁琐的审核，当前线上微信小程序并非最新版本，最后一次更新时间是2023年12月
 
 
 #### 相关项目
@@ -260,5 +260,4 @@ wsApi.onClose((e) => {
 1. 本系统允许用于商业用途，且不收费（自愿投币）。**但切记不要用于任何非法用途** ，本软件作者不会为此承担任何责任
 1. 基于本系统二次开发后再次开源的项目，请注明引用出处，以避免引发不必要的误会
 1. 如果您也想体验开源(bei bai piao)的快感，成为本项目的贡献者，欢迎提交PR。开发前最好提前联系作者，避免功能重复开发
-1. 如果您不具备搭建本系统的能力，作者可以提供付费搭建服务，收费标准：150~200元/次。需自备服务器(必要)、域名和ssl证书(可选)、企业主体小程序账号(可选)
 

im-ui/src/assets/iconfont/iconfont.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3791506 */
-  src: url('iconfont.ttf?t=1710567233281') format('truetype');
+  src: url('iconfont.ttf?t=1711892447736') format('truetype');
 }
 
 .iconfont {
@@ -11,6 +11,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-exit:before {
+  content: "\e9e4";
+}
+
 .icon-chat-video:before {
   content: "\e73b";
 }

im-ui/src/view/Home.vue

@@ -29,7 +29,7 @@
 				</el-menu-item>
 			</el-menu>
 			<div class="exit-box" @click="onExit()" title="退出">
-				<span class="el-icon-circle-close"></span>
+				<span class="icon iconfont icon-exit"></span>
 			</div>
 		</el-aside>
 		<el-main class="content-box">
@@ -372,10 +372,12 @@
 			width: 60px;
 			bottom: 40px;
 			color: #aaaaaa;
-			font-size: 24px;
 			text-align: center;
 			cursor: pointer;
 
+			.icon {
+				font-size: 28px;
+			}
 			&:hover {
 				color: white !important;
 			}

im-ui/src/view/Login.vue

@@ -5,35 +5,31 @@
 				<div>
 					<h3>盒子IM 2.0版本已上线：</h3>
 					<ul>
-						<li>加入uniapp移动版本，支持移动端和web端同时在线，多端消息同步</li>
-						<li>目前移动端仅兼容h5和微信小程序，后续会继续兼容更多终端类型</li>
+						<li>加入uniapp移动端,支持移动端和web端同时在线，多端消息同步</li>
+						<li>目前uniapp移动端支持安卓、ios、h5、微信小程序</li>
 						<li>聊天窗口支持粘贴截图、@群成员、已读未读显示</li>
-						<li>页面风格升级:表情包更新、自动生成文字头像等</li>
 						<li>支持群聊已读显示(回执消息)</li>
 						<li>语雀文档
 							<a href="https://www.yuque.com/u1475064/mufu2a" target="_blank">盒子IM详细介绍文档</a>,目前限时免费开放中
 						</li>
 					</ul>
 				</div>
-				<div>
-					<h3>最近更新(2024-02-24)：</h3>
-					<ul>
-						<li>uniapp端兼容ios和andriod,
-							<a href="https://www.boxim.online/download/boxim.apk" target="_blank">点击下载安卓客户端</a>
-						</li>
-						<li>uniapp端的启动和打包方式有所变化，具体请参考语雀文档</li>
-					</ul>
-				</div>
 				<div>
 					<h3>最近更新(2024-03-17)：</h3>
 					<ul>
 						<li>web端音视频功能优化:支持语音呼叫、会话中加入通话状态消息</li>
 						<li>uniapp端支持音视频通话，并与web端打通</li>
 						<li>uniapp端音视频源码通话源码暂未开源，需付费获取:
-							<a href="https://www.yuque.com/u1475064/oncgyg/vi7engzluty594s2" target="_blank">uniapp端音视频通话源码购买说明</a>
+							<a href="https://www.yuque.com/u1475064/oncgyg/vi7engzluty594s2" target="_blank">uniapp端音视频通源码购买说明</a>
 						</li>
 					</ul>
 				</div>
+				<div>
+					<h3>最近更新(2024-03-31)：</h3>
+					<ul>
+						<li>uniapp移动端支持发送语音消息</li>
+					</ul>
+				</div>
 				<div>
 					<h3>如果本项目对您有帮助,请在gitee上帮忙点个star</h3>
 				</div>

im-uniapp/App.vue

@@ -106,6 +106,10 @@
 				// webrtc 信令
 				if (msg.type >= enums.MESSAGE_TYPE.RTC_CALL_VOICE &&
 					msg.type <= enums.MESSAGE_TYPE.RTC_CANDIDATE) {
+					// #ifdef MP-WEIXIN
+						// 小程序不支持音视频
+						return;
+					// #endif
 					// 被呼叫，弹出视频页面
 					if(msg.type == enums.MESSAGE_TYPE.RTC_CALL_VOICE 
 						|| msg.type == enums.MESSAGE_TYPE.RTC_CALL_VIDEO){

im-uniapp/components/chat-message-item/chat-message-item.vue

@@ -139,12 +139,16 @@
 				// 初始化音频播放器
 				if (!this.innerAudioContext) {
 					this.innerAudioContext = uni.createInnerAudioContext();
-					let url = JSON.parse(this.msgInfo.content).url
+					let url = JSON.parse(this.msgInfo.content).url;
 					this.innerAudioContext.src = url;
 					this.innerAudioContext.onEnded((e) => {
 						console.log('停止')
 						this.audioPlayState = "STOP"
 					})
+					this.innerAudioContext.onError((e) =>{
+						console.log("播放音频出错");
+						console.log(e)
+					});
 				}
 				if (this.audioPlayState == 'STOP') {
 					this.innerAudioContext.play();

im-uniapp/manifest.json

@@ -100,6 +100,7 @@
     /* 小程序特有相关 */
     "mp-weixin" : {
         "appid" : "wxda94f40bfad0262c",
+		"libVersion": "latest",  
         "setting" : {
             "urlCheck" : false
         },

im-uniapp/pages/chat/chat-box.vue

@@ -28,7 +28,7 @@
 			</scroll-view>
 		</view>
 		<view class="send-bar">
-			<view v-if="!showRecord" class="iconfont icon-voice-circle" @click="onVoiceInput()"></view>
+			<view v-if="!showRecord" class="iconfont icon-voice-circle" @click="onRecorderInput()"></view>
 			<view v-else class="iconfont icon-keyboard" @click="onKeyboardInput()"></view>
 			<chat-record v-if="showRecord" class="chat-record" @send="onSendRecord" ></chat-record>
 			<view v-else class="send-text">
@@ -38,8 +38,8 @@
 					:hold-keyboard="true"></textarea>
 			</view>
 			<view v-if="chat.type=='GROUP'" class="iconfont icon-at" @click="openAtBox()"></view>
-			<view class="iconfont icon-icon_emoji" @click="switchChatTabBox('emo',true)"></view>
-			<view v-if="sendText==''" class="iconfont icon-add" @click="switchChatTabBox('tools',true)">
+			<view class="iconfont icon-icon_emoji" @click="onShowEmoChatTab()"></view>
+			<view v-if="sendText==''" class="iconfont icon-add" @click="onShowToolsChatTab()">
 			</view>
 			<button v-if="sendText!=''||atUserIds.length>0" class="btn-send" type="primary"
 				@touchend.prevent="sendTextMessage()" size="mini">发送</button>
@@ -79,6 +79,8 @@
 					<view class="tool-icon iconfont icon-receipt" :class="isReceipt?'active':''"></view>
 					<view class="tool-name">回执消息</view>
 				</view>
+				<!-- #ifndef MP-WEIXIN -->
+				<!-- 音视频不支持小程序 -->
 				<view v-if="chat.type == 'PRIVATE'" class="chat-tools-item" @click="onVideoCall()">
 					<view class="tool-icon iconfont icon-video"></view>
 					<view class="tool-name">视频通话</view>
@@ -87,6 +89,7 @@
 					<view class="tool-icon iconfont icon-call"></view>
 					<view class="tool-name">语音通话</view>
 				</view>
+				<!-- #endif -->
 			</view>
 			<scroll-view v-if="chatTabBox==='emo'" class="chat-emotion" scroll-y="true">
 				<view class="emotion-item-list">
@@ -124,7 +127,7 @@
 			}
 		},
 		methods: {
-			onVoiceInput() {
+			onRecorderInput() {
 				this.showRecord = true;
 				this.switchChatTabBox('none',true);
 			},
@@ -299,10 +302,19 @@
 				});
 
 			},
+			onShowEmoChatTab(){
+				this.showRecord = false;
+				this.switchChatTabBox('emo',true)
+			},
+			onShowToolsChatTab(){
+				this.showRecord = false;
+				this.switchChatTabBox('tools',true)
+			},
 			switchChatTabBox(chatTabBox, hideKeyBoard) {
 				this.chatTabBox = chatTabBox;
 				if (hideKeyBoard) {
 					uni.hideKeyboard();
+					this.showKeyBoard = false;
 				}
 			},
 			selectEmoji(emoText) {