使用uniapp开发小程序遇到的坑

1.在使用wx原生导航时，发现字体太小、没有插槽等。缺少灵活性，所以想自定义一个导航，满足需求。

我的需求是把位置选择放在导航部分，自己写比较费时间，于是拿了uniapp的uni-nav-bar组件，用了下插槽。

• 问题1：发现想要悬浮实现之后会有占位缺失的问题，所以我引入了一个占位标签，防止内容部分顶上来。
• 问题2：要想自定义首先去掉原生的导航栏

单页面去除导航栏

"path": "pages/index/index",
"style": {
    "navigationBarTitleText": "首页",
    "navigationStyle": "custom"
}

全局去除导航栏

在pages.json文件下的 globalStyle 下的 navigationStyle 属性设置为 custom

"globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#2989f8",
    "backgroundColor": "#FFFFFF",
    "navigationStyle": "custom"
},

• 问题3：由于手机不同，状态栏的高度也会不同，但是小程序下的 height: var(--status-bar-height) 会失效，变成固定的值25px。

找了很多方法，最后使用 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度再改成标签属性来解决

<template>
	<view class="fiex-zw" :style="{'padding-top': barHeight}">
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				barHeight: 0,
			};
		},
		mounted() {
			this.barHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
		},
	}
</script>

<style lang="scss">
	.fiex-zw{
		height: 44px;
	}
</style>

这样就能适应不同手机下的状态栏高度，实现自定义导航栏效果啦。适应了刘海屏和水滴屏

2.自定义tabBar（底部选项卡）

• 问题1.字体大小不能控制
• 问题2.内部页面打开过多时不能再进行跳转，需关闭多余的页面，导致左上角默认的返回按钮变成hone按钮

使用自定义的组件解决问题