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


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 相关文章推荐
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
JQuery index()方法使用代码
Jun 02 Javascript
javascript dom代码应用 简单的相册[firefox only]
Jun 12 Javascript
js中获取事件对象的方法小结
Mar 13 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
jquery实现穿梭框功能
Jan 19 jQuery
原生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
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
PHP 代码规范小结
2012/03/08 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
jQuery Ajax文件上传(php)
2009/06/16 Javascript
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
介绍Python中的fabs()方法的使用
2015/05/14 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
python去除字符串中的换行符
2017/10/11 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
复古服装:RetroStage
2019/05/10 全球购物
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
电子商务专业实习生自我鉴定
2013/09/24 职场文书
中学教师岗位职责
2013/11/26 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
我收到了德劲DE1107
2022/04/05 无线电