- 配置项列表
方法名 | 类型 | 必填 | 备注 |
---|---|---|---|
globalStyle | Object | 否 | 设置默认页面的窗口表现 |
pages | Object | 是 | 设置页面路径及窗口表现 |
tabBar | Object | 否 | 设置底部 tab 的表现 |
condition | Object | 否 | 启动模式配置 |
代码示例:
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}, {
"path": "pages/search/search",
"style": {"navigationBarTitleText": "搜索"}
}, {
"path": "pages/rankingList/rankingList",
"style": {"navigationBarTitleText": "排行榜"}
}, {
"path": "pages/dongdongqiang/dongdongqiang",
"style": {"navigationBarTitleText": "神偷冬冬枪"}
}, {
"path": "pages/me/me",
"style": {"navigationBarTitleText": "额滴"}
}
],
"tabBar": {
"color": "#8a8a8a",
"selectedColor": "#d4237a",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/home_normal.png",
"selectedIconPath": "static/home.png"
},
{
"pagePath": "pages/search/search",
"text": "搜索",
"iconPath": "static/home_normal.png",
"selectedIconPath": "static/home.png"
},
{
"pagePath": "pages/rankingList/rankingList",
"text": "排行榜",
"iconPath": "static/home_normal.png",
"selectedIconPath": "static/home.png"
},
{
"pagePath": "pages/dongdongqiang/dongdongqiang",
"text": "咚咚抢",
"iconPath": "static/home_normal.png",
"selectedIconPath": "static/home.png"
},
{
"pagePath": "pages/me/me",
"text": "我的",
"iconPath": "static/home_normal.png",
"selectedIconPath": "static/home.png"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black", //导航标题颜色,仅支持 black 和 white
"navigationBarTitleText": "uni-app", //导航栏标题文本内容
"navigationBarBackgroundColor": "#F8F8F8", //导航栏背景颜色
"backgroundColor": "#F8F8F8" //窗口的背景色 微信小程序
}
}
globalStyle
用于设置应用的状态栏、导航条、标题、窗口背景色等。
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色
navigationBarTextStyle String white 导航栏标题颜色,仅支持 black/white
navigationBarTitleText String 导航栏标题文字内容
navigationStyle String default 导航栏样式,仅支持 default/custom。
backgroundColor HexColor #ffffff 窗口的背景色 微信小程序
注意:navigationStyle 只在 pages.json->globalStyle 中设置生效。开启 custom 后,所有窗口均无导航栏。
pages
接收一个数组,来指定应用由哪些页面组成。每一项代表对应页面的信息,应用中新增/减少页面,都需要对 pages 数组进行修改。
文件名不需要写后缀,框架会自动寻找路径下的页面资源。
注意:pages节点的第一项为应用入口页(即首页)。
代码示例:
开发目录为:
pages/
pages/index/index.vue
pages/me/me.vue
mainfest.json
pages.json
那么需要在page中填写
pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}, {
"path": "pages/me/me",
"style": {
"navigationBarTitleText": "我的"
}
},
pages.style
用于设置每个页面的状态栏、导航条、标题、窗口背景色等。
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如"#000000"
navigationBarTextStyle String white 导航栏标题颜色,仅支持 black/white
navigationBarTitleText String 导航栏标题文字内容
backgroundColor HexColor #ffffff 窗口的背景色 微信小程序
backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark/light
enablePullDownRefresh Boolean false 是否开启下拉刷新,详见页面相关事件处理函数
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为px
navigationStyle String default 导航栏样式,仅支持 default/custom。custom 模式可自定义导航栏,只保留右上角胶囊状的按钮。 微信小程序
backgroundColorTop String #ffffff 顶部窗口的背景色。 微信小程序且为 iOS
backgroundColorBottom String #ffffff 底部窗口的背景色。 微信小程序且为 iOS
代码示例:
pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
tabBar
如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页。
Tips
当设置 position 为 top 时,将不会显示 icon
tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
属性说明:
color HexColor 是 tab 上的文字默认颜色
selectedColor HexColor 是 tab 上的文字选中时的颜色
backgroundColor HexColor 是 tab 的背景色
borderStyle String 否 black tabbar 上边框的颜色,仅支持 black/white
list Array 是 tab 的列表,详见 list 属性说明,最少2个、最多5个 tab
position String 否 bottom 可选值 bottom、top
其中 list 接收一个数组,数组中的每个项都是一个对象,其属性值如下:
pagePath String 是 页面路径,必须在 pages 中先定义
text String 是 tab 上按钮文字
iconPath String 否 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片
selectedIconPath String 否 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效
代码示例:
"tabBar": {
"color": "#8a8a8a",
"selectedColor": "#d4237a",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/home_normal.png",
"selectedIconPath": "static/home.png"
},
{
"pagePath": "pages/search/search",
"text": "搜索",
"iconPath": "static/home_normal.png",
"selectedIconPath": "static/home.png"
},
{
"pagePath": "pages/rankingList/rankingList",
"text": "排行榜",
"iconPath": "static/home_normal.png",
"selectedIconPath": "static/home.png"
},
{
"pagePath": "pages/dongdongqiang/dongdongqiang",
"text": "咚咚抢",
"iconPath": "static/home_normal.png",
"selectedIconPath": "static/home.png"
},
{
"pagePath": "pages/me/me",
"text": "我的",
"iconPath": "static/home_normal.png",
"selectedIconPath": "static/home.png"
}
]
},