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

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

uni-app官网：https://uniapp.dcloud.io/

微信小程序开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/

官方介绍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*/

使用：

/*test.vue*/

效果图如下：

 

 

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

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