微信小程序入坑后放弃（二十二）：底部评论框完美适配安卓与iOS

摘要：
无论是在常规的H5页面中，还是在微信小程序环境下，底部输入框的设计始终是一个较为棘手的问题，主要在于键盘在特定场景下可能会部分遮挡输入区域。令人欣慰的是，在微信小程序开发过程中，我们能够通过监听bindfocus事件来获取键盘的高度信息，并据此动态计算输入框距离屏幕顶部的垂直位置，从而有效解决这一问题。

大纲

• • 一、需求

    • 二、暗与光

    • 三、手动编写示例代码

    • • 3.1、需求解析
      • 3.2、模块封装
      • 3.3、调用模块

    • 四、示例代码源文件

    • 五、补充说明

一、需求

在年前，企业所开发的小程序中引入了用户评论功能的新需求，其界面效果如下所示。如图：小程序中有一个写评论的需求.png

二、黑暗与光明的对比分析

有过移动端H5页面开发经验的开发者都清楚，底部输入框的设计确实令人头疼。在常规的移动端H5页面中，若想获取软键盘的高度或监听页面resize事件的变化，初衷虽好，但实际操作却困难重重。尤其是在苹果设备上，底部输入框常常会被系