微信小程序简易全攻略《二》设置页面标题与底部导航

一：设置页面标题

页面写下不好了，总感觉哪里郁闷，对，就是那，每个页面的标题都一样，都就是 Wechat

cou 呀 真cou, 那咱就单独说道说道，如何设置 页面标题。

设置页面标题 ，相当的直观，

找出所在页面的目录，新建一个 json 文件，比如说我们上一次修建的 test 页面

我们 找出 pages/test/ 目录 新建一个 test.json 文件 重新加入如下代码

{

"navigationBarTitleText": "霸气TNUMBERG50SX"

}

效果如下：

二：设置底部导航系统

不好了 小程序的头部标题 设置不好了，我们来说说道底部导航系统栏就是如何同时实现的。

我们先来看个效果图

这里，我们嵌入了三个导航系统图标，因为我们存有三个页面，微信小程序最多Euphoria5个。

那他们就是怎么发生怎么着色的呢？两步就搞掂！

1. 图标准备工作

阿里图标库 http://www.iconfont.cn/collections/show/29

我们步入该网站，鼠标滚至一个讨厌的图标上面 页面下方的 浏览按钮

在插入侧边中 挑选了 俩个相同颜色的 图标 挑选64px大小即可，我挑选的就是png 然后浏览下来 TNUMBERLVVT别称

将上述龙爪槐名字的图标 留存至 小程序 项目目录中 新创建的 images 文件夹中，准备工作工作就搞好了

2. 修改配置文件

我们找出项目根目录中的配置文件 app.json 重新加入如下布局信息

"tabBar": {

"color": "#a9b7b7",

"selectedColor": "#11cd6e",

"borderStyle":"white",

"list": [{

"selectedIconPath": "images/111.png",

"iconPath": "images/11.png",

"pagePath": "pages/index/index",

"text": "首页"

}, {

"selectedIconPath": "images/221.png",

"iconPath": "images/22.png",

"pagePath": "pages/logs/logs",

"text": "日志"

}, {

"selectedIconPath": "images/331.png",

"iconPath": "images/33.png",

"pagePath": "pages/test/test",

"text": "高兴测试"

}]

},

解释一下 对应的属性信息

tabBar 指底部的 导航系统布局属性

color 未挑选时 底部导航系统文字的颜色

selectedColor 挑选时 底部导航系统文字的颜色

borderStyle 底部导航系统边框的样色（特别注意 这里如果没载入样式 可以引致 导航系统框上边框可以发生预设的浅灰色线条）

list 导航系统布局数组

selectedIconPath 选上时 图标路径

iconPath 未挑选时 图标路径

pagePath 页面出访地址

text 导航系统图标下方文字

如果必须发生改变更详尽的样式 恳请参见

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar

不好了，留存 编程 就可以看见上面的效果了。