微信小程---自定义头部方案

微信小程序—自定义头部方案

做微信小程序已经有一定时间了，在某种意义上编程思维有众多相通之处，择一窗而登堂入室，是我们技术人大多数的经历，所以后面主要记录具有微信特色的一些优秀解决方案，至于基础的微信开发，除了看文档，并无任何捷径

配置自定义头部

小程序页面都会有默认的头部，无需配置，但是要满足丰富的业务需求，就要把代码/配置都掌握在自己手中，首先，我们去掉默认头部

"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里面即可，原理就是拿到状态栏高度和胶囊按钮的高度

这一篇就到这里，以一个简单的部分切入