微信小程---自定義頭部方案

微信小程序—自定義頭部方案

做微信小程序已經有一定時間了，在某種意義上編程思維有衆多相通之處，擇一窗而登堂入室，是我們技術人大多數的經歷，所以後面主要記錄具有微信特色的一些優秀解決方案，至於基礎的微信開發，除了看文檔，並無任何捷徑

配置自定義頭部

小程序頁面都會有默認的頭部，無需配置，但是要滿足豐富的業務需求，就要把代碼/配置都掌握在自己手中，首先，我們去掉默認頭部

"navigationStyle": "custom"
//在app.json中會全局設置，單頁面設置在index.json即可

自定義組件頭部

直接使用現有框架的頭部組件即可，這裏推薦使用colorUI的頭部組件，colorUI裏面的頭部組件在其components中，一般使用colorUI會直接引入整個colorUI,這個庫還是非常方便的
在usingComponents中使用這個/colorui/components/cu-custom
在wxml頁面使用即可

<cu-custom bgColor="bg-white" isBack="{{ true }}">
  <view slot="backText" bindtap="navigatorBack">返回</view>
  <view slot="content">標題</view>
</cu-custom>

需要注意的是到這裏我們還需要做一步處理：動態頭高度適配

動態頭高度適配

不管是使用colorUI的還是自己寫頭部，最重要的就是動態頭高度適配，以適配不同的機型和屏幕，其實很簡單，使用getSystemInfo拿到statusBarHeight

wx.getSystemInfo({
      success: (e) => {
        this.globalData.StatusBar = e.statusBarHeight;
        let capsule = wx.getMenuButtonBoundingClientRect();
        if (capsule) {
          this.globalData.Custom = capsule;
          this.globalData.CustomBar =
            capsule.bottom + capsule.top - e.statusBarHeight;
        } else {
          this.globalData.CustomBar = e.statusBarHeight + 50;
        }
      },
    });

這一塊代碼可以直接複製到app.js裏面即可，原理就是拿到狀態欄高度和膠囊按鈕的高度

這一篇就到這裏，以一個簡單的部分切入