# 微信小程序开发之-app.json

GuangdongQi

发布于 2018-05-24 17:42:54

1.1K0

发布于 2018-05-24 17:42:54

文章被收录于专栏：Guangdong Qi Guangdong QiGuangdong Qi

认识app.json

app.json官方给的定义是小程序 公共设置

在这里面可以配置的东西有官方给的定义 微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tabbar

也就是在iOS中 baseViewController、navController、tabbarController的一个结合文件

下面剖析一下这个文件：

app.json剖析

{
    "pages": [],
    "window": {},
    "tabBar": {},
    "networkTimeout": {},
    "debug": true
}

pages 存放页面路径类型为Array 是唯一一个在app.json必须存在的配置项 接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。文件名不需要写文件后缀，因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。数组元素最少要2个，最多5个比如我有四个tabbaritem 让pages一一对应代码如下

"pages": [
    "pages/index/index",
    "pages/order/order",
    "pages/selete/selete",
    "pages/me/me"
  ],

2.window 类型为Object 可选则不设置，他的作用是设置默认页面的窗口表现，也就是用于设置小程序的状态栏、导航条、标题、窗口背景色。

官方属性图：

image.png

代码如下：

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ff7e67",
    "navigationBarTitleText": "Q点餐",
    "navigationBarTextStyle": "white"
    "backgroundColor": "#f3f3f3",
    "backgroundTextStyle": "light"
  },

3.tabBar 类型为Object，可以不设置先看我设置tabbar的完整代码：

"tabBar": {

    "color": "#2D2E3B",
    "selectedColor": "#ff7e67",
    "backgroundColor":"#ffffff",
    "borderStyle":"black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "image/tabbar/icon_tabbar_home_n.png",
        "selectedIconPath": "image/tabbar/icon_tabbar_home_s.png"
      },
      {
        "pagePath": "pages/order/order",
        "text": "点菜",
        "color": "#fca900",
        "iconPath": "image/tabbar/icon_tabbar_order_n.png",
        "selectedIconPath": "image/tabbar/icon_tabbar_order_s.png"
      },
      {
        "pagePath": "pages/selete/selete",
        "text": "已选",
        "color": "#fca900",
        "iconPath": "image/tabbar/icon_tabbar_selected_n.png",
        "selectedIconPath": "image/tabbar/icon_tabbar_selected_s.png"
      },
      {
        "pagePath": "pages/me/me",
        "text": "我",
        "color":"#fca900",
        "iconPath": "image/tabbar/icon_tabbar_me_n.png",
        "selectedIconPath": "image/tabbar/icon_tabbar_me_s.png"
      }
    ]
  },

代码解读

"tabBar": {
    "color": tab 上的文字默认颜色
    
    "selectedColor":tab 上的文字选中时的颜色
    
    "backgroundColor":tab 的背景色
    
    "borderStyle":tabbar上边框的颜色， 仅支持 black/white
    
    "position":默认bottom 可选值 bottom、top， 当设置 position 为 top 时，将不会显示 icon
    
    "list": [tab 的列表，最少2个、最多5个 tab
    
                {
                "pagePath":页面路径，必须在 pages 中先定义 必须设置
                "text": tab 上按钮文字 必须设置
                "iconPath":图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效
                "selectedIconPath":选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效
                },
                {第二个tabbaritem设置
                },
                {第三个tabbaritem设置
                },
                {第四个tabbaritem设置
                }
    ]
}

4.networkTimeout 可以设置各种网络请求的超时时间。

image.png

debug 可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发。可以帮助开发者快速定位一些常见的问题。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017.07.26 ，如有侵权请联系 cloudcommunity@tencent.com 删除

微信小程序音视频

json

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

微信小程序音视频

json

登录后参与评论

0 条评论

热度