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


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 相关文章推荐
js里的prototype使用示例
Nov 19 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
js实现倒计时关键代码
May 05 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 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
php实现的返回数据格式化类实例
2014/09/22 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
php使用标签替换的方式生成静态页面
2015/05/21 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
vue实现分页组件
2020/06/16 Javascript
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
Python的pygame安装教程详解
2020/02/10 Python
python访问hdfs的操作
2020/06/06 Python
python的help函数如何使用
2020/06/11 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
《问银河》教学反思
2014/02/19 职场文书
行政人事岗位职责
2014/03/17 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
老乡会致辞
2015/07/28 职场文书
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python
Fluentd搭建日志收集服务
2022/09/23 Servers