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

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

大纲

一、需求
二、黑暗和光明
三、手写demo
- 3.1、需求分析
- 3.2、组件封装
- 3.3、调用组件
四、demo源码
五、其他说明

一、需求

年前，公司的小程序中新增了一个用户评论的需求，效果图长这个样子。如图：小程序中有一个写评论的需求.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来理解） */
pages /* pages目录 */index /* 首页目录 */index.js /* js文件 */index.json /* json文件 */index.wxml /* wxml模板文件 */index.wxss /* wxss样式文件 */

3.2、组件封装

刚刚已经把目录的结构定了，现在再来仔细的分析下这个弹层页面的交互吧。弹层页面的内容有：半透明背景层、输入框、提交按钮、字数这四样东西。wxss样式比较好实现但也有坑！最难搞的还是.js，下面继续分析下有哪些js事件。

bindfocus：输入框获取焦点，同时可监听软键盘高度
bindblur：输入框失去焦点，用于关闭弹层；
bindinput：监听输入框，用于时时显示字数；
bindconfirm：监听键盘上的完成按钮（此demo中禁用完成按钮的显示）；
bindkeyboardheightchange：监听键盘高度发生变化（此demo中也未使用）
输入框相关的js事件就没有了，但并不表示以上事件就能满足需求！比如：点击半透明背景时需要关闭弹层，点击非输入框区域时也需要关闭弹层，还有滑动屏幕时也需要关闭弹层[:笑哭]。此时，我们还需要再添加两个js事件，分别是：
catchtap：绑定并阻止事件冒泡；
catchtouchmove：阻止穿透滚动；

现在基本上差不多了，但没有完。我们还需要检测用户使用的是安卓机还是苹果机，毕竟官方的textarea是有个巨坑的！参见2018年的一篇文章《微信小程序从入坑到放弃之坑八：textarea在苹果手机中的大Bug》，由于文章写的比较早，不够详细，待明天再补发一篇。检测用户的机型可以使用wx.getSystemInfo这个API，然后判断platform的值即可。由于js代码比较多，此处就不一一粘贴了，完整的及注释都在源码里面，此处就略过。

接下来看下最终的wxml模板页面吧。

// 组件的WXML源码
<view class="popup-evaluation__bg {{info.isShow === true ? 'is__show' : ''}}" catchtap="handleClose" catchtouchmove="handleEvaluationtouchmove"><view class="popup-evaluation-wrap" catchtap="handleEvaluationCatchTap" style="top:{{focusTop}};height:{{domHeight}}"><view class="popup-evaluation__body"><textarea name="evaluation" class="popup-evaluation__textatrea {{platform === 'ios' ? 'textatrea_ios_bug' : ''}}" maxlength="{{maxLength}}" focus="{{info.isShow}}" bindfocus="handleEvaluationFocus" bindinput="handleEvaluationInput" bindconfirm="handleEvaluationConfirm" bindblur="handleEvaluationBlur" show-confirm-bar="{{false}}" adjust-position="{{false}}" value="{{commentsText}}" fixed="{{true}}"> </textarea></view><view class="popup-evaluation__foot"><view class="popup-evaluation__length">{{commentsText.length}} / {{maxLength}}</view><button class="popup-evaluation__button button_theme_primary" type="primary" bindtap="handleEvaluationRelease">发表评论</button></view></view>
</view>

关于wxss样式，推荐fixed + 100vh（背景高度）+ absolute（评论框）的组合，具体的见在下面的源码。切记：最好不要使用wx:if 或 wx:show 或 visible 来控制弹层的显示与隐藏！！！也别问为哈，有兴趣的看官准备几个苹果手机，微信跨几个版本自行体验即可。保证把你坑哭到不要不要的！！！[:调皮]

组件说完了，再来说下如何调用。此处以首页pages/index为例。

3.3、调用组件

首先要修改pages/index/index.json配置文件，源码如下：

// index/index.json
{"usingComponents": {"textareaFixedBottom": "/components/textarea-fixed-bottom/index"},"navigationBarTitleText": "底部评论框"
}

修改后，我们在/pages/index/index.wxml页面上调用textareaFixedBottom即可引入我们前面封装好的评论框组件，源码如下：

// index/index.wxml
<!-- 固定在底部的输入框 start -->
<view class="commentContent" bindtap="handleIsShowComment"><view>写评论...</view>
</view>
<!-- 弹层评论框 start -->
<textareaFixedBottom info="{{popupEvaluation}}" bind:myeventEvaluationRelease="handleEvaluationRelease" bind:myeventEvaluationClose="handleEvaluationClose"></textareaFixedBottom>
<!-- 弹层评论框 end -->
<!-- 固定在底部的输入框 end -->

再写下/pages/index/index.wxss就有点样子了。源码如下：

// index/index.wxss
/* 评论框 yiling 20200408 start */
.commentContent {position: fixed;bottom: 20rpx;left: 20rpx;right: 20rpx;font-size: 24rpx;border: 2rpx solid #f0f0f0;border-radius: 34rpx;padding: 20rpx;color: #999;line-height: 24rpx;
}
/* 评论框 yiling 20200408 end */

由于demo中不方便跟后端通信，所以此处在点击发表评论后，前端直接把数据展示在页面上。最终演示效果见视频：戳我观看兼容苹果手机的评论框模拟发表评论.mp4

怎么样，是不是很赞？喜欢就点个star吧！

四、demo源码

demo源码已上传到了github上，如果看官需要研究源码，可以点击下面的链接进行访问并下载。前往github仓库下载源码

源码中会有必要注释和本篇文章的所有示例。若有疑问可与艺灵联系，方式见下方二维码或右侧。

五、其他说明

原文首发于艺灵设计，转载请注明来源，谢谢。