新增聊天窗口语音消息

js_sdk/wa-permission/permission.js

@@ -0,0 +1,272 @@
+/**
+ * 本模块封装了Android、iOS的应用权限判断、打开应用权限设置界面、以及位置系统服务是否开启
+ */
+
+var isIos
+// #ifdef APP-PLUS
+isIos = (plus.os.name == "iOS")
+// #endif
+
+// 判断推送权限是否开启
+function judgeIosPermissionPush() {
+	var result = false;
+	var UIApplication = plus.ios.import("UIApplication");
+	var app = UIApplication.sharedApplication();
+	var enabledTypes = 0;
+	if (app.currentUserNotificationSettings) {
+		var settings = app.currentUserNotificationSettings();
+		enabledTypes = settings.plusGetAttribute("types");
+		console.log("enabledTypes1:" + enabledTypes);
+		if (enabledTypes == 0) {
+			console.log("推送权限没有开启");
+		} else {
+			result = true;
+			console.log("已经开启推送功能!")
+		}
+		plus.ios.deleteObject(settings);
+	} else {
+		enabledTypes = app.enabledRemoteNotificationTypes();
+		if (enabledTypes == 0) {
+			console.log("推送权限没有开启!");
+		} else {
+			result = true;
+			console.log("已经开启推送功能!")
+		}
+		console.log("enabledTypes2:" + enabledTypes);
+	}
+	plus.ios.deleteObject(app);
+	plus.ios.deleteObject(UIApplication);
+	return result;
+}
+
+// 判断定位权限是否开启
+function judgeIosPermissionLocation() {
+	var result = false;
+	var cllocationManger = plus.ios.import("CLLocationManager");
+	var status = cllocationManger.authorizationStatus();
+	result = (status != 2)
+	console.log("定位权限开启：" + result);
+	// 以下代码判断了手机设备的定位是否关闭，推荐另行使用方法 checkSystemEnableLocation
+	/* var enable = cllocationManger.locationServicesEnabled();
+	var status = cllocationManger.authorizationStatus();
+	console.log("enable:" + enable);
+	console.log("status:" + status);
+	if (enable && status != 2) {
+		result = true;
+		console.log("手机定位服务已开启且已授予定位权限");
+	} else {
+		console.log("手机系统的定位没有打开或未给予定位权限");
+	} */
+	plus.ios.deleteObject(cllocationManger);
+	return result;
+}
+
+// 判断麦克风权限是否开启
+function judgeIosPermissionRecord() {
+	var result = false;
+	var avaudiosession = plus.ios.import("AVAudioSession");
+	var avaudio = avaudiosession.sharedInstance();
+	var permissionStatus = avaudio.recordPermission();
+	console.log("permissionStatus:" + permissionStatus);
+	if (permissionStatus == 1684369017 || permissionStatus == 1970168948) {
+		console.log("麦克风权限没有开启");
+	} else {
+		result = true;
+		console.log("麦克风权限已经开启");
+	}
+	plus.ios.deleteObject(avaudiosession);
+	return result;
+}
+
+// 判断相机权限是否开启
+function judgeIosPermissionCamera() {
+	var result = false;
+	var AVCaptureDevice = plus.ios.import("AVCaptureDevice");
+	var authStatus = AVCaptureDevice.authorizationStatusForMediaType('vide');
+	console.log("authStatus:" + authStatus);
+	if (authStatus == 3) {
+		result = true;
+		console.log("相机权限已经开启");
+	} else {
+		console.log("相机权限没有开启");
+	}
+	plus.ios.deleteObject(AVCaptureDevice);
+	return result;
+}
+
+// 判断相册权限是否开启
+function judgeIosPermissionPhotoLibrary() {
+	var result = false;
+	var PHPhotoLibrary = plus.ios.import("PHPhotoLibrary");
+	var authStatus = PHPhotoLibrary.authorizationStatus();
+	console.log("authStatus:" + authStatus);
+	if (authStatus == 3) {
+		result = true;
+		console.log("相册权限已经开启");
+	} else {
+		console.log("相册权限没有开启");
+	}
+	plus.ios.deleteObject(PHPhotoLibrary);
+	return result;
+}
+
+// 判断通讯录权限是否开启
+function judgeIosPermissionContact() {
+	var result = false;
+	var CNContactStore = plus.ios.import("CNContactStore");
+	var cnAuthStatus = CNContactStore.authorizationStatusForEntityType(0);
+	if (cnAuthStatus == 3) {
+		result = true;
+		console.log("通讯录权限已经开启");
+	} else {
+		console.log("通讯录权限没有开启");
+	}
+	plus.ios.deleteObject(CNContactStore);
+	return result;
+}
+
+// 判断日历权限是否开启
+function judgeIosPermissionCalendar() {
+	var result = false;
+	var EKEventStore = plus.ios.import("EKEventStore");
+	var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(0);
+	if (ekAuthStatus == 3) {
+		result = true;
+		console.log("日历权限已经开启");
+	} else {
+		console.log("日历权限没有开启");
+	}
+	plus.ios.deleteObject(EKEventStore);
+	return result;
+}
+
+// 判断备忘录权限是否开启
+function judgeIosPermissionMemo() {
+	var result = false;
+	var EKEventStore = plus.ios.import("EKEventStore");
+	var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(1);
+	if (ekAuthStatus == 3) {
+		result = true;
+		console.log("备忘录权限已经开启");
+	} else {
+		console.log("备忘录权限没有开启");
+	}
+	plus.ios.deleteObject(EKEventStore);
+	return result;
+}
+
+// Android权限查询
+function requestAndroidPermission(permissionID) {
+	return new Promise((resolve, reject) => {
+		plus.android.requestPermissions(
+			[permissionID], // 理论上支持多个权限同时查询，但实际上本函数封装只处理了一个权限的情况。有需要的可自行扩展封装
+			function(resultObj) {
+				var result = 0;
+				for (var i = 0; i < resultObj.granted.length; i++) {
+					var grantedPermission = resultObj.granted[i];
+					console.log('已获取的权限：' + grantedPermission);
+					result = 1
+				}
+				for (var i = 0; i < resultObj.deniedPresent.length; i++) {
+					var deniedPresentPermission = resultObj.deniedPresent[i];
+					console.log('拒绝本次申请的权限：' + deniedPresentPermission);
+					result = 0
+				}
+				for (var i = 0; i < resultObj.deniedAlways.length; i++) {
+					var deniedAlwaysPermission = resultObj.deniedAlways[i];
+					console.log('永久拒绝申请的权限：' + deniedAlwaysPermission);
+					result = -1
+				}
+				resolve(result);
+				// 若所需权限被拒绝,则打开APP设置界面,可以在APP设置界面打开相应权限
+				// if (result != 1) {
+				// gotoAppPermissionSetting()
+				// }
+			},
+			function(error) {
+				console.log('申请权限错误：' + error.code + " = " + error.message);
+				resolve({
+					code: error.code,
+					message: error.message
+				});
+			}
+		);
+	});
+}
+
+// 使用一个方法，根据参数判断权限
+function judgeIosPermission(permissionID) {
+	if (permissionID == "location") {
+		return judgeIosPermissionLocation()
+	} else if (permissionID == "camera") {
+		return judgeIosPermissionCamera()
+	} else if (permissionID == "photoLibrary") {
+		return judgeIosPermissionPhotoLibrary()
+	} else if (permissionID == "record") {
+		return judgeIosPermissionRecord()
+	} else if (permissionID == "push") {
+		return judgeIosPermissionPush()
+	} else if (permissionID == "contact") {
+		return judgeIosPermissionContact()
+	} else if (permissionID == "calendar") {
+		return judgeIosPermissionCalendar()
+	} else if (permissionID == "memo") {
+		return judgeIosPermissionMemo()
+	}
+	return false;
+}
+
+// 跳转到**应用**的权限页面
+function gotoAppPermissionSetting() {
+	if (isIos) {
+		var UIApplication = plus.ios.import("UIApplication");
+		var application2 = UIApplication.sharedApplication();
+		var NSURL2 = plus.ios.import("NSURL");
+		// var setting2 = NSURL2.URLWithString("prefs:root=LOCATION_SERVICES");		
+		var setting2 = NSURL2.URLWithString("app-settings:");
+		application2.openURL(setting2);
+
+		plus.ios.deleteObject(setting2);
+		plus.ios.deleteObject(NSURL2);
+		plus.ios.deleteObject(application2);
+	} else {
+		// console.log(plus.device.vendor);
+		var Intent = plus.android.importClass("android.content.Intent");
+		var Settings = plus.android.importClass("android.provider.Settings");
+		var Uri = plus.android.importClass("android.net.Uri");
+		var mainActivity = plus.android.runtimeMainActivity();
+		var intent = new Intent();
+		intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
+		var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
+		intent.setData(uri);
+		mainActivity.startActivity(intent);
+	}
+}
+
+// 检查系统的设备服务是否开启
+// var checkSystemEnableLocation = async function () {
+function checkSystemEnableLocation() {
+	if (isIos) {
+		var result = false;
+		var cllocationManger = plus.ios.import("CLLocationManager");
+		var result = cllocationManger.locationServicesEnabled();
+		console.log("系统定位开启:" + result);
+		plus.ios.deleteObject(cllocationManger);
+		return result;
+	} else {
+		var context = plus.android.importClass("android.content.Context");
+		var locationManager = plus.android.importClass("android.location.LocationManager");
+		var main = plus.android.runtimeMainActivity();
+		var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
+		var result = mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER);
+		console.log("系统定位开启:" + result);
+		return result
+	}
+}
+
+module.exports = {
+	judgeIosPermission: judgeIosPermission,
+	requestAndroidPermission: requestAndroidPermission,
+	checkSystemEnableLocation: checkSystemEnableLocation,
+	gotoAppPermissionSetting: gotoAppPermissionSetting
+}

