這篇文章主要介紹微信小程序如何實(shí)現(xiàn)調(diào)起鍵盤性能優(yōu)化，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

五蓮ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

在小程序中，我們經(jīng)常有調(diào)起鍵盤的操作場(chǎng)景，但是在不同的場(chǎng)景下解決方案不盡相同，還是需要具體問題具體分析。

需求分析

最近在項(xiàng)目中有一個(gè)需求，是從列表頁點(diǎn)擊評(píng)論按鈕進(jìn)入詳情頁時(shí)，在加載完頁面后自動(dòng)調(diào)起鍵盤進(jìn)入評(píng)論狀態(tài)。從需求來看，我們應(yīng)該在onReady函數(shù)中調(diào)起鍵盤，因?yàn)閛nReady函數(shù)是在頁面初次渲染完成時(shí)被調(diào)用。但是在實(shí)踐中我們發(fā)現(xiàn)，對(duì)于一些配置不好的手機(jī)，其加載頁面速度較慢，在onReady函數(shù)調(diào)用時(shí)頁面并沒有渲染完畢，就會(huì)導(dǎo)致placeholder和input組件位置錯(cuò)亂的現(xiàn)象。其本質(zhì)原因是，onReady生命周期函數(shù)并不能在調(diào)用時(shí)承若已經(jīng)將頁面渲染完成了。（盡管文檔中描述是已經(jīng)完成了。）

之前的操作是在onReady生命周期函數(shù)中調(diào)起鍵盤。

this.setData({ focus: true })

發(fā)現(xiàn)這個(gè)問題后做了相應(yīng)的延遲處理

setTimeout(() => {
 this.setData({ focus: true })
}, 300)

但這是治標(biāo)不治本的方法，手機(jī)性能好的用戶會(huì)無謂的等待300毫秒，而手機(jī)性能很差的用戶等待300毫秒也不一定就能解決這個(gè)問題。

解決思路

那么既然小程序并沒有提供給我們一個(gè)理想的渲染結(jié)束后的回調(diào)函數(shù)，那么我們就換個(gè)思路： 使用短輪詢來處理，當(dāng)頁面渲染完成后才調(diào)起鍵盤的操作。

既然要使用短輪詢，那么我們?nèi)ポ喸兪裁茨兀渴裁礃?biāo)志代表著頁面渲染完成了呢？在這里，我是使用 wx.createSelectorQuery() 方法，它會(huì)返回一個(gè)SelectorQuery對(duì)象實(shí)例，在這個(gè)實(shí)例上調(diào)用select方法選擇我想要去輪詢的節(jié)點(diǎn)，在回調(diào)函數(shù)中判斷參數(shù)是否為 null 。如果返回了監(jiān)控的節(jié)點(diǎn)信息，那么說明已經(jīng)渲染完成。這時(shí)就可以進(jìn)行鍵盤調(diào)起操作了。

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)

在此之上，如果我們只粗暴的讓 focus 為 true 并不是個(gè)明智的做法。

在調(diào)起鍵盤時(shí)默認(rèn)頁面會(huì)上推，如果在評(píng)論很少的情況下這樣的體驗(yàn)并不好。所以需要判斷一個(gè)高度，超過這個(gè)值就上推，沒超過就不上推。這個(gè)值視實(shí)際情況而定。 上推的操作是由input組件的 adjust-position 屬性決定，為true則上推，否則則不上推。這時(shí)回調(diào)返回的參數(shù)中的節(jié)點(diǎn)信息就可以派上用場(chǎng)了。

// 在this.setData({ focus: true })前對(duì)節(jié)點(diǎn)高度進(jìn)行判斷
if (rect.height < 500) this.setData({ push: false })
else this.setData({ push: true })

onBlur函數(shù)問題

在實(shí)際的操作中，我們發(fā)現(xiàn)在鍵盤被調(diào)起后會(huì)有概又自動(dòng)收回。經(jīng)過排查發(fā)現(xiàn)時(shí)onBlur函數(shù)的問題，在onBlur函數(shù)中，我們手動(dòng)的設(shè)置 focus 為 false ，但其實(shí)并不需要這一步操作，反而帶來了副作用。在我們?nèi)コ诉@部分代碼后，鍵盤自動(dòng)收起的問題得到了解決。

封裝起來

雖然我們完成了這次任務(wù)的需求，但是顯而易見的，這樣的任務(wù)在未來肯定還會(huì)再次出現(xiàn)。所以機(jī)智的我們應(yīng)該趕快把整套流程封裝起來，以便下次直接調(diào)用。

那么這時(shí)我們使用的方式就是這樣的：

const Util = require("xxx") // 引入封裝的庫

/**
 * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
 */
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 })
 })
}

以上是“微信小程序如何實(shí)現(xiàn)調(diào)起鍵盤性能優(yōu)化”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！