微信小程序调起键盘性能优化的方法


本篇内容主要讲解“微信小程序调起键盘性能优化的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序调起键盘性能优化的方法”吧!
最近在项目中有一个需求,是从列表页点击评论按钮进入详情页时,在加载完页面后自动调起键盘进入评论状态。从需求来看,我们应该在onReady函数中调起键盘,因为onReady函数是在页面初次渲染完成时被调用。但是在实践中我们发现,对于一些配置不好的手机,其加载页面速度较慢,在onReady函数调用时页面并没有渲染完毕,就会导致placeholder和input组件位置错乱的现象。其本质原因是,onReady生命周期函数并不能在调用时承若已经将页面渲染完成了。(尽管文档中描述是已经完成了。)
之前的操作是在onReady生命周期函数中调起键盘。
发现这个问题后做了相应的延迟处理
但这是治标不治本的方法,手机性能好的用户会无谓的等待300毫秒,而手机性能很差的用户等待300毫秒也不一定就能解决这个问题。
那么既然小程序并没有提供给我们一个理想的渲染结束后的回调函数,那么我们就换个思路:使用短轮询来处理,当页面渲染完成后才调起键盘的操作。
既然要使用短轮询,那么我们去轮询什么呢?什么标志代表着页面渲染完成了呢?在这里,我是使用wx.createSelectorQuery()方法,它会返回一个SelectorQuery对象实例,在这个实例上调用select方法选择我想要去轮询的节点,在回调函数中判断参数是否为null。如果返回了监控的节点信息,那么说明已经渲染完成。这时就可以进行键盘调起操作了。
在此之上,如果我们只粗暴的让focus为true并不是个明智的做法。
在调起键盘时默认页面会上推,如果在评论很少的情况下这样的体验并不好。所以需要判断一个高度,超过这个值就上推,没超过就不上推。这个值视实际情况而定。 上推的操作是由input组件的adjust-position属性决定,为true则上推,否则则不上推。这时回调返回的参数中的节点信息就可以派上用场了。
在实际的操作中,我们发现在键盘被调起后会有概又自动收回。经过排查发现时onBlur函数的问免费云主机域名题,在onBlur函数中,我们手动的设置focus为false,但其实并不需要这一步操作,反而带来了副作用。在我们去除了这部分代码后,键盘自动收起的问题得到了解决。
虽然我们完成了这次任务的需求,但是显而易见的,这样的任务在未来肯定还会再次出现。所以机智的我们应该赶快把整套流程封装起来,以便下次直接调用。

那么这时我们使用的方式就是这样的:
在解决键盘调起的这个过程中我们可以看出微信小程序开发流程的简陋,这个问题的出现本质上是小程序提供给我们的生命周期函数的不够准确。否则在页面渲染完成的情况下我怎么会拿不到节点信息呢?像react中的componentWillMount生命周期函数中就不会出现这样的问题,所以希望小程序能再变强大一些,也让我们少写一点这种hack代码。到此,相信大家对“微信小程序调起键盘性能优化的方法”有了更深的了解,不妨来实际操作一番吧!这里是百云主机网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

相关推荐: 欢乐拼图小程序系统如何开发

本篇内容介绍了“欢乐拼图小程序系统如何开发”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!   设置图片和红包-生成口令小程序,欢乐拼图可以发到朋友圈和群,朋友需…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 08/13 11:13
下一篇 08/13 11:13

相关推荐