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


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 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
javascript常见操作汇总
Sep 03 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
jquery实现手风琴案例
May 04 jQuery
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 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+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
python关于变量名的基础知识点
2020/03/03 Python
django中related_name的用法说明
2020/05/20 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
python 基于opencv操作摄像头
2020/12/24 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
幼儿园毕业教师感言
2014/02/21 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
出纳会计岗位职责
2014/03/12 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python