1. 配置项列表
    方法名 类型 必填 备注
    globalStyle Object 设置默认页面的窗口表现
    pages Object 设置页面路径及窗口表现
    tabBar Object 设置底部 tab 的表现
    condition Object 启动模式配置

    代码示例:

    1. {
    2. "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
    3. {
    4. "path": "pages/index/index",
    5. "style": {
    6. "navigationBarTitleText": "首页"
    7. }
    8. }, {
    9. "path": "pages/search/search",
    10. "style": {"navigationBarTitleText": "搜索"}
    11. }, {
    12. "path": "pages/rankingList/rankingList",
    13. "style": {"navigationBarTitleText": "排行榜"}
    14. }, {
    15. "path": "pages/dongdongqiang/dongdongqiang",
    16. "style": {"navigationBarTitleText": "神偷冬冬枪"}
    17. }, {
    18. "path": "pages/me/me",
    19. "style": {"navigationBarTitleText": "额滴"}
    20. }
    21. ],
    22. "tabBar": {
    23. "color": "#8a8a8a",
    24. "selectedColor": "#d4237a",
    25. "borderStyle": "black",
    26. "backgroundColor": "#ffffff",
    27. "list": [{
    28. "pagePath": "pages/index/index",
    29. "text": "首页",
    30. "iconPath": "static/home_normal.png",
    31. "selectedIconPath": "static/home.png"
    32. },
    33. {
    34. "pagePath": "pages/search/search",
    35. "text": "搜索",
    36. "iconPath": "static/home_normal.png",
    37. "selectedIconPath": "static/home.png"
    38. },
    39. {
    40. "pagePath": "pages/rankingList/rankingList",
    41. "text": "排行榜",
    42. "iconPath": "static/home_normal.png",
    43. "selectedIconPath": "static/home.png"
    44. },
    45. {
    46. "pagePath": "pages/dongdongqiang/dongdongqiang",
    47. "text": "咚咚抢",
    48. "iconPath": "static/home_normal.png",
    49. "selectedIconPath": "static/home.png"
    50. },
    51. {
    52. "pagePath": "pages/me/me",
    53. "text": "我的",
    54. "iconPath": "static/home_normal.png",
    55. "selectedIconPath": "static/home.png"
    56. }
    57. ]
    58. },
    59. "globalStyle": {
    60. "navigationBarTextStyle": "black", //导航标题颜色,仅支持 black 和 white
    61. "navigationBarTitleText": "uni-app", //导航栏标题文本内容
    62. "navigationBarBackgroundColor": "#F8F8F8", //导航栏背景颜色
    63. "backgroundColor": "#F8F8F8" //窗口的背景色 微信小程序
    64. }
    65. }

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

    1. navigationBarBackgroundColor HexColor #000000 导航栏背景颜色
    2. navigationBarTextStyle String white 导航栏标题颜色,仅支持 black/white
    3. navigationBarTitleText String 导航栏标题文字内容
    4. navigationStyle String default 导航栏样式,仅支持 default/custom
    5. backgroundColor HexColor #ffffff 窗口的背景色 微信小程序

    注意:navigationStyle 只在 pages.json->globalStyle 中设置生效。开启 custom 后,所有窗口均无导航栏。
    pages
    接收一个数组,来指定应用由哪些页面组成。每一项代表对应页面的信息,应用中新增/减少页面,都需要对 pages 数组进行修改。
    文件名不需要写后缀,框架会自动寻找路径下的页面资源。
    注意:pages节点的第一项为应用入口页(即首页)。
    代码示例:
    开发目录为:

    1. pages/
    2. pages/index/index.vue
    3. pages/me/me.vue
    4. mainfest.json
    5. pages.json

    那么需要在page中填写

    1. pages": [
    2. {
    3. "path": "pages/index/index",
    4. "style": {
    5. "navigationBarTitleText": "首页"
    6. }
    7. }, {
    8. "path": "pages/me/me",
    9. "style": {
    10. "navigationBarTitleText": "我的"
    11. }
    12. },

    pages.style
    用于设置每个页面的状态栏、导航条、标题、窗口背景色等。

    1. navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如"#000000"
    2. navigationBarTextStyle String white 导航栏标题颜色,仅支持 black/white
    3. navigationBarTitleText String 导航栏标题文字内容
    4. backgroundColor HexColor #ffffff 窗口的背景色 微信小程序
    5. backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark/light
    6. enablePullDownRefresh Boolean false 是否开启下拉刷新,详见页面相关事件处理函数
    7. onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为px
    8. navigationStyle String default 导航栏样式,仅支持 default/customcustom 模式可自定义导航栏,只保留右上角胶囊状的按钮。 微信小程序
    9. backgroundColorTop String #ffffff 顶部窗口的背景色。 微信小程序且为 iOS
    10. backgroundColorBottom String #ffffff 底部窗口的背景色。 微信小程序且为 iOS

    代码示例:

    1. pages": [
    2. {
    3. "path": "pages/index/index",
    4. "style": {
    5. "navigationBarTitleText": "首页"
    6. }
    7. },

    tabBar
    如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页。
    Tips
    当设置 position 为 top 时,将不会显示 icon
    tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
    属性说明:

    1. color HexColor tab 上的文字默认颜色
    2. selectedColor HexColor tab 上的文字选中时的颜色
    3. backgroundColor HexColor tab 的背景色
    4. borderStyle String black tabbar 上边框的颜色,仅支持 black/white
    5. list Array tab 的列表,详见 list 属性说明,最少2个、最多5 tab
    6. position String bottom 可选值 bottomtop

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

    1. pagePath String 页面路径,必须在 pages 中先定义
    2. text String tab 上按钮文字
    3. iconPath String 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion top 时,此参数无效,不支持网络图片
    4. selectedIconPath String 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion top 时,此参数无效

    代码示例:

    1. "tabBar": {
    2. "color": "#8a8a8a",
    3. "selectedColor": "#d4237a",
    4. "borderStyle": "black",
    5. "backgroundColor": "#ffffff",
    6. "list": [{
    7. "pagePath": "pages/index/index",
    8. "text": "首页",
    9. "iconPath": "static/home_normal.png",
    10. "selectedIconPath": "static/home.png"
    11. },
    12. {
    13. "pagePath": "pages/search/search",
    14. "text": "搜索",
    15. "iconPath": "static/home_normal.png",
    16. "selectedIconPath": "static/home.png"
    17. },
    18. {
    19. "pagePath": "pages/rankingList/rankingList",
    20. "text": "排行榜",
    21. "iconPath": "static/home_normal.png",
    22. "selectedIconPath": "static/home.png"
    23. },
    24. {
    25. "pagePath": "pages/dongdongqiang/dongdongqiang",
    26. "text": "咚咚抢",
    27. "iconPath": "static/home_normal.png",
    28. "selectedIconPath": "static/home.png"
    29. },
    30. {
    31. "pagePath": "pages/me/me",
    32. "text": "我的",
    33. "iconPath": "static/home_normal.png",
    34. "selectedIconPath": "static/home.png"
    35. }
    36. ]
    37. },