微信小程序如何配置app.json,app.is,及app.wxss（超详细，适合新手）

---

一、app.json文件是对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多工具栏（tabBar）等。

1、新建项目里面的app.json文件里包含了一下代码，

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

文件路径问题：

pages主要存放的是文件路径，具体存放什么文件路径呢，我们点开pages，我们可以看见里面有两个文件夹，这里的文件路径就是指这里的index和logs。

 如果我们想新建一个我们需要的文件，可以右键点击pages，选择“新建 目录”，输入我们想要的名字（假设我们建了一个“test”的目录），然后就可以得到下图所示：

然后这里就多了一个test的文件，通常来说，我们新建目录后，我们需要再在“test”文件夹下建立 "test.js","test.json","test.wxml",及"test.wxss"这四个文件，但是我们也可以一步创建这四个文件，那就是在“app.json”里面的pages添加里直接添加test，具体操作如下：

"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/test/test"
  ]

对比新建项目app.json的pages，我们发现，就多了"pages/test/test"，这就可以一次创建那四个文件，可能有人会问，为什么我要把test文件下面的四个文件也命名为test.*,这是为了方便管理，且这就是微信小程序的规定。还有个小问题就是，微信小程序开发工具里没有保存这个按钮，我们就只有用快捷键“ctrl+s”进行保存，按了保存就相当于进行了编译，我们也可以直接点上方菜单栏的编译按钮进行保存及编译，完成以上的添加路径就会得到下图所示：

 值得注意的是，你在pages下面每 创建一个文件，记得将它对应的路径添加到pages里，这样微信小程序才会知道你所写的程序。

窗口显示问题：

窗口的代码如下：

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }

  "backgroundTextStyle"文本背景颜色，这里的变量可以有"light"和"dark"；"navigationBarBackgroundColor"为导航栏背景颜色；"navigationBarTitleText"为导航栏标题文字，"navigationBarTextStyle"为导航栏标题颜色，仅支持"black"/"white"，其实最主要我们就控制这个显示的文字就好了，其他的设置，我个人觉得都是不需要改动的。

tabBar：

如果小程序需要有多个tab应用，简单来说，就是页面切换的按钮，其实就是一个类似与链接的东西，只是把这个链接图像化了，点击下面的tab图标进行页面跳转。tabBar的配置说明如下：

1、我们要把跳转的链接进行图像化，我们要做的第一步就是要得到图像，我们可以从“寻图标”（https://icon.52112.com/）这个来找点，我们心仪的图标，如以下的图标，我们需要那个飞机，如果你不想注册登录再下载，你可以直接打开qq进行截图。

假设我们截的图如下：

我们将图片分别另存为“fly.png”,“fly_on,png”，这样存的话，就能很好的区别你所存图片的作用，且将这两张图片归为一类，下面我们来说一下具体怎么使用这两张图片。

第一步：找到我们新建的项目的根目录，建立一个文件夹（与pages文件夹同级）image，然后把之前我们保存的图片复制到image文件夹下；

第二步：我们在小程序开发界面里就可以看到image文件夹了，点开它如下图所示：

第三步：就是配置tabBar，配置代码如下：

"tabBar": {
    "color": "#000",
    "selectedColor": "#56abe4",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",   
        "text": "首页",
        "iconPath": "image/fly.png",
        "selectedIconPath": "image/fly_on.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "image/fly.png",
        "selectedIconPath": "image/fly_on.png"
      },
      {
        "pagePath": "pages/test/test",
        "text": "我的",
        "iconPath": "image/fly.png",
        "selectedIconPath": "image/fly_on.png"
      }
    ]
  }

一进入“tabBar”就是对跳转栏的（“color”）文字颜色、（“selectedColor”）文字选中时的颜色、（“backgroundColor”）背景色、（“boederStyle”）tabBar上边框的颜色进行设置。然后就是重头戏“list”，这就是对tab应用的定义，“list”最少配置2个，最多配置5个。其中：“pagePath”为页面路径，这个需要现在pages里面定义，“text”就是对这个链接按钮进行命名，“iconPath”就是我们平时不点那个按钮显示的图片的路径，“selectedIconPath”就是我们选中那个跳转按钮时，所显示图片的路径。

上面的代码，我们相当于定制了3个跳转按钮，一个是跳转到“index”首页，一个是跳转到“logs”日志，另外是跳转到“test”我们新建的页面，具体实现情况如下：

注意： *.json格式文件里面是不能添加注释的，*.js，*.wxml，*.wxss这三个文件是可以添加注释的，添加注释的方法是“ctrl+？”（这里的问号就是指那个按键，并不是把问号打出来哈），且这三个文件中注释的符号是不一样的，最好使用这个快捷方式。

networkTimeout：

