- 配置项列表
| 方法名 | 类型 | 必填 | 备注 |
|---|---|---|---|
| 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/whitenavigationBarTitleText String 导航栏标题文字内容navigationStyle String default 导航栏样式,仅支持 default/custom。backgroundColor HexColor #ffffff 窗口的背景色 微信小程序
注意:navigationStyle 只在 pages.json->globalStyle 中设置生效。开启 custom 后,所有窗口均无导航栏。
pages
接收一个数组,来指定应用由哪些页面组成。每一项代表对应页面的信息,应用中新增/减少页面,都需要对 pages 数组进行修改。
文件名不需要写后缀,框架会自动寻找路径下的页面资源。
注意:pages节点的第一项为应用入口页(即首页)。
代码示例:
开发目录为:
pages/pages/index/index.vuepages/me/me.vuemainfest.jsonpages.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/whitenavigationBarTitleText String 导航栏标题文字内容backgroundColor HexColor #ffffff 窗口的背景色 微信小程序backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark/lightenablePullDownRefresh Boolean false 是否开启下拉刷新,详见页面相关事件处理函数onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为pxnavigationStyle String default 导航栏样式,仅支持 default/custom。custom 模式可自定义导航栏,只保留右上角胶囊状的按钮。 微信小程序backgroundColorTop String #ffffff 顶部窗口的背景色。 微信小程序且为 iOSbackgroundColorBottom 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/whitelist Array 是 tab 的列表,详见 list 属性说明,最少2个、最多5个 tabposition 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"}]},
