Shulou(Shulou.com)06/01 Report--

This article mainly explains "WeChat Mini Programs's method of tuning keyboard performance optimization". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "WeChat Mini Programs tuning keyboard performance optimization method" bar!

Demand analysis

Recently, there is a requirement in the project that when you click the comment button from the list page to enter the details page, automatically adjust the keyboard to enter the comment state after loading the page. From a demand point of view, we should adjust the keyboard in the onReady function, because the onReady function is called when the page is first rendered. But in practice, we found that for some poorly configured mobile phones, the loading speed of the page is slow, and the page is not finished rendering when the onReady function is called, which will lead to the disorder of placeholder and input components. The essential reason is that the onReady lifecycle function cannot be called if the page has already been rendered. (although the description in the document is completed. )

The previous operation was to tune the keyboard in the onReady lifecycle function.

This.setData ({focus: true}) copy the code

After the discovery of this problem, the corresponding delay treatment was made.

SetTimeout (() = > {this.setData ({focus: true})}, 300) copy the code

But this is a temporary solution. Users with good phone performance will needlessly wait for 300 milliseconds, while users with poor phone performance will not necessarily solve this problem.

Solution idea

So since Mini Program does not provide us with an ideal callback function after rendering, let's think differently: use short polling to deal with it, and then adjust the keyboard operation when the page rendering is complete.

Since we are going to use short polling, what are we going to poll for? What sign indicates that the rendering of the page is complete? Here, I use the wx.createSelectorQuery () method, which returns an instance of the SelectorQuery object, on which the select method is called to select the node I want to poll, and determine whether the parameter is null in the callback function. If the monitored node information is returned, the rendering is complete. At this point, you can adjust the keyboard.

Let timer = setInterval (() = > {wx.createSelectorQuery (). Select ('# comment-section') .boundingClientRect (rect = > {if (rect! = = null & & timer! = = null) {clearInterval (timer) timer = null this.setData ({focus: clientRect)}) .exec ()}, 50) copy the code

On top of this, it would not be wise if we only rudely let focus be true.

The default page will be pushed when the keyboard is adjusted, which is not a good experience if there are few comments. So you need to judge a height, if you exceed this value, you will push it, and if you don't exceed it, you won't push it. This value depends on the actual situation. The operation of uploading is determined by the adjust-position property of the input component. If it is true, it will not be pushed. Otherwise, it will not be pushed. At this point, the node information in the parameters returned by the callback can be useful.

/ / judge the height of the node before this.setData ({focus: true}) if (rect.height)

< 500) this.setData({ push: false })else this.setData({ push: true })复制代码onBlur函数问题 在实际的操作中，我们发现在键盘被调起后会有概又自动收回。经过排查发现时onBlur函数的问题，在onBlur函数中，我们手动的设置 focus 为 false ，但其实并不需要这一步操作，反而带来了副作用。在我们去除了这部分代码后，键盘自动收起的问题得到了解决。 封装起来 虽然我们完成了这次任务的需求，但是显而易见的，这样的任务在未来肯定还会再次出现。所以机智的我们应该赶快把整套流程封装起来，以便下次直接调用。 那么这时我们使用的方式就是这样的： const Util = require("xxx") // 引入封装的库/** * 生命周期函数--监听页面初次渲染完成 */onReady: function () { Util.onTotalReady('#comment-section', 50, rect =>

{if (rect.bottom < 500) this.setData ({push: false}) else this.setData ({push: true}} this.setData ({focus: true})} copy code

In the process of solving the keyboard adjustment, we can see the simple development process of WeChat Mini Programs. The essence of this problem is that the life cycle function provided by Mini Program is not accurate enough. Otherwise, how could I not get the node information when the page rendering is complete? There is no such problem in the componentWillMount lifecycle function in react, so I hope Mini Program can be a little more powerful and let's write less of this kind of hack code.

At this point, I believe you have a deeper understanding of "WeChat Mini Programs's method of tuning keyboard performance optimization". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.