manifest.json

@@ -43,6 +43,7 @@
                     "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
                     "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
                     "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
                     "<uses-permission android:name=\"android.permission.USE_FINGERPRINT\"/>",
                     "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
                     "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",

pages/im/private/index.vue

@@ -7,13 +7,18 @@
                 <view class="chat-item-article" :class="item.messageDirection == 1 ? 'right' : 'left'">
                     <view class="chat-msg">
                         <view class="chat-msg-text">{{ item.content.content }}</view>
+                        <view class="chat-msg-audio">
+                            <image src="@/static/icon/audio_ green.png" mode="widthFix"></image>
+                            10"
+                            <image src="@/static/icon/audio_white.png" mode="widthFix"></image>
+                        </view>
                         <!-- 预留一些图片，语音表情包等位置 -->
                     </view>
                     <view class="chat-status" :class="{'hide': item.sentStatus == 50}"
                         v-if="item.messageDirection == 1">{{ item.sentStatus == 50 ? '已读': '未读'}}</view>
                     <view class="chat-avatar">
-                        <u-avatar v-if="item.messageDirection == 2" bg-color="#ffffff" :src="userInfo.portraitUrl" @click="showFriend(targetId)"></u-avatar>
+                        <u-avatar v-if="item.messageDirection == 2" shape="square" bg-color="#ffffff" :src="userInfo.portraitUrl" @click="showFriend(targetId)"></u-avatar>
-                        <u-avatar v-else @click="showMine" bg-color="#ffffff" :src="$store.getters.sender.portraitUrl" />
+                        <u-avatar v-else @click="showMine" shape="square" bg-color="#ffffff" :src="$store.getters.sender.portraitUrl" />
                     </view>
                 </view>
                 <view class="chat-item-time" :id="'chatId_'+index">
