微信小程序自定义navigationBar顶部导航栏，兼容适配所有机型

1. 在app.json中设置navigationBar样式和背景色

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "自定义导航栏",
}

2. 在需要自定义navigationBar的页面的json文件中设置navigationBar样式和背景色

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "自定义导航栏",
  "enablePullDownRefresh": true
}

3. 在需要自定义navigationBar的页面的wxml文件中添加导航栏

<view class="nav-bar">
  <view class="nav-bar-left">
    <image class="nav-bar-back" src="/images/back.png"></image>
  </view>
  <view class="nav-bar-middle">
    <text class="nav-bar-title">自定义导航栏</text>
  </view>
  <view class="nav-bar-right">
    <image class="nav-bar-share" src="/images/share.png"></image>
  </view>
</view>

4. 在需要自定义navigationBar的页面的wxss文件中设置导航栏样式和位置

.nav-bar {
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48rpx;
  background-color: #ffffff;
  z-index: 100;
}

.nav-bar-left {
  display: flex;
  align-items: center;
  margin-left: 16rpx;
}

.nav-bar-middle {
  display: flex;
  align-items: center;
}

.nav-bar-right {
  display: flex;
  align-items: center;
  margin-right: 16rpx;
}

.nav-bar-title {
  font-size: 18rpx;
  font-weight: bold;
}

.nav-bar-back {
  width: 24rpx;
  height: 24rpx;
}

.nav-bar-share {
  width: 24rpx;
  height: 24rpx;
}

5. 在需要自定义navigationBar的页面的js文件中添加返回和分享功能

Page({
  onBack: function () {
    wx.navigateBack({
      delta: 1
    })
  },

  onShare: function () {
    wx.showShareMenu({
      withShareTicket: true
    })
  }
})

6. 在需要自定义navigationBar的页面的wxml文件中绑定返回和分享功能

<view class="nav-bar">
  <view class="nav-bar-left" bindtap="onBack">
    <image class="nav-bar-back" src="/images/back.png"></image>
  </view>
  <view class="nav-bar-middle">
    <text class="nav-bar-title">自定义导航栏</text>
  </view>
  <view class="nav-bar-right" bindtap="onShare">
    <image class="nav-bar-share" src="/images/share.png"></image>
  </view>
</view>