前言

相信小夥伴們應該或多或少都開發過微信小程序，微信小程序的寫法雖然和vue有很多類似的地方，但又有很多vue屬性，在小程序中沒有類似的實現，比如計算屬性，watch 監聽等；

因為小程序是附着在微信 app 上，所以經常要處理一些安卓端和蘋果端的兼容，比如有些蘋果機屏幕下方有安全區域，一些安卓機上點輸入框輸入完畢後點完成按鈕鍵盤不能自動收回，導致輸入框不能失去焦點的問題，等等...

為了以後自己和小夥伴們不再浪費踩坑的時間，我打算寫一些文章記錄一下我在開發微信小程序中遇到的一些坑和一些小功能的實現過程。

目錄：

• 微信小程序（一）自定義導航欄和fixed失效及各機型兼容問題
• 微信小程序（二）用 movable-view 實現左滑刪除功能
• 微信小程序（三）實現類似Vue中的 computed，watch 功能
• 微信小程序（四）絕對不可錯過切換自定義菜單欄的騷操作
• 微信小程序（五）不同機型中的輸入框兼容問題（待更新）
• ...

cover-view 組件使用 fixed 樣式失效問題

背景

因項目需求，要開發一個自定義 tabBar，在微信官方文檔找到一個demo，官方demo看到 tabBar 組件是用基礎組件 cover-view 和 cover-image 構建的架子，用 position 的 fixed 固定定位在手機屏幕最下方，用真機調試是發現 tabBar 組件並不一定會固定在屏幕的最下方，而且如果頁面滑動，用 fixed 固定的區域會上下移動

官方demo 示例代碼

原因：

在微信社區找相關問題發現是 cover-view 的原因，然後這個問題直到現在好像還沒修復

解決方案

改用 view 和 image 基礎組件構建架子就可以了

自定義導航欄、狀態欄在不同機型的適配

背景原因

因為不同機型的導航欄和膠囊距上下間距不同，導致自定義的導航欄的高度不能固定。需求是導航欄的文字要和膠囊對齊。

解絕方案

廢話不多説了，直接上代碼，後面有解釋説明：

  /* 獲取膠囊的位置和手機狀態欄的信息 */
  async getMenuInfo() {
    let { top, height } = wx.getMenuButtonBoundingClientRect();
    let statusBarHeight = "";
    wx.getSystemInfo({
      success(res) {
        statusBarHeight = res.statusBarHeight
      }
    })
    this.setData({
      topParams: {
        top,
        height,
        statusBarHeight
      },
    })
  },

通過 wx.getMenuButtonBoundingClientRect() 獲取菜單按鈕（右上角膠囊按鈕）的佈局位置信息。座標信息以屏幕左上角為原點。

獲取的參數解釋：

• top 是上邊界座標，也就是膠囊距離屏幕頂部的距離，單位：px
• height 是膠囊高度，單位：px
• 然後通過 wx.getSystemInfo() 獲取狀態欄的高度statusBarHeight，單位px;
  
• 綜上所述可知 膠囊距離狀態欄的距離 = 膠囊距離屏幕頂部的距離(top) - 狀態欄的高度(statusBarHeight)
  
  
  通過這些參數你就可以寫出自己想要的各種自定義導航欄的樣式了。

參考文檔：

wx.getMenuButtonBoundingClientRect()

wx.getSystemInfo()

寫在最後

我是 AndyHu，目前暫時是一枚前端搬磚工程師。

文中如有錯誤，歡迎在評論區指正，如果這篇文章幫到了你，歡迎點贊和關注呀😊

未經許可禁止轉載💌

speak less，do more.