应用配置 app.json

app.json 是应用的全局配置,包括了应用内所有页面的导航栏、界面表现等。默认生成的应用中 app.json 的配置内容如下:

代码节选自:app.json
{
    "navi": {
        "type": "classical-white"
    },
    "pages": {
        "home": {
            "navi": {
                "type": "classical-blue",
                "title": "首页"
            },
            "disablePageBounce": true  // 是否禁用页面回弹功能,默认false,仅支持iOS
        }
    }
}

在该配置中,common表示所有页面都会默认使用的配置,pages下面是具体页面的配置,可以覆盖默认的配置。两者的配置项是相同的。再来看一下这些配置项的含义:

  1. navi 字段:全局的导航栏配置,可以在页面中单独进行配置。
  2. pages 字段:每个页面的具体配置,key 值是页面的名称。

navi导航栏配置

其中 navi 的配置,比较复杂,其基础配置如下:

{
    "common": {
        "navi": {
            "type": "none|classical-blue|classical-white|custom",
            "color": "#ffffff", // 只有 type == custom的时候才生效
            "title": "标题" // 页面的标题
        }
    }
}

如果这些配置还不够用,那么还有更多的配置选项。有冲突的地方,此配置会覆盖上文的基础配置:

{
    "common": {
        "navi": {
            "type": "none|classical-blue|classical-white|custom",
            "color": "#ffffff", // 只有 type == custom的时候才生效
            "title": "标题", // 页面的标题
            "left": {
                // 在页面可以通过'navi:[tagname]'的方式绑定其点击事件
                // right,center配置tagname效果相同,同一个页面不要使用两个相同的tagname
                "tagname": "标识符,默认left", 
                "color": "前景色,默认 #FFFFFF",
                "highlightColor": "点击高亮色, 默认#80FFFFFF"
            },
            "center": {
                "type": "normal|text-image",
                // normal状态
                "param": {
                    "tagname": "标识符,默认title",
                    "title": "标题,默认''",
                    "color": "#FFFFFF",
                    "highlightColor": "#80FFFFFF"
                },
                //text-image类型
                "param": {
                    "tagname": "标识符,默认title",
                    "title": "标题,默认''",
                    "color": "#FFFFFF",
                    "highlightColor": "#80FFFFFF",
                    "imageURL": "",
                    "icon": '',
                    "iconColor": '',
                    "iconHighlightColor": ''
                }
            },
            "right": [
                // 配置同center.param
                {
                    "tagname": "",
                    "title": "''",
                    "color": "",
                    "highlightColor": "",
                    "imageURL": "",
                    "icon": '',
                    "iconColor": '',
                    "iconHighlightColor": ''
                }
            ]
        }
    }
}