uni-app 添加顶部导航栏并且更换图标；动态判断导航栏消息提醒的小红点是否显示

效果如上图所示，点击消息按钮跳转到新页面。

page.json中如下配置：

{
	"path": "pages/index/index",
	// "style": {
	// 	"navigationStyle":"custom"
	// }
	"style" : {  
		"navigationBarTitleText" : "北海救助局移动平台",  
		"app-plus" : {  
			"titleNView" : {  
				"buttons" : [  
					//显示小红点
					{  
						"text": "\ue63e",
						"fontSrc": "/static/img/xiaoxi.ttf",
						"fontSize" : "24",  
						"redDot" : true  
					}
					//显示消息条数
					// {  
					// 	"text": "\ue534",  
					// 	"fontSrc": "/static/uni.ttf",  
					// 	"fontSize": "22px",   
					// 	"badgeText" : "12"  
					// }  
				]  
			}  
		}  
	}  
},

在项目中引入字体图标的方法如下：
1.在阿里图标库找到想要的图标，并加入购物车

2.在右上角购物车中找到下载代码按钮，并下载下来

3.解压缩下载完成的文件，如下，把文件里的iconfont.ttf放到static文件夹里，然后再打开iconfont.css里查看unicode编码


4.最后把对应图标的编码填写到page.json的配置项里text，需要写成一个"\u***"，然后重启
5. 导航图标的点击事件如下：

onNavigationBarButtonTap: function() {  
	uni.navigateTo({
	    url: '../remind/index',
		success: res => {},
		fail: (err) => {console.log(err)},
		complete: (data) => {}
	});  
},

6.动态判断是否显示消息提醒的小红点

if(data.length==0) {
	// #ifdef APP-PLUS  
	var webView = this.$mp.page.$getAppWebview();  
	//隐藏角标
	webView.hideTitleNViewButtonRedDot({
		index:0,
	}); 
	// #endif
} else {
	// #ifdef APP-PLUS
	var webView = this.$mp.page.$getAppWebview();  
	//显示角标
	webView.showTitleNViewButtonRedDot({
		index:0,
	}); 
	// #endif
}