uniapp 自定义头部 支持微信、百度、头条小程序

在使用uniapp开发小程序的时候，由于公司要求开发微信、百度、头条、支付宝小程序，在这里先写了一个自定义头部（暂不支持支付宝，由于其他项目开始了，后面补上）

首先在components文件创建一个header.vue，在pages文件中去调用，import Header from '../../components/header.vue'，

首先在pages.json文件中设置

"pages": [ 
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "",
				
				"navigationStyle": "custom",  //必须设置成这个
				"navigationBarTextStyle": "white",
				"backgroundColor": "#fff"
			}
		}
	],

header.vue的代码

<template>
	<view class="header">
		<view class="headerRelative" :style="{height:headerBarHeight+'px',backgroundColor:hasBgc}">
			<view class="headerNav" :style="{height:navBarHeight+'px',top:statusHeight + 'px'}">
				<view class="left" @click='_goBack'>
					<view class="iconfont icon-xiaoxi" :style="{maxWidth:addressWidth + 'px',height:navBarHeight+'px',lineHeight:navBarHeight+'px'}">
						定位地址
					</view>
				</view>
				<view class='home-search' @click = "searchTap" :style="{top:searchSpacing + 'px',left:searchSpacingLeft + 'px'}">
					<view class='search' :style="{height:searchHeight + 'px',width:searchWidth + 'px',lineHeight:searchHeight + 'px'}">
						<!-- <image src="../static/images/iconSs.png"></image> -->
						<text>搜索</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

js代码

<script>
const app = getApp();
export default {
	data(){
		return{
			haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则没有返回按钮
			statusHeight: 0, // 状态栏高度
			navbarHeight: 0, // 顶部导航栏高度
			navBarHeight: 0, //导航高度
			hasBgc:"#ff552e",  //背景颜色
			headerBarHeight:'0', //整个状态栏的高度
			searchHeight:'0',  //搜索栏的高度 等于状态栏的高度
			searchWidth:'0',	// 搜索的宽度  等于 屏幕宽度减去两个胶囊的宽度
			searchSpacing:'0' ,//搜索框距离导航栏顶部的定位间距
			addressWidth:'0'   ,//定位地址的宽度
			searchSpacingLeft:'0' //搜索框距离导航栏最左边的定位间距
		}
	},
	methods:{
		
	},
	created() {
		var that = this;
		if (!app.globalData.systeminfo) {
			app.globalData.systeminfo = uni.getSystemInfoSync(); //获取手机型号
			console.log(app.globalData.systeminfo,'00')
		}
		if (!app.globalData.capsule) {
			app.globalData.capsule = uni.getMenuButtonBoundingClientRect(); //胶囊的属性
			console.log(app.globalData.capsule)
		}
		let statusHeight = app.globalData.systeminfo.statusBarHeight // 顶部状态栏高度
		let headerCapsule = app.globalData.capsule // 胶囊位置信息
		let haveBack;
		if (getCurrentPages().length != 1) { // 当只有一个页面时，并且是从分享页进入
			haveBack = false;
		} else {
			haveBack = true;
		}
		let capsuleSpacing = headerCapsule.top - statusHeight; //胶囊和状态栏之间的距离
		let capsuleSpacingBottom = headerCapsule.bottom - headerCapsule.height - statusHeight //胶囊距离底部的距离
		let navBarHeight = headerCapsule.height + capsuleSpacing + capsuleSpacingBottom // 导航高度
		let screenWidth = app.globalData.systeminfo.screenWidth  //整个屏幕的宽度
		
		that.haveBack = haveBack; // 获取是否是通过分享进入的小程序
		that.statusHeight = statusHeight;  //状态栏高度
		that.navBarHeight = navBarHeight; // 导航高度
		that.headerBarHeight = navBarHeight + statusHeight; //整个状态栏的高度
		that.searchHeight = headerCapsule.height;  //搜索栏的高度 等于状态栏的高度
		that.searchSpacing = capsuleSpacing;  //搜索框距离导航栏顶部的定位间距
		that.searchSpacingLeft = headerCapsule.width + (screenWidth - headerCapsule.right)*2 - 14;  //搜索框距离导航栏最左边的定位间距
		that.addressWidth = headerCapsule.width - 24;  //地位地址的最大宽度  设置为和胶囊的宽度一致 - 地址的图标位置的大小 24自己设置的数字
		that.searchWidth = screenWidth - headerCapsule.width*2 - (screenWidth - headerCapsule.right)*4 + 14; //搜索框的宽度 = 屏幕宽 - 两个胶囊宽 - 4个胶囊距离最右边的宽度 留两位间距
		
		//这是支付宝获取胶囊的方式 暂时没写  先记录在这里
		
		// getPhoneHeight(){
		// 	let that =this
		// 	uni.getSystemInfo({
		// 		success:function(res){
		// 			console.log(res)
		// 			that.globalData.phoneHeight=res.statusBarHeight;
		// 			that.globalData.titleBarHeight = res.titleBarHeight;
		// 			that.globalData.screenHeight = res.screenHeight;
		// 		}
		// 	})
		// }
		
		
	}
}
</script>

css

.headerRelative{width: 100%;background: #fff;position: fixed;top: 0;left: 0;right: 0;z-index: 99999;}
.headerNav{position: fixed;font-size: 26rpx;width: 100%;z-index: 999;}
.left{position: absolute;width: auto;height: max-content;top: 0;bottom: 0;left: 20rpx;margin: auto;}
.iconfont{color: #FFFFFF;text-overflow: ellipsis;overflow: hidden;white-space: nowrap; background: url(../static/images/down.png) no-repeat right;padding-right: 24rpx;background-size: 24rpx;}
.iconfont image{width: 23rpx;height: 42rpx;margin-top: 14rpx;margin-left: 10rpx;}     
.business{width: 100%;}
.bg{position: absolute;width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.7)}
.home-search{position: absolute;}
.home-search .search{ display: inline-block; width: 100%;font-size: 26rpx; color: #fff;background:rgba(255,255,255,0.3) ;border-radius: 100rpx;}
.home-search .search image{float: left; margin-left: 30rpx; margin-right: 20rpx; width: 26rpx; height: 26rpx; margin-top: 18rpx;}
.home-search .search text{float: left;font-size: 24rpx;margin-left: 30rpx;}

记录以下自己工作中的一些有用的，以后方便使用，