微信小程序从入坑到放弃二十二：完美兼容安卓和ios手机的底部评论框

摘要：
不管是在普通的H5页面还是在微信小程序中，底部输入框一直是一大难题，因为键盘会在某些情况下遮挡信输入框一部分！值得庆幸的是：在微信小程序中，我们可以通过监听bindfocus来获取键盘的高度，动态算出输入框距离屏幕顶部的距离…

一、需求

年前，公司的小程序中新增了一个用户评论的需求，效果图长这个样子。如图：小程序中有一个写评论的需求.png

二、黑暗和光明

搞过底部输入框的看官都知道，这玩意儿真的是太坑了！在普通的移动端H5页面中，想监听软键盘高度？想监听页面的resize变化？想法总是美好的，但实现起来，哼，别做梦了！特别是在苹果手机上，底部的输入框时不时会被系统软键盘遮挡！即使不被系统键盘挡住，在某些低版本的微信上，可能还会出现键盘不见了，输入框在半空中的尴尬场景（经测试跟css布局也有关系）！ 关键是，前端目前的解决方案也挺鸡肋的！比较幸运的是：微信小程序中提供了监听软键盘高度的bindfocus方法，这样一来，我们就离成功更进了一步。

下面，艺灵就为看官们复现上述的demo，最终演示的demo效果如图：演示demo在微信开发者工具中的效果.png
当然了，如果只在微信开发者工具中截图是没有说服力的，必须要在苹果手机上跑代码才行。特意录制了一个小视频，戳下方图片即可播放。戳我播放底部评论框在苹果6手机中的效果.mp4

怎么样，看上面的演示效果还不错吧！下面开始步入今天的主题，看官们准备好了吗？

三、手写demo

3.1、需求分析

写代码前需要做下需求分析，通过在项目中的使用场景来看，这个评论框会出现在多处。比如：资讯下面、名片下面、商品下面… 所以，我们可以把评论框封装成一个通用的组件component，这样无论是修改还是调用都比较方便。

再进一步分析，默认展示的底部输入框在不同的地方样式不一样，但弹层中的输入框是一致的。所以，将弹层和输入框封装成一个组件是最好的选择。至于是资讯的评论还是商品的评论还是名片的评论，接口调用全在外层，组件内只管好自身，数据往外传即可。

好了，需求分析完毕，下面来看下我们的目录结构吧！

// 微信小程序中的目录结构
components /* 组件目录 */
  textarea-fixed-bottom /* 固定在底部的输入框组件目录 */
    index.js /* js文件，交互及逻辑都在这里（可以当成.js来理解） */
    index.json /* json文件，可配置标题、引用组件等 */
    index.wxml /* wxml模板文件，前台展示（可以当成.html来理解） */
    index.wxss /* wxss样式文件（可以当成.css来理解） */