微信小程序如何實現調起鍵盤性能優化

這篇文章主要介紹微信小程序如何實現調起鍵盤性能優化，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

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

需求分析

最近在項目中有一個需求，是從列表頁點擊評論按鈕進入詳情頁時，在加載完頁面后自動調起鍵盤進入評論狀態。從需求來看，我們應該在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)

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

在調起鍵盤時默認頁面會上推，如果在評論很少的情況下這樣的體驗并不好。所以需要判斷一個高度，超過這個值就上推，沒超過就不上推。這個值視實際情況而定。 上推的操作是由input組件的 adjust-position 屬性決定，為true則上推，否則則不上推。這時回調返回的參數中的節點信息就可以派上用場了。

// 在this.setData({ focus: true })前對節點高度進行判斷
if (rect.height < 500) this.setData({ push: false })
else this.setData({ push: true })

onBlur函數問題

在實際的操作中，我們發現在鍵盤被調起后會有概又自動收回。經過排查發現時onBlur函數的問題，在onBlur函數中，我們手動的設置 focus 為 false ，但其實并不需要這一步操作，反而帶來了副作用。在我們去除了這部分代碼后，鍵盤自動收起的問題得到了解決。

封裝起來

雖然我們完成了這次任務的需求，但是顯而易見的，這樣的任務在未來肯定還會再次出現。所以機智的我們應該趕快把整套流程封裝起來，以便下次直接調用。

那么這時我們使用的方式就是這樣的：

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 })
 })
}

以上是“微信小程序如何實現調起鍵盤性能優化”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！