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


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 核心函数以及jQuery对象
Mar 23 Javascript
js中判断控件是否存在
Aug 25 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
PHP4中实现动态代理
2006/10/09 PHP
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
javascript  Error 对象 错误处理
2008/05/18 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
javascript如何写热点图
2015/12/08 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
python 制作本地应用搜索工具
2021/02/27 Python
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
商务主管岗位职责
2013/12/08 职场文书
高中运动会入场词
2014/02/14 职场文书
演讲稿格式范文
2014/05/19 职场文书
个人校本研修方案
2014/05/26 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA
SQL中的连接查询详解
2022/06/21 SQL Server