uniapp之app、微信小程序实现输入框发送消息键盘不收起、解决iOS端键盘弹起 ...

1. 效果

微信小程序：

iOS app

 
2. 配景

        公司产品近来提了个bug需求，聊天界面在发送一次消息后，键盘会收起，渴望是：点击发送消息后，键盘不收起。得到这个需求时，组长就跟我说过这个需求欠好做，真的做了后才发现随处是坑，断断续续做了4天，网上资料也找了并试了一堆，都是按下葫芦起了瓢，就Android端的APP符合要求，第4天预备下班了，突然就找到思路了，终极四个场景都符合要求，至于差别机型差别体系版本是否还存在什么问题，就没那条件去试了。
        我们这个uniapp项目是app、微信小程序两头的，聊天界面用的是某IM产品提供uniapp版本的demo代码，不知道是技术问题没做好，还是太久没去更新了，修改时问题不断，iOS原生版本是挺符合需求的。（最坑的一点是：消息列表组件用的是view元素，但元素里却挂了一堆scroll-view元素的属性，界面跳转至最新一条消息也是用scroll-view的属性实现。属实把我整迷糊了，官方文档也翻了好几遍也没找到对应属性，搞得我还在猜疑是不是view的某些埋伏属性，但官方没列出来。让我多进了几个坑，后面的解决方案也是从这方面入手）
3. 主要遇到问题及尝试失败的解决

（1）小程序端使用设置focus属性的方式去处理，出现闪动。
        这个方案每发送一次消息，都会有键盘收起再弹起的情况，这种方案被否定。

（2）iOS键盘遮挡输入框、消息列表最新几条消息。 
ios键盘弹起时是符合要求的（输入框跟随弹起、输入框上显示的也是消息列表的最新一条数据），发送一条消息后，输入框(用的是fixed)、消息列表都掉下去被键盘遮住，多发几条消息后，输入框会移上往返到正确位置，消息列表的消息虽然会往上滚动，但最新几条被键盘遮住。
主要就是在输入框位置显示有问题、消息列表最新数据被键盘遮住（显示在手机屏幕底部）、发送消息时消息列表中的数据未向上滚动这三个问题中反复摇摆。
列出部分尝试：

• 将adjust-position设置为false，通过uni.onKeyboardHeightChange监听键盘弹出得到键盘高度，从而动态给输入框设置bottom属性的值，给消息列表设置底部内边距。（结果：输入框位置能正确显示，但键盘弹起时向上滑动消息列表，输入框会跟着界面向上滑动；消息列表顶不上去，只会往下增长空缺页面）
  
  
  
• 为处理第1步中输入框会滑动的问题，尝试通过监听最外层元素的touchmove、touchstart事件，在事件触发时调用uni.hideKeyboard()将键盘收起。（结果：键盘弹出后的第1次滑动、点击时，事件没有触发，好像有层膜存在一样，输入框继续跟着上滑；再次滑动、点击，事件触发，键盘关闭）
  

4. 终极解决

        主要是使用scroll-view元向来实现消息列表界面，输入框使用fixed定位。之前虽然在demo代码的view上看到一堆scroll-view元素的属性，也猜疑对方之前用的是scroll-view，但为了通过onPullDownRefresh实现下拉加载历史消息功能，而改成了view。这我也能理解，毕竟使用scroll-view，onPullDownRefresh就无法被触发，也没去细研究scroll-view中的相关属性，毕竟公司的主要项目是在PC端，app、微信小程序能用就行，会uniapp的根本语法就够用了（吐槽一下，被这些问题折磨的不轻）。
        言归正传，主要要实现的是：
1、小程序发送消息后，键盘不收起，也不接收键盘收起再弹起。
2、iOS键盘弹起时输入框不被遮住、消息列表能看到最新一条。
目的1解决：
在小程序中将textarea的hold-keyboard设置为true。

此时能实现目的1要求，但还需要保留点击输入框、发送按钮之外的地方，键盘收起功能。
给最外层元素、输入框、发送按钮分别绑定touchend事件，在点击界面中时，最外层的事件会触发（handleTouchEnd），此时调用uni.hideKeyboard()将键盘收起。
假如点击的是输入框、发送按钮，它两的事件的触发会先于最外层元素的事件的触发，在它两事件触发时，通过一个标志holdKeyboardFlag变量，让uni.hideKeyboard()不执行即可。

为什么用touchend事件，而不消touchstart等其他事件，这是因为@touchend.prevent="sendMessage"可以使输入框在点击发送后，输入框重新得到核心并且不会出现闪动（虽然只对app、h5有用，对小程序无效）。为了不再增长额外的处理，就统一用touchend。

 目的2解决：
