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

 更新时间:2018年07月24日 11:45:31   转载 作者:MeloGuo  
这篇文章主要介绍了详解微信小程序调起键盘性能优化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

在小程序中,我们经常有调起键盘的操作场景,但是在不同的场景下解决方案不尽相同,还是需要具体问题具体分析。

需求分析

最近在项目中有一个需求,是从列表页点击评论按钮进入详情页时,在加载完页面后自动调起键盘进入评论状态。从需求来看,我们应该在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制作弹出层效果

    JavaScript制作弹出层效果

    弹出层效果大家在网站上经常遇到此功能,下面小编给大家分享一段js代码制作弹出层效果,代码简单易懂,非常不错,需要的朋友参考下吧
    2016-12-12
  • 详解JavaScript中常用的函数类型

    详解JavaScript中常用的函数类型

    这篇文章主要介绍了三种JavaScript中常用的函数类型,包括匿名函数、动态函数、可变参数函数,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 使用D3.js制作图表详解

    使用D3.js制作图表详解

    D3是目前最流行的JavaScript可视化图表库之一,D3的图表类型非常丰富,并且支持SVG格式,因此应用十分广泛,也有很多图表插件基于D3开发,比如MetricsGraphics.js,在D3上构建的数据图表非常强大。
    2017-08-08
  • JS注册/移除事件处理程序(ExtJS应用程序设计实战)

    JS注册/移除事件处理程序(ExtJS应用程序设计实战)

    最常做的事情就是注册事件处理程序,因为在ExtJS的世界里,几乎完全由时间组成,下面是处理程序案例,感兴趣的朋友可以参考下哈,希望可以帮助到你
    2013-05-05
  • javascript动画之模拟拖拽效果篇

    javascript动画之模拟拖拽效果篇

    其实javascript本身是具有原生拖放功能的,但是由于兼容性问题,以及功能实现的方式,用的不是很广泛。javascript动画广泛使用的还是模拟拖拽。本文将详细介绍javascript的模拟拖拽,有需要的可以参考借鉴。
    2016-09-09
  • easyui form validate总是返回false的原因及解决方法

    easyui form validate总是返回false的原因及解决方法

    下面小编就为大家带来一篇easyui form validate总是返回false的原因及解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 详解JavaScript实现动态的轮播图效果

    详解JavaScript实现动态的轮播图效果

    这篇文章主要介绍了JavaScript实现动态的轮播图效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • JavaScript6 let 新语法优势介绍

    JavaScript6 let 新语法优势介绍

    这篇文章主要介绍了JavaScript6 let 新语法优势介绍的相关资料,需要的朋友可以参考下
    2016-07-07
  • layui使用表格渲染获取行数据的例子

    layui使用表格渲染获取行数据的例子

    今天小编就为大家分享一篇layui使用表格渲染获取行数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js实现京东轮播图效果

    js实现京东轮播图效果

    这篇文章主要为大家详细介绍了js实现京东轮播图效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06

最新评论