这个是网络请求的超时时间的配置，这个配置不是必须的，你不写也是可以的，因为它这个都是有默认的值的，你如果有特别的需要，你可以按照以下的规则进行配置。

配置的代码如下：

"networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  }

完整的app.json配置代码如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/test/test"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "color": "#000",
    "selectedColor": "#56abe4",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "image/fly.png",
        "selectedIconPath": "image/fly_on.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "image/fly.png",
        "selectedIconPath": "image/fly_on.png"
      },
      {
        "pagePath": "pages/test/test",
        "text": "我的",
        "iconPath": "image/fly.png",
        "selectedIconPath": "image/fly_on.png"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  }
}

需要注意的是，其中每个模块需要花括号“{}”括起来，然后每个模块以逗号结束， 如上面可以概括为四个模块：“pages”、“windows”、“tabBar”、“networkTimeout”。

总结：app.json是对全局的把控，如果你想让跳转后的页面显示不同的抬头（就是小程序最上面的文字或背景），那就需要在对应页面的json文件进行简单的配置，即将上面“windows”里面的内容拷贝到对应的json文件里，然后对里面的文件进行修改。小程序遵循的规则是：“在大环境下生活，远亲不如近邻”，就是说大的框架是小程序官方给的，是不容许修改的，而对一些配置文件的话，我们就会以最近的那个配置为准，这样就是起到一个定制页面的效果。

二、app.js

app.js就是用户刚开始进入小程序执行的内容，其中就是执行了app（{}），这里面写的函数或者全局变量都会被执行。app()函数用来注册一个小程序，它必须在app.js中调用，且只能执行一次。

新建项目的app.js如下：

App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
 
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo
 
              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

进入到app()里面就会执行，onLaunch这个函数，因为这是直接触发的事件，我们最开始进来时，那个获取头像的功能就是在这里实现的。其中还有几个函数可以调用：

 可以调用其中几个来看一下，如下：

App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
 
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo
 
              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  onShow:function(){
    console.log("从后台到前台")
  },
  onHide:function(){
    console.log("从前台到后台")
  },
  globalData: {
    userInfo: null,
    testnum:1
  }
})

其中调用了onShow,onHide等两个函数，函数面的console.log就是在调试器的console页面里打印上面写的那些“从前台到后台”等文字，可表示这个程序执行了，类似与C语音里面的print一个字符串什么的。

三、app.wxss的配置问题

wxss是一套样式语言，用于描述wxml的组件样式，app.wxss中的样式为全局样式，作用于每个页面。新建项目的app.wxss文件如下：

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

app.wxss就是对整个小程序样式的一个设置，比如一开始的那个页面，里面显示头像的位置以及用户名的文字大小及位置这些配置都是在*.wxss文件里设置，这里还是遵循“远亲不如近邻”这个规则，container正如它的名字一样，这是一个容器，可以把一些配置信息装在里面，以 （class=“container”）的形式调用。

其中，可配置的内容有：

/**app.wxss**/
.container {
  height: 100%;
  /* 高度自适应 */
  display: flex; 
  /* 纵向排列 */
  flex-direction: column;
  /* 每项居中 */
  align-items: center;  
  /* 两端居中   */
  justify-content: space-between;
  /* 两端对齐，项目之间的间隔都相等 */
  padding: 200rpx 0;
  /* padding表示内边距，就是控制上下左右的边距，
  padding：5px；带一个参数，表示上下左右都是5px距离
  padding：5px 0；带两个参数，表示上下都是5px，左右都是0px，这里容易出错，请切记
  padding：5px 4px 3px 2px；带4各参数，表示上5px，右4px，下3px，左2px */
  box-sizing: border-box;
  /* 自适应的边框 */
} 

四、总结

总的来说，就是app.js和app.json、app.wxss就是一个大框架，你要确切的问到底哪个先执行，哪个是大哥，那大概就会扯到“鸡与蛋”的世界难题上吧。其实，在我的理解上来看的话，就是这三个东西都是“你中有我，我中有你”，因为在显示页面的时候，其实那个什么获取用户头像的事已经做了，也可以说在执行获取头像这个事件之前，就已经把页面显示出来了，且有样式。所以我们可以把这三个看成一个整体来理解，这样会容易些，同理我们在后面看待pages下面相同文件名的的*.js、*.json、*.wxml、*.wxss为一个整体。还有就是pages下面的文件，到底先执行哪一个，这个就要看那个时间被触发了，就比如最上面我们写的三个跳转按钮，我们只有按了对应的按钮才会触发相应的事件。默认先执行app.*，然后是执行app.json里面pages里面的第一个路径（默认为首页），接下来就看触发事件的威力了。

以上仅是我个人的理解，有什么问题可以在下面评论交流，谢谢。