view元素更换成scroll-view元素后就能实现目的要求。但这样会出现无法下拉加载历史消息的问题，所以要再去实现下拉加载功能。实当代码，如下图：

 还有界面滚动至最新一条消息时的一个小坑就不写了，直接看示例代码，项目的代码是分了好几个组件，示例代码主要展示的是核心实现。样式什么的能用就行。
以下是重新整理后的示例代码：

1. <template>
2.   <view class="page" @touchend="handleTouchEnd">
3.     <!-- 消息列表区域 -->
4.     <view class="area-msglist">
5.       <!--
6.         用于替代实现onPullDownRefresh()效果
8.         :refresher-enabled="true"
9.         :refresher-threshold="50"
10.         refresher-default-style="white"
11.         :refresher-triggered="isFresh"
12.         refresher-background="#FAFAFA"
13.         @refresherrestore="onRestore"
14.         @refresherrefresh="scrollRefresh"
15.         :enable-back-to-top="true"
16.       -->
17.       <scroll-view
18.         class="msglist"
19.         :refresher-enabled="true"
20.         :refresher-threshold="50"
21.         refresher-default-style="white"
22.         :refresher-triggered="isFresh"
23.         refresher-background="#FAFAFA"
24.         @refresherrestore="onRestore"
25.         @refresherrefresh="scrollRefresh"
26.         :enable-back-to-top="true"
27.         :scroll-y="true"
28.         upper-threshold="-50"
29.         :scroll-into-view="intoViewId"
30.         :scroll-with-animation="true">
31.         <!-- 具体信息代码 -->
32.         <!-- mid示例：msg1234545 -->
33.         <view class="message" v-for="item in chatMsgList" :key="item.mid" :id="item.mid">
34.           <view>{{item.msg}}</view>
35.         </view>
36.       </scroll-view>
37.     </view>
38.     <!-- 输入框区域 -->
39.     <view class="area-input">
40.       <!-- 发送语音 -->
41.       <view>
42.         <image class="icon-mic" src="/package-user/static/voice.png" />
43.       </view>
44.       <!-- 输入框 -->
45.       <textarea
46.         class="textarea"
47.         type="text"
48.         cursor-spacing="65"
49.         confirm-type='done'
50.         v-model="inputMessage"
51.         @confirm="sendMessage"
52.         @touchend="handleNoHideKeyboard"
53.         :confirm-hold="true"
54.         auto-height
55.         :show-confirm-bar='false'
56.         :hold-keyboard="holdKeyboard"
57.         maxlength="300"
58.       />
59.       <!-- 表情 -->
60.       <view>
61.         <image class="icon-mic" src="/package-user/static/Emoji.png" />
62.       </view>
63.       <!-- 更多 -->
64.       <view v-show="!inputMessage">
65.         <image class="icon-mic" src="/package-user/static/ad.png" />
66.       </view>
67.       <button
68.         v-show="inputMessage"
69.         class="send-btn"
70.         hover-class='hover'
71.         @touchend.prevent="sendMessage"
72.       >发送</button>
73.     </view>
74.   </view>
75. </template>
77. <script>
78. export default {
79.   name: 'ChatDemo',
80.   data() {
81.     return {
82.       isFresh:false, // 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
83.       freshing:false,
84.       intoViewId: "",
85.       chatMsgList: [],
88.       inputMessage: "",
89.       holdKeyboard: false, // focus时，点击页面的时候不收起键盘
90.       holdKeyboardFlag: true, // 是否在键盘弹出，点击界面时关闭键盘
91.     }
92.   },
93.   created() {
94.     // 针对小程序键盘收起问题处理
95.     // #ifdef MP-WEIXIN
96.     this.holdKeyboard = true
97.                 // #endif
98.   },
99.   mounted() {
100.     this.init()
101.   },
102.   methods: {
103.     init() {
104.       for (let i = 0; i < 12; i++) {
105.         this.chatMsgList.push({
106.           mid: `msg${i}`,
107.           msg: `消息${i}`
108.         })
109.       }
110.       this.refreshMsg()
111.     },
113.     // 针对小程序键盘收起问题处理
114.                 handleTouchEnd() {
115.                         // #ifdef MP-WEIXIN
116.                         clearTimeout(this.timer)
117.                         this.timer = setTimeout(() => {
118.                                 // 键盘弹出时点击界面则关闭键盘
119.                                 if (this.holdKeyboardFlag) {
120.                                         uni.hideKeyboard()
121.                                 }
122.                                 this.holdKeyboardFlag = true
123.                         }, 50)
124.                         // #endif
125.                 },
127.     // 自定义下拉刷新被触发
128.     scrollRefresh(){
129.       if (this.freshing) return;
130.       this.freshing = true;
131.       this.isFresh = true;
132.       this.$emit('refresh');
133.       this.getHistoryMsg()
134.                 },
135.     // 自定义下拉刷新被复位
136.                 onRestore(){
137.                         this.isFresh = false
138.                 },
139.     // 获取历史数据
140.     getHistoryMsg() {
141.       const mid = ''
142.       this.handleScrollIntoView(mid)
143.     },
144.     // 刷新界面数据
145.     async refreshMsg() {
146.       const mid = this.chatMsgList[this.chatMsgList.length - 1].mid // 目标元素id
147.       // 跳到最后一条
148.       this.handleScrollIntoView(mid)
149.     },
150.     sleep(num = 1, step = 50) {
151.       return new Promise((resolve) => {
152.         setTimeout(() => {
153.           resolve()
154.         }, num * step)
155.       })
156.     },
157.     // 查找目标元素
158.     querySelectEl(markers) {
159.       const that = this
160.       return new Promise((resolve) => {
161.         uni.createSelectorQuery().in(that).select(markers).boundingClientRect((container) => {
162.           console.log(container, 888);
163.           const flag = container ? true : false
164.           resolve(flag)
165.         }).exec()
166.       })
167.     },
168.     // 滚动至目标元素位置
169.     async handleScrollIntoView(intoViewId) {
170.       let flag = false
171.       for (let i = 0; i < 20; i++) {
172.         flag = await this.querySelectEl(`#${intoViewId}`)
173.         if(flag) {
174.           break
175.         }
176.         await this.sleep()
177.       }
178.       // 在查询到目标元素存在后，再进行滚动操作
179.       // 直接用nextTick在iOS端是可以的；但在android端界面重新渲染时，首次可能找不到符合id的元素，导致未能正确滚动
180.       if (!flag) return
181.       this.$nextTick(() => {
182.         this.intoViewId = intoViewId
183.       })
184.     },
186.     // 点击输入框、发送按钮时，不收键盘
187.     handleNoHideKeyboard() {
188.       // #ifdef MP-WEIXIN
189.       // this.$emit('noHideKeyboard')
190.       this.holdKeyboardFlag = false
191.       // #endif
192.     },
193.     // 发送消息
194.     sendMessage() {
195.       this.handleNoHideKeyboard()
196.       // 发送消息代码
197.       this.chatMsgList.push({
198.         mid: `msg${this.chatMsgList.length}`,
199.         msg: `新消息${this.inputMessage}`
200.       })
201.       this.inputMessage = ''
202.       this.refreshMsg()
203.     },
204.   }
205. }
206. </script>
208. <style lang="scss" scoped>
209. .page {
210.   width: 100%;
211.         height: 100%;
212. }
213. .area-msglist {
214.   width: 100vw;
215.         height: 100vh;
216.   .msglist {
217.     background-color: #FAFAFA;
218.     height: calc(100vh - 80rpx);
219.   }
220. }
221. .message {
222.         padding: 20rpx;
223.   margin-top: 40rpx;
224.   line-height: 3;
225.   text-align: end;
226. }
228. /* 解决小程序和app当前界面滚动条不出现的问题 */
229. ::v-deep ::-webkit-scrollbar {
230.   /*滚动条整体样式*/
231.   width: 5px !important;
232.   height: 1px !important;
233.   overflow: auto !important;
234.   background: #ccc !important;
235.   -webkit-appearance: auto !important;
236.   display: block;
237. }
239. ::v-deep ::-webkit-scrollbar-thumb {
240.   /*滚动条里面小方块*/
241.   border-radius: 10px !important;
242.   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
243.   background: #ccc !important;
244. }
246. ::v-deep ::-webkit-scrollbar-track {
247.   /*滚动条里面轨道*/
248.   background: #FFFFFF !important;
249. }
251. .area-input {
252.   width: 100%;
253.   height: auto;
254.         position: fixed; // 用的是fixed布局
255.         bottom: 0;
256.         right: 0;
257.         z-index: 1;
258.   
259.   padding: 0;
260.         display:flex;
261.         align-items:center;
262.         background-color: #f2f2f2;
263. }
265. .icon-mic{
266.         width: 22px;
267.   height: 22px;
268.         padding: 5px 10px;
269.         position: relative;
270.         top: 2px;
271. }
272. .textarea {
273.         width: 100%;
274.         font-size: 14px;
275.         padding: 0 10px;
276.         display: inline-block;
277.         margin: 10rpx;
278.         line-height: 48rpx;
279.         position:relative;
280.         top: 0;
281.         background-color: #fff;
282.         border-radius: 16px;
283.         flex: 1;
284.         max-height: 200rpx;
285.         min-height: 60rpx;
286. }
287. .send-btn {
288.         font-size: 10px;
289.         background-color: #2196F3;
290.         color: #fff;
291.   margin-right: 10px;
292. }
293. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。