微信小程序调整键盘性能优化

在小程序中，我们经常需要调整键盘的操作场景，但是在不同的场景下解决方案是不同的，还需要进行具体的分析。

需求分析

最近，项目需要点击列表页面中的评论按钮进入详细页面，并在加载页面后自动调整键盘进入评论状态。从需求的角度来看，我们应该在onReady函数中提升键盘，因为在首次渲染页面时会调用onReady函数。然而，在实践中，我们发现对于一些配置较差的手机，加载页面速度很慢。调用onReady函数时，不会呈现页面，这将导致占位符和输入组件的位置无序。基本原因是onReady生命周期功能不允许在调用页面时呈现页面。 （尽管文档中的描述已经完成。）

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

this.setData（{focus: true}）复制代码

在发现此问题后，我做了相应的延迟处理

setTimeout（（）=＆gt; {this.setData（{focus: true}）}，300）复制代码

然而，这是治愈症状的一种方法。具有良好移动电话性能的用户将等待300毫秒，而手机性能较差的用户将无法通过等待300毫秒来解决此问题。

解决方案的想法

因此，由于小程序在渲染后没有为我们提供理想的回调函数，让我们改变主意：在渲染页面时使用短轮询来处理键盘操作。

由于我们将使用短轮询，我们会进行什么轮询？什么标志意味着页面呈现完成？在这里，我使用wx.createSelectorQuery（）方法，该方法返回一个SelectorQuery对象实例。在这个实例中，我调用select方法来选择我想要轮询的节点，并在回调函数中确定参数是否为null。如果返回受监视的节点信息，则表示已完成呈现。这时，键盘可以调节。

设timer=setInterval（（）=＆gt; {wx.createSelectorQuery（）。select（'＃comment-section'）。boundingClientRect（rect=＆gt; {if（rect！==null＆amp;＆amp; timer！==null） ）{clearInterval（timer）timer=null this.setData（{focus: true}）}}）。exec（）}，50）复制代码

最重要的是，我们只有把重点放在正确的位置才是明智之举。

引发键盘时会弹出默认页面，如果评论很少，则不好。所以你需要判断一个高度。如果超过此值，则会将其推高。如果你没有超过它，你就不会推它。该值取决于实际情况。上推操作由输入组件的调整位置属性确定。如果是，则向上推，否则不推。此时，回调返回的参数中的节点信息可以派上用场。

//在this.setData（{focus: true}）之前确定节点的高度if（rect.height＆lt; 500）this.setData（{push: false}）否则this.setData（{push: true}）copy代码onBlur函数问题

在实际操作中，我们发现键盘在拾取后会自动缩回。排除故障后，找到了onBlur功能。在onBlur函数中，我们手动将焦点设置为false，但实际上，此步骤不是必需的，但它有副作用。删除这部分代码后，解决了键盘自动缩回的问题。

打包

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

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

Const Util=require（'xxx'）//介绍打包的库/** *生命周期函数 - 完成侦听器页面的第一次渲染*/onReady: function（）{Util.onTotalReady（'＃comment-section'， 50，Rect=> {if（rect.bottom＆lt; 500）this.setData（{push: false}）否则this.setData（{push: true}} this.setData（{focus: true}）}）} copy代码

在解决键盘调整的过程中，我们可以看到微信小程序的开发过程很简单。这个问题的出现本质上是小程序提供的生命周期功能的不准确性。否则，在页面渲染完成后如何才能获取节点信息？这样的问题在componentWillMount生命周期函数中不会发生反应，所以我希望小程序可以更强大，让我们写下这个hack代码。

HiShop小程序工具提供多种类型的商城/商店小程序制作，可视化编辑1秒，在线生成5个步骤。通过拖动和拼接模块布局小程序商城页面，你可以看到你得到的东西，你只需要艺术家来制作一个漂亮的商场。有关更多小程序商店，请参阅：小程序商店

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。