用uni-app开发自定义微信小程序头部导航

功能更全面的头部可以查看我的新文章 基于uView的头部导航 ：uni-app的自定义头部导航(基于uView 新)_不务正业的小前端的博客-CSDN博客）

---

由于公司需要，学习了uni-app开发小程序，目前了解不多，主要是以微信小程序为主。

uni-app官网：uni-app官网

微信小程序开发文档：微信开放文档

官方介绍uni-app:

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可编译到iOS、Android、H5、以及各种小程序等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。

一套代码编到7个平台，巴拉巴拉巴拉。。。

个人感受（功能很丰富，bug也很丰富）

接下来我会将在项目中用到的一些我感觉还不错的东西记录一下，以供分享以及自己的积累=。=如有不足，请大佬们指教！！

1.环境介绍

     编译器就用官方的 HBuilderX 编译器, 然后好像没了，创建一个uni-app项目就可以开始撸了。

2.首先要先去除小程序自带的头部导航，在page.json文件里的对应的页面的style配置项里加上：

"style":{
    "navigationStyle":"custom"
}

就可以开始自定义导航了。

3.为了适配不同型号手机的头部高度，所以要通过（异步）uni.getSystemInfo()或者（同步）uni.getSystemInfoSync()获取顶部状态栏的高度

得到的状态栏高度可以存vuex里。

（增加，获取头部高度，定义在全局）

/*main.js*/
import Vue from 'vue'
import App from './App'
import store from './store'

Vue.prototype.$store = store
Vue.config.productionTip = false


Vue.prototype.isBarHeight999 = function() {
	return new Promise((resolve, reject) => {
		var that = this
		var isTemp = {}
		uni.getSystemInfo({
			success(res) {
				let totalTopHeight = 68
				if (res.model.indexOf('iPhone X') !== -1) {
					totalTopHeight = 88
				} else if (res.model.indexOf('iPhone') !== -1) {
					totalTopHeight = 64
				}
				isTemp['statusBarHeight'] = res.statusBarHeight
				isTemp['titleBarHeight'] = totalTopHeight - res.statusBarHeight
				isTemp['allHeight'] = totalTopHeight
				resolve(isTemp)
			},
			fail(e) {
				reject(e)
			}
		})
	})
}

App.mpType = 'app'

const app = new Vue({
	store,
	...App
})
app.$mount()

4.在components文件里创建头部导航组件，名字自己起，我这边是navTop.vue，直接上代码：

/*navTop.vue*/

<template>
	<view>
		<view class="nav_top" :style="{height:barHeight.allHeight+'px','background-color':hasBgc}">
			<view class="status-bar" :style="{height:barHeight.statusBarHeight+'px'}"></view>
			<view class="topContent">
				<view v-if="isBack" class="goBack" @click="goBack(backUrl)" hover-class="bgBlack999">
					<image :src="'../static/icon_back_'+backColor+'.png'" mode=""></image>
				</view>
				<view class="title" :style="{color:color}">{{title}}</view>
			</view>
		</view>
		<view v-if="isHeight" class="marginBox" :style="{height:barHeight.allHeight+'px'}"></view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	
	export default {
		props:{
			title:{
				type:String,
				default:'XXX'
			},
			hasBgc:{   //背景色
				type:String,
				default:'#5FCBAD'
			},
			color:{ //字体颜色
				type:String,
				default:'#fff;'
			},
			isBack:{   //是否有返回箭头
				type: Boolean,
				default:false
			},
			backColor:{ //回退箭头颜色
				type:String,
				default:'white'
			},
			isHeight:{   //头部撑开高度
				type:Boolean,
				default:true
			},
			isNavBack:{   //固定返回前面的页面
				type:Boolean,
				default:true
			},
			backUrl:{    //返回到那个页面
				type:String,
				default:'index'
			},
			backNum:{   //返回几个页面
				type:Number,
				default:1
			}
		},
		computed:{
			...mapState(['barHeight'])
		},
		data() {
			return {
			};
		},
		methods:{
			goBack(url){
				if(this.isNavBack){
					const that = this
					uni.navigateBack({
						delta:that.backNum
					})
				}else{
					var isUrl = `/pages/${url}/${url}`
					console.log(isUrl)
					uni.switchTab({
						url: isUrl
					})
				}
			}
		},
		created() {
			if(!this.barHeight.allHeight||!this.barHeight.statusBarHeight){
				this.isBarHeight999().then((isTemp)=>{
					this.$store.state.barHeight = isTemp
				})
			}
		}
	}
</script>

<style lang="scss">
.nav_top{
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 900;
		display: flex;
		flex-direction: column;
		background-color: transparent;
		&.bgColor{
			background-color: #5FCBAD;
		}
		.topContent{
			width: 100vw;
			height: 100upx;
			position: relative;
			.goBack{
				position: absolute;
				top: 0;
				left: 0;
				width: 10vw;
				height: 100upx;
				display: flex;
				align-items: center;
				padding-left: 20upx;
				box-sizing: border-box;
				image{
					width: 40upx;
					height: 42upx;
				}
			}
			.title{
				text-align: center;
				width: 100%;
				height: 100%;
				line-height: 100upx;
				font-size: 40upx;
				font-family:'自定义字体';
			}
		}
	}
</style>

使用：

/*test.vue*/

<template>
	<view>
		<navTop :title="navtop.title" :isHeight="false" hasBgc="red" :color="navtop.color" :isBack="true"></navTop>
	</view>
</template>

<script>
	import navTop from '../../components/navTop.vue'
	
	export default {
		components: {
			navTop
		},
		data() {
			return {
				navtop: {
					title: 'XXX',
					color: '#024230'
				}
			};
		}
	}
</script>

<style lang="scss">

</style>

效果图如下：

已适配大部分机型，具体尺寸可以根据需求自行调整。。

（还有不足之处，慢慢完善吧o(∩_∩)o 哈哈）