微信小程式如何優化？你可能不知道的優化知識大分享

微信小程式如何最佳化？本篇文章總結了一些小程式中初學者可能不了解的優化知識，分享給大家，希望對大家有幫助！

頁面跳轉優先採用navigator元件

小程式提供了兩種頁面路由方式：
a. navigator 元件
b.路由API，如navigateTo / redirectTo / switchTab / navigateBack / reLaunch 。

微信爬蟲抓取小程式內容時，使用navigator 元件有利於爬蟲抓取頁面層級內容，如果你的小程式比較注重搜尋優化，建議優先使用navigator 元件進行頁間跳轉【相關學習推薦：小程式開發教學】

詳見文件《小程式搜尋優化指南》

https://developers.weixin.qq.com/ miniprogram/dev/framework/search/seo.html

#頁間跳轉，使用this.pageRouter.navigateTo 取代wx.navigateTo 是更優的選擇

// index/index.js

Page({
  wxNavigate: function () {
    wx.navigateTo({
      url: './new-page'
    })
  },
  routerNavigate: function () {
    this.pageRouter.navigateTo({
      url: './new-page'
    })
  }
})

假設頁面index/index 的js 程式碼如上圖所示。如果此時已經跳到了一個新頁面pack/index ，然後才呼叫到上面的wxNavigate方法，跳轉的新頁面路徑將是pack/new-page ；而如果呼叫的是routerNavigate方法，跳轉的新頁面路徑仍然是index/new-page 。

換而言之， this.pageRouter 所獲得的路由器物件具有更好的基底路徑穩定性。 (一個常見的例子是，使用者點擊按鈕跳轉下一頁，有時會因為卡頓連續點擊，有可能會重複開啟一個頁面，使用頁面路由器物件呼叫能夠避免這一情況。）

#詳見《頁面路由器物件》

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Router.html

##小程序長列表元件

在談到效能最佳化時，總是會提及如何最佳化渲染長清單內容數據，解決的方法核心的想法就是，只渲染顯示在螢幕的數據，基本實作就是監聽scroll 事件，並且重新計算需要渲染的數據，不需要渲染的數據留一個空的div 佔位元素。

而小程式官方提供了一個拓展元件，專門用於渲染長列表資料場景，詳見《recycle-view》：

https://developers.weixin. qq.com/miniprogram/dev/extended/component-plus/recycle-view.html

滾動驅動的動畫

根據滾動位置而不斷改變動畫的進度是一種比較常見的場景，這類動畫可以讓人感覺到介面互動很連貫自然，體驗更好,如下圖：

微信小程式針對此類動畫場景，專門做了針對animate api增加了ScrollTimeline參數，詳見：《ScrollTimeline》：

https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html

不要再傻傻的手動監聽滾動事件啦

#另外，

上面的文檔最後有提到，如果還需要實現更高級的動畫，可以使用自訂元件的形式封裝，因為自訂元件可以實現局部刷新而不影響整體頁面效能。

初始化渲染快取

小程式頁面的初始化分為兩個部分：邏輯層初始化及視圖層初始化。啟用初始渲染緩存，可以使視圖層不需要等待邏輯層初始化完畢，而直接提前將頁面初始data 的渲染結果展示給用戶，這可以使得頁面對用戶可見的時間大大提前（減少白屏加載時間）

利用初始渲染緩存，可以：

• 快速顯示頁面中永遠不會改變的部分，如導覽列；

• 預先展示一個骨架頁，提升使用者體驗；

• 展示自訂的載入提示；

##提前展示廣告，等等。

詳見文件《初始化快取》

https://developers.weixin.qq.com/miniprogram/dev/framework/view/initial- rendering-cache.html

更多程式相關知識，請造訪：

程式設計影片

！ ！

以上是微信小程式如何優化？你可能不知道的優化知識大分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！