uniapp开发微信小程序/APP，配置某个页面隐藏原生导航栏

uniapp开发微信小程序/APP，隐藏其中某个页面的原生导航栏，需要在pages.json中设置如下代码：

{
	"path": "feedback/feedbackSuccess",//页面路径
	"style": {
		"navigationBarTitleText": "反馈",//导航栏显示的文字
		"navigationStyle": "custom",//禁用原生导航栏，微信小程序可用
		"app-plus": {  
		    "titleNView": false //禁用原生导航栏，APP和H5可用
		  } 
	},
	"meta": {
		"auth": false, //需要登录
		"async": true, //是否同步
		// "title": "反馈",//标题
		"group": "反馈"//分组
	}
}

哪个页面需要隐藏导航栏，就将注释中对应的代码写进哪个页面的“style”里面

隐藏导航栏之后，我们可能需要使用自定义导航栏
vue页面

<!-- 自定义导航栏 -->
<view class="">
	<view class="status_bar">
		<!-- 这里是状态栏 -->
		<!-- 导航栏需要让出手机最上部分显示电量、运营商信号等信息的状态栏，所以uniapp提供了一个样式 -->
	</view>
	<view class="top-bar-box">
		<!-- 从这里开始写我们自己的导航栏，定义样式 -->
	</view>
</view>

.css部分

.status_bar {
	height: var(--status-bar-height);
	background-color: #007AFF;
	width: 100%;
}

使用自定义导航栏按钮

uniapp官方更推荐尽可能使用自定义导航栏按钮而不是自定义导航栏来实现业务需求，因为自定义的导航栏可能会导致性能问题，比如下拉刷新问题。以下是配置自定义导航栏按钮的方法
1、在page.json页面

// 自定义导航栏按钮
"app-plus": {
	"titleNView": {
		"buttons": [{
			"text": "\ue563",//矢量图标
			"fontSrc": "/static/uni.ttf",//矢量图文件位置
			"fontSize": "22px",//按钮大小
			"float": "left"//按钮的位置
		}, {
			"text": "\ue612",
			"fontSrc": "/static/uni.ttf",
			"fontSize": "22px",
			"float": "right"
		}]
	}
}

1、在vue页面监听用户点击的是哪个按钮，分别执行之后的逻辑操作

// 点击原生导航事件，位置写在methods上方，不要放在methods里面
onNavigationBarButtonTap(e) {
	if (e.index == 0) {
		// 用户点击了左侧按钮，请在这里处理接下来的逻辑
	} else if (e.index == 1) {
		// 用户点击右侧按钮
	}
}

注意：原生导航栏与自定义按钮导航栏均为原生组件，前端组件是无法覆盖在原生组件之上的（即便调整z-index），所以如果业务需要覆盖导航栏，需要使用自定义导航栏。

题外话：用uniapp开发微信小程序时，如果有组件必须在主包的components下或者自己分包的components下，不能跨包引入，否则会报错（组件找不到），而H5页面正常。