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

在微信小程序中，可以使用`navigationBarTitleText`和`navigationBarBackgroundColor`来自定义头部导航栏的文本和背景颜色。同时，可以通过设置`navigationStyle`属性来控制是否显示默认的导航栏。

如果设置`navigationStyle`为`custom`，则可以自定义整个导航栏，包括背景图片、返回按钮等，具体操作如下：

1. 在`app.json`文件中设置全局导航栏样式：

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

这里设置了`navigationStyle`为`custom`，表示使用自定义导航栏样式；`navigationBarBackgroundColor`为导航栏背景色，`navigationBarTextStyle`为导航栏标题文字颜色。

2. 在需要自定义导航栏的页面中设置导航栏内容：

{
  "usingComponents": {
    "custom-navigation-bar": "/components/custom-navigation-bar/custom-navigation-bar"
  },
  "navigationBarTitleText": "自定义导航栏",
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black"
}

这里使用了一个自定义组件`custom-navigation-bar`来替代默认的导航栏。同时，设置了导航栏的标题、背景色和文字颜色。

3. 编写自定义导航栏组件`custom-navigation-bar`：

<view class="custom-navigation-bar">
  <image class="background-image" src="{{backgroundImage}}"></image>
  <view class="content">
    <view class="left-content">
      <view class="back-button" wx:if="{{showBackButton}}" bindtap="onBack">
        <image class="back-icon" src="/images/back.png"></image>
      </view>
      <view class="title">{{title}}</view>
    </view>
    <view class="right-content">
      <!-- 右侧按钮 -->
    </view>
  </view>
</view>

这里使用了一个`<view>`作为自定义导航栏的容器，包括了背景图片、左侧返回按钮、标题和右侧按钮等内容。具体样式可以根据需求自行设计。

4. 在自定义导航栏组件的JS文件中处理相关事件：

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
      value: ''
    },
    showBackButton: {
      type: Boolean,
      value: true
    },
    backgroundImage: {
      type: String,
      value: ''
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    onBack() {
      wx.navigateBack({
        delta: 1
      })
    }
  }
})

这里定义了`title`、`showBackButton`和`backgroundImage`三个属性，分别用于设置导航栏的标题、是否显示返回按钮和背景图片。同时，实现了一个`onBack`方法用于处理返回按钮的点击事件。

以上就是自定义微信小程序导航栏的基本步骤。需要注意的是，在自定义导航栏时，需要考虑不同设备的屏幕尺寸和适配问题。