准备工作



14-46-45.jpg

1. 创建my页面（基础工作不在复述，参照上一篇）；
2. 创建图片文件夹images，及子目录tabBar；
3. 前往http://iconfont.cn，下载任意两个icon及对应的高亮颜色版，60px，保存到tabBar目录下；

改变下导航栏



14-55-40.jpg

在app.json中添加window相关配置项：
注意：json中是不能加注释的，这里注释只是为了说明，请自行删除

"window":{
        "navigationBarTitleText":"小程序学习笔记",   //导航栏标题
        "navigationBarTextStyle":"black",  //标题颜色，默认black，可选white
        "navigationBarBackgroundColor":"#eee",  //导航栏背景色，默认#000

        //下面影响的是下拉刷新的部分，还没研究出怎么实现
        "backroundColor":"#555",    //窗口背景色，默认#fff
        "backroundTextStyle":"dark",   //下拉字体样式，默认dark，可选light
        "enablePullDownRefresh": true  //是否支持下拉刷新，默认false
    }

写个tabBar吧



15-07-57.jpg

tabBar最少2个，最多5个tab
在app.json中添加tabBar配置项：

"tabBar":{
        "color":"#999",  //字体颜色，必填
        "selectedColor":"#56abe4", //选中状态字体颜色，必填
        "backroundColor":"#fff",  //背景色，必填
        "borderStyle":"white", //上边框颜色，非必填，默认black，可选white
        //list数组，为每一个tab的配置，必填。tab排序与数组排序一致       
        "list":[
            {
                "pagePath":"pages/index/index",   //页面路径
                "iconPath":"images/tabBar/article.png",  //icon路径
                "selectedIconPath":"images/tabBar/articleHL.png",  //选中状态icon路径
                "text":"笔记"  //文字
            },
            {
                "pagePath":"pages/my/my",
                "iconPath":"images/tabBar/my.png",
                "selectedIconPath":"images/tabBar/myHL.png",
                "text":"我的"
            }
        ]
    }

page的json



15-19-35.jpg

page也是支持json文件的，不过只能配置window相关的，因此无需写window这个键
例如，在my.json添加下面代码，改变了标题栏文本为“我的”，而不是“小程序学习笔记”。

{
    "navigationBarTitleText":"我的"
}

json配置项里还剩下networkTimeOut 和 debug，以后用到再说吧