顶部导航栏和底部导航栏设置

在正式开发小程序的功能之前，首先需要确定小程序的主要框架。

创建几个需要底部导航栏切换的页面

我的小程序需要创建的页面是“首页”、“我想要”、“私信”、“我的”，“首页”已经存在于项目中，不需要重复创建。创建过程如下：

创建成功，不仅创建了star.vue，Hbuilder还自动帮助创建了star文件夹

除此之外，还帮助我们在pages.json文件中进行了配置

同理，继续创建其他文件

使用阿里巴巴矢量图标库

官网：阿里巴巴矢量图标库

首先注册账号并登录，然后点击我的项目

创建一个新项目

搜索图标添加到项目中

将想要的图标添加到购物车中

查看购物车

将购物车的图标添加到项目中

下载项目的图标到本地

将下载的文件解压之后，把里面的.ttf文件拿出来

将ttf文件存储到项目的静态资源目录下面

在项目中使用

	"tabBar": {
		"iconfontSrc": "static/icon/iconfont.ttf",
		"color": "#333",
		"selectedColor": "#2b92ff",
		"list": [
			{
				"text": "首页",
				"pagePath": "pages/index/index",
				"iconfont": {
					"text": "\ue67e",
					"selectedText": "\ue67e"
				}
			},{
				"text": "我想要",
				"pagePath": "pages/star/star"
			},{
				"text": "消息",
				"pagePath": "pages/message/message"
			},{
				"text": "我的",
				"pagePath": "pages/my/my"
			}
		]
	}

运行到浏览器中，查看网页效果，图标正常

运行到小程序中，查看效果，非常伤心，并不能正常使用

虽然在tabBar中无法使用iconfont，但是在页面的其他地方还是可以使用的，请继续后面的操作

将复制的在线代码替换掉原有的代码，下图是替换前

下图是替换后

之后，在每个链接前面添加上https

最后在App.vue文件中引入iconfont.css

到这里已经大功告成了，可以使用了，想要使用哪个图标，先去复制图标的unicode，如下图

在页面中使用

显示成功

完成底部导航栏tabBar

非常遗憾，上面引入的iconfont没办法再tabBar中使用，只能先把图标下载下来，然后再引入了

将下载的图标文件放入到项目的静态文件下面

使用图标

"tabBar": {
		"color": "#333",
		"selectedColor": "#2b92ff",
		"list": [
			{
				"text": "首页",
				"pagePath": "pages/index/index",
				"iconPath": "static/icon/tabBar/首页.png",
				"selectedIconPath": "static/icon/tabBar/首页.png"
			},{
				"text": "我想要",
				"pagePath": "pages/star/star",
				"iconPath": "static/icon/tabBar/收藏.png",
				"selectedIconPath": "static/icon/tabBar/收藏.png"
			},{
				"text": "消息",
				"pagePath": "pages/message/message",
				"iconPath": "static/icon/tabBar/消息.png",
				"selectedIconPath": "static/icon/tabBar/消息.png"
			},{
				"text": "我的",
				"pagePath": "pages/my/my",
				"iconPath": "static/icon/tabBar/我的.png",
				"selectedIconPath": "static/icon/tabBar/我的.png"
			}
		]
	}

• iconPath：未选中状态的图标
• selectedIconPath：选中之后的图标

我这边为了偷懒，未选中和选中状态都使用相同的图标，你们可以使用不同的图标。

设置页面顶部导航栏标题

• navigationBarTitleText：导航的标题
• enablePullDownRefresh：页面是否允许下拉刷新
  

样式优化

{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages

		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"enablePullDownRefresh": true,
				// 设置背景颜色
				"navigationBarBackgroundColor": "#2b92ff",
				// 设置标题的颜色
				"navigationBarTextStyle": "white"
			}
		}, {
			"path": "pages/star/star",
			"style": {
				"navigationBarTitleText": "我想要",
				"enablePullDownRefresh": true,
				"navigationBarBackgroundColor": "#2b92ff",
				"navigationBarTextStyle": "white"
			}

		}, {
			"path": "pages/my/my",
			"style": {
				"navigationBarTitleText": "我的",
				"enablePullDownRefresh": true,
				"navigationBarBackgroundColor": "#2b92ff",
				"navigationBarTextStyle": "white"
			}

		}, {
			"path": "pages/message/message",
			"style": {
				"navigationBarTitleText": "消息",
				"enablePullDownRefresh": true,
				"navigationBarBackgroundColor": "#2b92ff",
				"navigationBarTextStyle": "white"
			}

		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {},
	"tabBar": {
		"color": "#292929",
		"selectedColor": "#2b92ff",
		"backgroundColor": "#ffffff",
		"list": [{
			"text": "首页",
			"pagePath": "pages/index/index",
			"iconPath": "static/icon/tabBar/首页.png",
			"selectedIconPath": "static/icon/tabBar/首页 (1).png"
		}, {
			"text": "我想要",
			"pagePath": "pages/star/star",
			"iconPath": "static/icon/tabBar/收藏.png",
			"selectedIconPath": "static/icon/tabBar/收藏 (1).png"
		}, {
			"text": "消息",
			"pagePath": "pages/message/message",
			"iconPath": "static/icon/tabBar/消息.png",
			"selectedIconPath": "static/icon/tabBar/消息 (1).png"
		}, {
			"text": "我的",
			"pagePath": "pages/my/my",
			"iconPath": "static/icon/tabBar/我的.png",
			"selectedIconPath": "static/icon/tabBar/我的 (1).png"
		}]
	}
}