详解微信小程序调起键盘性能优化


Posted in Javascript onJuly 24, 2018

在小程序中,我们经常有调起键盘的操作场景,但是在不同的场景下解决方案不尽相同,还是需要具体问题具体分析。

需求分析

最近在项目中有一个需求,是从列表页点击评论按钮进入详情页时,在加载完页面后自动调起键盘进入评论状态。从需求来看,我们应该在onReady函数中调起键盘,因为onReady函数是在页面初次渲染完成时被调用。但是在实践中我们发现,对于一些配置不好的手机,其加载页面速度较慢,在onReady函数调用时页面并没有渲染完毕,就会导致placeholder和input组件位置错乱的现象。其本质原因是,onReady生命周期函数并不能在调用时承若已经将页面渲染完成了。(尽管文档中描述是已经完成了。)

之前的操作是在onReady生命周期函数中调起键盘。

this.setData({ focus: true })

发现这个问题后做了相应的延迟处理

setTimeout(() => {
 this.setData({ focus: true })
}, 300)

但这是治标不治本的方法,手机性能好的用户会无谓的等待300毫秒,而手机性能很差的用户等待300毫秒也不一定就能解决这个问题。

解决思路

那么既然小程序并没有提供给我们一个理想的渲染结束后的回调函数,那么我们就换个思路: 使用短轮询来处理,当页面渲染完成后才调起键盘的操作。

既然要使用短轮询,那么我们去轮询什么呢?什么标志代表着页面渲染完成了呢?在这里,我是使用 wx.createSelectorQuery() 方法,它会返回一个SelectorQuery对象实例,在这个实例上调用select方法选择我想要去轮询的节点,在回调函数中判断参数是否为 null 。如果返回了监控的节点信息,那么说明已经渲染完成。这时就可以进行键盘调起操作了。

let timer = setInterval(() => {
 wx.createSelectorQuery().select('#comment-section').boundingClientRect(rect => {
 if (rect !== null && timer !== null) {
  clearInterval(timer)
  timer = null
  this.setData({ focus: true })
 }
 }).exec()
}, 50)

在此之上,如果我们只粗暴的让 focustrue 并不是个明智的做法。

在调起键盘时默认页面会上推,如果在评论很少的情况下这样的体验并不好。所以需要判断一个高度,超过这个值就上推,没超过就不上推。这个值视实际情况而定。 上推的操作是由input组件的 adjust-position 属性决定,为true则上推,否则则不上推。这时回调返回的参数中的节点信息就可以派上用场了。

// 在this.setData({ focus: true })前对节点高度进行判断
if (rect.height < 500) this.setData({ push: false })
else this.setData({ push: true })

onBlur函数问题

在实际的操作中,我们发现在键盘被调起后会有概又自动收回。经过排查发现时onBlur函数的问题,在onBlur函数中,我们手动的设置 focusfalse ,但其实并不需要这一步操作,反而带来了副作用。在我们去除了这部分代码后,键盘自动收起的问题得到了解决。

封装起来

虽然我们完成了这次任务的需求,但是显而易见的,这样的任务在未来肯定还会再次出现。所以机智的我们应该赶快把整套流程封装起来,以便下次直接调用。

详解微信小程序调起键盘性能优化

那么这时我们使用的方式就是这样的:

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 })
 })
}

小结

在解决键盘调起的这个过程中我们可以看出微信小程序开发流程的简陋,这个问题的出现本质上是小程序提供给我们的生命周期函数的不够准确。否则在页面渲染完成的情况下我怎么会拿不到节点信息呢?像react中的componentWillMount生命周期函数中就不会出现这样的问题,所以希望小程序能再变强大一些,也让我们少写一点这种hack代码。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs DataReader、JsonReader、XmlReader的构造方法
Nov 07 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
JavaScript实现三阶幻方算法谜题解答
Dec 29 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
JS伪继承prototype实现方法示例
Jun 20 Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 #Javascript
js+canvas实现验证码功能
Sep 21 #Javascript
微信小程序网络请求封装示例
Jul 24 #Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 #Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 #jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 #jQuery
Vue三种常用传值示例(父传子、子传父、非父子)
Jul 24 #Javascript
You might like
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
php新建文件的方法实例
2019/09/26 PHP
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
js实现五星评价功能
2017/03/08 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
使用Python操作MySQL的一些基本方法
2015/08/16 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
中英双版中文教师求职信
2013/10/27 职场文书
课程改革实施方案
2014/03/16 职场文书
我的理想演讲稿
2014/04/30 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
员工安全承诺书
2014/05/22 职场文书
物业保安岗位职责
2014/07/02 职场文书
英语辞职信怎么写
2015/02/28 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis