La123123.
/
im-backed
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

适配ios小程序

master
xsx 7 months ago
parent
e2a7615468
commit
24ea5fd2d3
5 changed files with 266 additions and 225 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22
      im-uniapp/App.vue
  2. 12
      im-uniapp/components/chat-message-item/chat-message-item.vue
  3. 7
      im-uniapp/components/nav-bar/nav-bar.vue
  4. 10
      im-uniapp/pages.json
  5. 68
      im-uniapp/pages/chat/chat-box.vue

22
im-uniapp/App.vue
View File

@ -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;

12
im-uniapp/components/chat-message-item/chat-message-item.vue
View File

@ -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>

7
im-uniapp/components/nav-bar/nav-bar.vue
View File

@ -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>

10
im-uniapp/pages.json
View File

@ -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"
},

68
im-uniapp/pages/chat/chat-box.vue
View File

@ -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"
:onError="onUploadImageFail">
<image-upload sourceType="camera" :onBefore="onUploadImageBefore"
: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需要减去状态栏高度
h -= uni.getSystemInfoSync().statusBarHeight;
// APP需要减去状态栏高度
// #ifdef APP-PLUS
h -= sysInfo.statusBarHeight;
// #endif
this.chatMainHeight = h;
if (this.isShowKeyBoard || this.chatTabBox != 'none') {
this.scrollToBottom();
}
// #ifndef APP
// 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: 20rpx;
padding: 40rpx;
box-sizing: border-box;
.emotion-item-list {

Write Preview
Loading…
Cancel
Save