微信小程序 自定义头部导航栏和导航栏背景图片 navigationStyle

微信小程序提供了 `navigationStyle` 属性来控制小程序的导航栏样式。该属性可以在 `app.json` 或页面配置中进行设置。

如果值为 `default`，则表示小程序使用默认的导航栏样式。如果值为 `custom`，则表示小程序使用自定义的导航栏样式。

当 `navigationStyle` 的值为 `custom` 时，可以通过以下方式来自定义小程序的导航栏样式：

1. 在 `app.json` 中设置全局导航栏背景色和前景色：

{
  "window": {
    "navigationStyle": "custom",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  }
}

2. 在页面的 `json` 文件中设置页面导航栏背景色和前景色：

{
  "navigationStyle": "custom",
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black"
}

3. 在页面的 `wxml` 文件中添加自定义导航栏：

<view class="navbar">
  <view class="navbar-back" bindtap="navigateBack">
    <image src="/images/icon-back.png"></image>
  </view>
  <view class="navbar-title">{{title}}</view>
</view>

其中，`navbar` 类指定了导航栏的样式，`navbar-back` 类指定了返回按钮的样式，`navbar-title` 类指定了标题的样式。

4. 在页面的 `wxss` 文件中定义导航栏的样式：

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 44px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 999;
}

.navbar-back {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translate(0, -50%);
}

.navbar-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: bold;
}

5. 在页面的 `js` 文件中添加返回按钮的逻辑：

Page({
  data: {
    title: '自定义导航栏'
  },

  navigateBack: function() {
    wx.navigateBack({
      delta: 1
    })
  }
})

以上就是在微信小程序中自定义导航栏的方法，其中 `navigationStyle` 属性用于控制小程序的导航栏样式，而自定义的导航栏需要在页面中手动添加，并在 `wxss` 文件中进行样式定义。