@@ -23,16 +28,34 @@
         </scroll-view>
 
         <view class="chat-footer">
-            <input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send"
+            <view class="msg-type" @click="msgType">
-                cursor-spacing="10" />
+                <image src="@/static/icon/key-icon.png" v-if="importTabs === 0" mode="widthFix"></image>
+                <image src="@/static/icon/msg-icon.png" v-if="importTabs === 1" mode="widthFix"></image>
+            </view>
+            <block v-if="importTabs === 0">
+                <button type="default" class="chat-mp3" hover-class="chat-hover" @touchstart="startAudio" @touchend="chendAudio">按住 说话</button>
+            </block>
+            <block v-if="importTabs === 1">
+                <input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send" cursor-spacing="10" />
+            </block>
             <button class="chat-push" :disabled="disabled" size="mini" @click="send">发送</button>
         </view>
+        
+        <!-- 录音中提示 -->
+        <view class="audio-transcribe" v-if="showAudioTranscribe">
+            <image src="@/static/icon/record-icon.png" mode="widthFix"></image>
+            <view class="text">录音中 {{transcribeTime}} s</view>
+        </view>
     </view>
 </template>
 
 <script>
     import * as RongIMLib from '@rongcloud/imlib-uni'
     import im from '@/utils/im/index.js'
+    import permision from "@/js_sdk/wa-permission/permission.js"
+    
+    var transcribe
+    var recorderManager = uni.getRecorderManager()
 
     export default {
         data() {
@@ -47,7 +70,10 @@
                     name: '',
                     userId: '',
                     portraitUrl: ''
-                }
+                },
+                importTabs: 0,
+                showAudioTranscribe:false,
+                transcribeTime: 60
             }
         },
         onLoad(e) {
@@ -80,6 +106,12 @@
                     this.getMessageList()
                 }
             })
