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: {//获取全局变量 导航栏的高度statusBarHeightstatusBarHeight: 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>

至此已完成。。。