适配ios小程序

im-uniapp/App.vue

@@ -492,6 +492,9 @@ uni-page-head {
 }
 
 // #endif
+page {
+	background-color: $im-bg;
+}
 
 .tab-page {
 	position: relative;
@@ -502,9 +505,15 @@ uni-page-head {
 	top: $im-nav-bar-height;
 	// #endif
 
-	// #ifndef H5
+	// #ifdef APP-PLUS
 	height: calc(100vh - var(--status-bar-height) - $im-nav-bar-height); // app平台还要减去顶部手机状态栏高度
 	top: calc($im-nav-bar-height + var(--status-bar-height));
+	// #endif
+
+	// #ifdef MP-WEIXIN
+	height: calc(100vh - $im-nav-bar-height);
+	top: $im-nav-bar-height;
+
 	// #endif
 	color: $im-text-color;
 	background-color: $im-bg;
@@ -515,13 +524,20 @@ uni-page-head {
 .page {
 	position: relative;
 	// #ifdef H5
-	height: calc(100vh - $im-nav-bar-height); // app平台还要减去顶部手机状态栏高度
+	height: calc(100vh - $im-nav-bar-height); // h5平台100vh是包含了底部高度，需要减去
 	top: $im-nav-bar-height;
 	// #endif
-	// #ifndef H5
+
+	// #ifdef APP-PLUS
 	height: calc(100vh - var(--status-bar-height) - $im-nav-bar-height); // app平台还要减去顶部手机状态栏高度
 	top: calc($im-nav-bar-height + var(--status-bar-height));
 	// #endif
+
+	// #ifdef MP-WEIXIN
+	height: calc(100vh - $im-nav-bar-height);
+	top: $im-nav-bar-height;
+	// #endif
+	
 	color: $im-text-color;
 	background-color: $im-bg;
 	font-size: $im-font-size;

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

@@ -56,12 +56,6 @@
 								<text v-if="audioPlayState == 'PLAYING'" class="iconfont icon-pause"></text>
 							</view>
 						</long-press-menu>
-						<view v-if="sending&&isTextMessage" class="sending">
-							<loading :size="40" icon-color="#656adf" :mask="false"></loading>
-						</view>
-						<view v-else-if="sendFail" @click="onSendFail"
-							class="send-fail iconfont icon-warning-circle-fill"></view>
-					</view>
 						<long-press-menu v-if="isAction" :items="menuItems" @select="onSelectMenu">
 							<view class="chat-realtime message-text" @click="$emit('call')">
 								<text v-if="msgInfo.type == $enums.MESSAGE_TYPE.ACT_RT_VOICE"
@@ -71,6 +65,12 @@
 								<text>{{ msgInfo.content }}</text>
 							</view>
 						</long-press-menu>
+						<view v-if="sending&&isTextMessage" class="sending">
+							<loading :size="40" icon-color="#656adf" :mask="false"></loading>
+						</view>
+						<view v-else-if="sendFail" @click="onSendFail"
+							class="send-fail iconfont icon-warning-circle-fill"></view>
+					</view>
 					<view class="message-status" v-if="!isAction && msgInfo.selfSend && !msgInfo.groupId">
 						<text class="chat-readed" v-if="msgInfo.status == $enums.MESSAGE_STATUS.READED">已读</text>
 						<text class="chat-unread" v-else>未读</text>

im-uniapp/components/nav-bar/nav-bar.vue

@@ -1,19 +1,22 @@
 <template>
 	<view class="im-nav-bar">
-    <!-- #ifndef H5 -->
+		<!-- #ifdef APP-PLUS -->
 		<view style="height: var(--status-bar-height)"></view>
 		<!-- #endif -->
 		<view class="im-nav-bar-content">
+			<!-- #ifndef MP-WEIXIN -->
 			<view class="back" @click="handleBackClick" v-if="back">
 				<uni-icons type="back" :size="iconFontSize"></uni-icons>
 			</view>
+			<!-- #endif -->
 			<view class="title" v-if="title">
 				<slot></slot>
 			</view>
 			<view class="btn">
 				<uni-icons class="btn-item" v-if="search" type="search" :size="iconFontSize"
 					@click="$emit('search')"></uni-icons>
-        <uni-icons class="btn-item" v-if="add" type="plusempty" :size="iconFontSize" @click="$emit('add')"></uni-icons>
+				<uni-icons class="btn-item" v-if="add" type="plusempty" :size="iconFontSize"
+					@click="$emit('add')"></uni-icons>
 				<uni-icons class="btn-item" v-if="more" type="more-filled" :size="iconFontSize"
 					@click="$emit('more')"></uni-icons>
 			</view>

im-uniapp/pages.json

@@ -30,7 +30,9 @@
 		{
 			"path": "pages/chat/chat-box",
 			"style": {
-				"navigationStyle": "custom",
+				"mp-weixin": {
+					"disableScroll": true
+				},
 				"app-plus": {
 					// adjustPan窗体高度不变，但窗体上推、adjustResize屏幕高度=webview窗体高度+软键盘高度
 					"softinputMode": "adjustResize"
@@ -67,7 +69,13 @@
 	],
 	"globalStyle": {
 		"navigationBarTitleText": "盒子IM",
+		"navigationBarTextStyle": "black",
+		/*  #ifndef MP-WEIXIN */
 		"navigationStyle": "custom",
+		/* #endif */
+		/*  #ifdef MP-WEIXIN */
+		"navigationStyle": "default",
+		/* #endif */
 		"navigationBarBackgroundColor": "#f7f7f7",
 		"backgroundColor": "#f7f7f7"
 	},

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

@@ -50,7 +50,8 @@
 			</view>
 		</view>
 		<view class="chat-tab-bar">
-			<view v-if="chatTabBox == 'tools'" class="chat-tools" :style="{height: keyboardHeight+'px'}">
+			<scroll-view v-if="chatTabBox == 'tools'" class="chat-tools" :style="{height: keyboardHeight+'px'}">
+				<view class="chat-tools-list">
 					<view class="chat-tools-item">
 						<file-upload ref="fileUpload" :onBefore="onUploadFileBefore" :onSuccess="onUploadFileSuccess"
 							:onError="onUploadFileFail">
@@ -66,8 +67,8 @@
 						<view class="tool-name">相册</view>
 					</view>
 					<view class="chat-tools-item">
-					<image-upload sourceType="camera" :onBefore="onUploadImageBefore" :onSuccess="onUploadImageSuccess"
+						<image-upload sourceType="camera" :onBefore="onUploadImageBefore"
-						:onError="onUploadImageFail">
+							:onSuccess="onUploadImageSuccess" :onError="onUploadImageFail">
 							<view class="tool-icon iconfont icon-camera"></view>
 						</image-upload>
 						<view class="tool-name">拍摄</view>
@@ -76,7 +77,8 @@
 						<view class="tool-icon iconfont icon-microphone"></view>
 						<view class="tool-name">语音消息</view>
 					</view>
-				<view v-if="chat.type == 'GROUP' && memberSize<=500" class="chat-tools-item" @click="switchReceipt()">
+					<view v-if="chat.type == 'GROUP' && memberSize<=500" class="chat-tools-item"
+						@click="switchReceipt()">
 						<view class="tool-icon iconfont icon-receipt" :class="isReceipt ? 'active' : ''"></view>
 						<view class="tool-name">回执消息</view>
 					</view>
@@ -96,6 +98,7 @@
 					</view>
 					<!-- #endif -->
 				</view>
+			</scroll-view>
 			<scroll-view v-if="chatTabBox === 'emo'" class="chat-emotion" scroll-y="true"
 				:style="{height: keyboardHeight+'px'}">
 				<view class="emotion-item-list">
@@ -133,6 +136,7 @@ export default {
 			showRecord: false,
 			chatMainHeight: 800, // 聊天窗口高度
 			keyboardHeight: 290, // 键盘高度
+			screenHeight: 1000, // 屏幕高度
 			windowHeight: 1000, // 窗口高度
 			initHeight: 1000, // h5初始高度
 			atUserIds: [],
@@ -393,11 +397,13 @@ export default {
 			this.switchChatTabBox('tools')
 		},
 		switchChatTabBox(chatTabBox) {
+			if (this.chatTabBox != chatTabBox) {
 				this.chatTabBox = chatTabBox;
-			this.reCalChatMainHeight();
 				if (chatTabBox != 'tools' && this.$refs.fileUpload) {
 					this.$refs.fileUpload.hide()
 				}
+				setTimeout(() => this.reCalChatMainHeight(), 30);
+			}
 		},
 		selectEmoji(emoText) {
 			let path = this.$emo.textToPath(emoText)
@@ -815,25 +821,29 @@ export default {
 			}
 		},
 		reCalChatMainHeight() {
-			setTimeout(() => {
+			let sysInfo = uni.getSystemInfoSync();
 			let h = this.windowHeight;
 			// 减去标题栏高度
 			h -= 50;
 			// 减去键盘高度
 			if (this.isShowKeyBoard || this.chatTabBox != 'none') {
+				// ios app的键盘高度不准，需要减去屏幕和窗口差
+				// #ifdef APP-PLUS
+				if (sysInfo.platform == 'ios') {
+					h += this.screenHeight - this.windowHeight;
+				}
+				// #endif
 				h -= this.keyboardHeight;
 				this.scrollToBottom();
 			}
-				// #ifndef H5
+
-				// h5需要减去状态栏高度
+			// APP需要减去状态栏高度
-				h -= uni.getSystemInfoSync().statusBarHeight;
+			// #ifdef APP-PLUS
+			h -= sysInfo.statusBarHeight;
 			// #endif
 			this.chatMainHeight = h;
-				if (this.isShowKeyBoard || this.chatTabBox != 'none') {
+			// #ifndef APP
-					this.scrollToBottom();
-				}
 			// ios浏览器键盘把页面顶起后，页面长度不会变化，这里把页面拉到顶部适配一下
-				// #ifdef H5
 			if (uni.getSystemInfoSync().platform == 'ios') {
 				// 不同手机需要的延时时间不一致，采用分段延时的方式处理
 				const delays = [50, 100, 500];
@@ -847,7 +857,6 @@ export default {
 				})
 			}
 			// #endif
-			}, 30)
 		},
 		listenKeyBoard() {
 			// #ifdef H5	
@@ -889,7 +898,7 @@ export default {
 			if (this.isShowKeyBoard) {
 				this.keyboardHeight = res.height; // 获取并保存键盘高度
 			}
-			this.reCalChatMainHeight();
+			setTimeout(() => this.reCalChatMainHeight(), 30);
 		},
 		resizeListener() {
 			let keyboardHeight = this.initHeight - window.innerHeight;
@@ -902,15 +911,15 @@ export default {
 			if (this.isShowKeyBoard) {
 				this.keyboardHeight = keyboardHeight;
 			}
-			this.reCalChatMainHeight();
+			setTimeout(() => this.reCalChatMainHeight(), 30);
 		},
 		focusInListener() {
 			this.isShowKeyBoard = true;
-			this.reCalChatMainHeight();
+			setTimeout(() => this.reCalChatMainHeight(), 30);
 		},
 		focusOutListener() {
 			this.isShowKeyBoard = false;
-			this.reCalChatMainHeight();
+			setTimeout(() => this.reCalChatMainHeight(), 30);
 		},
 		showBannedTip() {
 			let msgInfo = {
@@ -1082,7 +1091,11 @@ export default {
 		// 监听键盘高度
 		this.listenKeyBoard();
 		// 计算聊天窗口高度
+		this.windowHeight = uni.getSystemInfoSync().windowHeight;
+		this.screenHeight = uni.getSystemInfoSync().screenHeight;
+		this.reCalChatMainHeight();
 		this.$nextTick(() => {
+			// 上面获取的windowHeight可能不准，重新计算一次聊天窗口高度
 			this.windowHeight = uni.getSystemInfoSync().windowHeight;
 			this.reCalChatMainHeight();
 			this.scrollToBottom();
@@ -1132,10 +1145,10 @@ export default {
 	}
 
 	.chat-main-box {
-		// #ifdef H5
+		// #ifndef APP-PLUS
 		top: $im-nav-bar-height;
 		// #endif
-		// #ifndef H5
+		// #ifdef APP-PLUS
 		top: calc($im-nav-bar-height + var(--status-bar-height));
 		// #endif
 		position: fixed;
@@ -1206,7 +1219,7 @@ export default {
 			border-top: $im-border solid 1px;
 			background-color: $im-bg;
 			min-height: 80rpx;
-			margin-bottom: 14rpx;
+			padding-bottom: 14rpx;
 
 			.iconfont {
 				font-size: 60rpx;
@@ -1250,13 +1263,14 @@ export default {
 		background-color: $im-bg;
 
 		.chat-tools {
-			display: flex;
-			flex-wrap: wrap;
-			align-items: top;
-			height: 310px;
 			padding: 40rpx;
 			box-sizing: border-box;
 
+			.chat-tools-list {
+				display: flex;
+				flex-wrap: wrap;
+				align-content: center;
+
 				.chat-tools-item {
 					width: 25%;
 					padding: 16rpx;
@@ -1284,10 +1298,10 @@ export default {
 					}
 				}
 			}
+		}
 
 		.chat-emotion {
-			height: 310px;
+			padding: 40rpx;
-			padding: 20rpx;
 			box-sizing: border-box;
 
 			.emotion-item-list {