+            
+            // 监听录音结束
+            recorderManager.onStop(res => {
+                console.log('------------------获取到了录音的临时路径---------------')
+                console.log(res.tempFilePath)
+            })
         },
         onUnload() {
             RongIMLib.clearReadReceiptReceivedListener()
@@ -119,6 +151,52 @@
             }
         },
         methods: {
+            // 检查录制权限
+            async getAndroidPermission(){
+                return await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')
+            },
+            // 切换聊天信息
+            msgType(){
+                this.importTabs = this.importTabs === 1 ? 0: 1
+            },
+            // 录制语音消息
+            startAudio(e){
+                this.getAndroidPermission().then(code => {
+                    console.log(code)
+                    switch (code){
+                        case 1:
+                            this.showAudioTranscribe = true
+                            recorderManager.start()
+                            transcribe = setInterval(() => {
+                                this.transcribeTime -= 1
+                                if(this.transcribeTime === 0){
+                                    this.chendAudio()
+                                }
+                            },1000)
+                            break;
+                        case 0:
+                            uni.showToast({
+                                title: '暂无麦克风权限，请前往应用设置开启麦克风',
+                                icon : 'none'
+                            })
+                            break;
+                        case -1:
+                            uni.showToast({
+                                title: '应用权限错误',
+                                icon : 'none'
+                            })
+                            break;
+                    }
+                })
+            },
+            // 结束录音
+            chendAudio(e){
+                if(!this.showAudioTranscribe) return
+                recorderManager.stop()
+                clearInterval(transcribe)
+                this.transcribeTime = 60
+                this.showAudioTranscribe = false
+            },
             getMessageList() {
                 // 获取消息列表
                 const objectNames = [
@@ -195,6 +273,31 @@
         height: 100vh;
         background: $window-color;
         
+        .audio-transcribe{
+            background: rgba($color: #000000, $alpha: .6);
+            position: fixed;
+            height: 200rpx;
+            width: 300rpx;
+            border-radius: $radius;
+            color: white;
+            z-index: 99;
+            top: 50%;
+            left: 50%;
+            margin-top: -200rpx;
+            margin-left: -150rpx;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            image{
+                width: 88rpx;
+                height: 88rpx;
+            }
+            .text{
+                font-size: $title-size-m;
+            }
+        }
+
         .chat-scrool {
             height: calc(100vh - 140rpx);
             box-sizing: border-box;
@@ -224,7 +327,6 @@
 
                     .chat-msg {
                         overflow: hidden;
-
                         .chat-msg-text {
                             display: inline-block;
                             padding: ($padding - 10) $padding;
@@ -232,6 +334,16 @@
                             box-sizing: border-box;
                             font-size: $title-size-lg;
                         }
+                        .chat-msg-audio{
+                            @extend .chat-msg-text;
+                            width: 50%;
+                            image{
+                                width: 38rpx;
+                                height: 38rpx;
+                                margin: 0;
+                                vertical-align: middle;
+                            }
+                        }
                     }
 
                     .chat-status {
@@ -248,13 +360,13 @@
                         position: absolute;
                         top: 0;
                         background: white;
+                        border-radius: $radius-m;
                     }
 
                     &.left {
                         .chat-avatar {
                             left: $margin;
                         }
-
                         .chat-msg {
                             .chat-msg-text {
                                 background-color: white;
@@ -270,7 +382,6 @@
 
                         .chat-msg {
                             text-align: right;
-
                             .chat-msg-text {
                                 border-radius: $radius*2 0 $radius*2 $radius*2;
                                 background: $main-color;
@@ -288,11 +399,22 @@
             left: 0;
             right: 0;
             height: 140rpx;
-            padding: 20rpx ($padding + 150rpx) 40rpx $padding;
+            padding: 20rpx ($padding + 150rpx) 40rpx ($padding + 94rpx);
             background: white;
             box-sizing: border-box;
             z-index: 99;
-
+            .msg-type{
+                position: absolute;
+                top: 20rpx;
+                left: $padding;
+                line-height: 80rpx;
+                image{
+                    width: 64rpx;
+                    height: 64rpx;
+                    vertical-align: middle;
+                    margin-bottom: 10rpx;
+                }
+            }
             .chat-input {
                 background: $window-color;
                 height: 80rpx;
@@ -302,6 +424,23 @@
                 box-sizing: border-box;
             }
             
+            .chat-mp3{
+                background: $window-color;
+                line-height: 80rpx;
+                text-align: center;
+                border-radius: $radius-lg;
+                font-weight: bold;
+                color: #333;
+                font-size: $title-size-m;
+                &::after{
+                    display: none;
+                }
+            }
+            
+            .chat-hover{
+                opacity: .5;
+            }
+
             .chat-push[size='mini'] {
                 position: absolute;
                 right: $margin;
@@ -318,7 +457,7 @@
                 font-weight: bold;
 
                 &[disabled] {
-                    background: $uni-bg-color-grey;
+                    background: rgba($color: $main-color, $alpha: .5);
                 }
 
                 &::after {