小程序公用自定义导航栏组件 包括顶部状态栏

wxml

<!--common_ components/common_header/common_header.wxml-->
<!-- 顶部状态栏div -->
<view class="status_bar" style='height: {{statusBarHeight}}px;'></view>
<view style='height: {{statusBarHeight}}px;'></view>

<!-- 顶部导航条div -->
<view class="nav_bar" style="top:{{statusBarHeight}}px;">
	<image class="image" wx:if="{{haveBack=='true'}}" src="/static/common/back.png" bindtap="navBack"></image>
	<image class="image" wx:if="{{haveBack!='true'}}" src=""></image>
	<text>{{navTitle}}</text>
	<image class="image" src=""></image>
</view>
<view style='height: 88rpx'></view>

wxss

/* common_ components/common_header/common_header.wxss */

/* 顶部状态栏 */
.status_bar {
  background:linear-gradient(90deg,rgba(39,89,251,1),rgba(39,145,255,1),rgba(69,219,235,1));
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 10;
}
/* 标题导航条 */
.nav_bar {
  width: 100%;
  height: 88rpx;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background:linear-gradient(90deg,rgba(39,89,251,1),rgba(39,145,255,1),rgba(69,219,235,1));
  position: fixed;
  z-index: 10;
}
.nav_bar .image {
  display: block;
  width: 50rpx;
  height: 50rpx;
  margin-left: 40rpx;
}

js

// common_ components/common_header/common_header.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    navTitle: String,
    haveBack: String,
  },
  /**
   * 组件的初始数据
   */
  data: {
    //获取全局变量 导航栏的高度statusBarHeight
    statusBarHeight: getApp().globalData.statusBarHeight,
  },
  /**
   * 组件的方法列表
   */
  methods: {
    //返回
    navBack: () => {
      wx.navigateBack({})
    },
  }
})

json文件没啥可写的

以上完成自定义组件

在使用的页面 的JSon文件注册这个公用组件

{
  "usingComponents": {
    "common_header":"/common_ components/common_header/common_header"

  }
}

页面的wxml中就可以使用了

	<!-- 导入公共头部header  -->
	<common_header navTitle="新儒书城"></common_header>

至此已完成。。。