在小程序中，我们经常会有调音键盘的操作场景，但不同场景的解决方案是不一样的，具体问题还是需要具体分析。

需求分析

最近项目中有一个需求，就是从列表页面点击评论按钮进入详情页时，加载页面后会自动调整键盘进入评论状态。从需求的角度来看，我们应该在onReady函数中调优键盘，因为onReady函数是在页面第一次呈现时调用的。但是在实践中，我们发现对于一些配置较差的手机，页面加载速度较慢，调用onReady函数时页面没有呈现，会导致占位符和输入组件错位。本质原因是onReady生命周期函数不能假设页面在被调用时已经呈现。(虽然文档中的描述已经完成。)

之前的操作是在onReady生命周期功能中调整键盘。

This.setData({ focus: true})发现了此问题，并相应地进行了延迟

Settimeout (()={this。setdata ({focus: true})}，300)但这是一个临时解决方案。手机性能好的用户会不必要地等待300毫秒，而手机性能差的用户不一定会通过等待300毫秒来解决这个问题。

解决方案

所以既然小程序在渲染后没有给我们提供理想的回调函数，那我们就换个思路：用短轮询来处理，然后在页面渲染后开始键盘操作。

既然要使用短轮询，我们应该轮询什么？什么标志表示页面渲染完成？这里我使用了wx.createselectorQuery()方法，这个方法会返回一个selectorQuery对象实例，在这个实例上调用Select方法选择我要轮询的节点，在回调函数中判断参数是否为null。如果返回被监控的节点信息，则渲染完成。这时，键盘可以向上翻。

让timer=setInterval(()={ wx . createselectorquery()。选择(' #comment-section ')。boundingClientRect(rect={ if(rect！==空计时器！==null){ clear interval(timer)timer=null this。setdata ({focus: true})})。exec ()}，50)除此之外，如果我们只是粗暴地让focus为true，这不是一个明智的方法。

当键盘打开时，默认页面将被向上推。如果评论很少，这种体验就不好了。因此，有必要判断一个高度。如果超过这个值，就会被向上推，如果没有超过，就不会被向上推。这个值取决于实际情况。上推操作由输入组件的调整位置属性决定。如果是真的，就推上去，否则就推不上去。这时，回调返回的参数中的节点信息就可以派上用场了。

//判断此之前的节点高度. setdata({ focus : true })if(rect . height 500)this . setdata({ push : false })else this . setdata({ push 3360 true })on bulr函数问题

在实际操作中，我们发现键盘打开后会自动缩回。经过调查，发现onBlur功能有问题。在onBlur函数中，我们手动将焦点设置为false，但实际上并不需要这个操作，但它带来了副作用。我们去掉这部分代码后，键盘自动折叠的问题就解决了。

封装它

虽然我们已经完成了这项任务的要求，但很明显，这样的任务在未来肯定会再次出现。因此，我们应该快速打包整个过程，以便下次可以直接调用。

这时我们使用它的方式是这样的：

Const Util=require('xxx') //引入封装库/* * * lifetime函数-监控页面第一次渲染的完成情况*/OnReady :函数(){util。ontotalready ('# comment-section '，50，The rect={ if(rect . bottom 500)this . setdata({ push : false })else this . setdata({ push : true } } this . setdata({ focus : true })})summary

在解决键盘调优的过程中，我们可以看到微信小程序的开发过程是初级的。这个问题本质上是小程序提供的生命周期函数不够准确。否则，页面渲染完成后，怎么可能得不到节点信息？componentWillMount in react的生命周期函数不会有这样的问题，所以希望小程序变得更强大，让我们少写一些黑客代码。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。