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


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 相关文章推荐
JQuery1.6 使用方法三
Nov 23 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
javascript每日必学之封装
Feb 23 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
js异步编程小技巧详解
Aug 14 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 Javascript
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
原生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对文件进行加锁、解锁实例
2015/01/23 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
python requests使用socks5的例子
2019/07/25 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
Python 没有main函数的原因
2020/07/10 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
幼儿教师考核制度
2014/01/25 职场文书
土建工程师岗位职责
2014/06/10 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书