文档中心 > 淘应用文档

淘应用-框架-配置

更新时间:2018/01/10 访问次数:657

配置

app.config.json文件用来对淘应用进行全局配置,决定页面文件的路径、窗口表现、设置多 tab 等。

以下是一个包含了所有配置选项的 app.config.json

{
    "pages": [
        "pages/test/test.js",
        "pages/tida/tida.js"
    ],
    "window": {
        "navigationBarBackgroundColor": "#d81e06",
        "navigationBarTextStyle": "#ffffff",
        "navigationBarTitleText": "snipcode demo",
        "isShowNavigationBar": true
    },
    "tabBar": {
        "color": "#515151",
        "selectedColor": "#d81e06",
        "backgroundColor": "#ffffff",
        "borderStyle": "#999999",
        "position": "bottom",
        "list": [
            {
                "pageName": "pages/tida/tida.js",
                "text": "tida",
                "iconPath": "http://gw.alicdn.com/mt/TB1vPEgd3oQMeJjy0FnXXb8gFXa-64-64.png",
                "selectedIconPath": "http://gw.alicdn.com/mt/TB1Evv9dYwTMeJjSszfXXXbtFXa-64-64.png"
            },
            {
                "pageName": "pages/test/test.js",
                "text": "test",
                "iconPath": "http://gw.alicdn.com/mt/TB1vPEgd3oQMeJjy0FnXXb8gFXa-64-64.png",
                "selectedIconPath": "http://gw.alicdn.com/mt/TB1Evv9dYwTMeJjSszfXXXbtFXa-64-64.png"
            }
        ]
    }
}

app.config.json 配置项列表

属性 类型 必填 描述
pages String Array 设置页面路径
window Object 设置默认页面的窗口表现
tabBar Object 设置 tab 的表现

pages

接受一个数组,每一项都是字符串,来指定淘应用由哪些页面组成。每一项代表对应页面的【路径+文件名】信息,**在无tabBar配置时,数组的第一项代表淘应用的初始页面。淘应用中新增/减少页面,都需要对 pages 数组进行修改。**

淘应用每一个页面对应pages目录下的一个文件夹,如开发目录为:

pages/index/index.js

pages/index/component.jsx

pages/test/test.js

app.config.json

abc.json

则需要在 app.config.json 中写:

{
  "pages":[
    "pages/index/index.js",
    "pages/test/test.js"
  ]
}

注意,每个页面需要一个入口js文件。

window

用于设置淘应用的状态栏、导航条、标题、窗口背景色。

属性 类型 默认值 描述
navigationBarBackgroundColor String 导航栏背景颜色
navigationBarTextStyle String 导航栏标题颜色
navigationBarTitleText String 导航栏标题文字内容
isShowNavigationBar Boolean true 是否显示navigationBar

如 app.config.json :

"window": {
  "navigationBarBackgroundColor": "#d81e06",
  "navigationBarTextStyle": "#ffffff",
  "navigationBarTitleText": "snipcode demo",
  "isShowNavigationBar": true
}

tabBar

如果淘应用是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

Tip:
  • tabBar 中的 list 是一个数组,**只能配置最少2个、最多5个 tab**,tab 按数组的顺序排序。

属性说明:

属性 类型 必填 默认值 描述
color HexColor #333333 tab 上的文字默认颜色
selectedColor HexColor #ff4400 tab 上的文字选中时的颜色
backgroundColor HexColor #fafafa tab 的背景色
borderStyle HexColor #eeeeee tabbar上边框的颜色
position String 可选值 bottom、top
list Array tab 的列表,详见 list 属性说明,最少2个、最多5个 tab

其中 list 接受一个数组,数组中的每个项都是一个对象,其属性值如下:

属性 类型 必填 说明
pageName String 页面路径,必须在 pages 中先定义
text String tab 上按钮文字
iconPath String 图片路径
selectedIconPath String 选中时的图片路径

FAQ

关于此文档暂时还没有FAQ
返回
顶部