小程序学习笔记(二)json配置项

529 查看

准备工作



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,以后用到再说吧


2018 - 知识虫 - 我的知识库 渝ICP备16002641号-2

渝公网安备 50010702501581号