微信小程序的配置详解

• app的页面配置
• app的窗口配置
• app的tabBar配置
• 网络超时配置及debug开启配置
• 页面配置

配置·小程序 https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

app的页面配置

新建一个小程序项目，打开app.json

注意页面不需添加后缀名，第一个页面就是程序启动的页面，下面来新建一个页面测试一下。

将app.json内的pages进行更改：

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

保存并编译，程序启动的初始页面现在是这个样子：

app的窗口配置

官方文档给出的窗口配置有以下内容：

窗口的初始样式如下：

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

下面对app.json中的window进行简单修改。

    "backgroundTextStyle":"dark",      // 仅支持light和dark
    "navigationBarBackgroundColor": "#abc",
    "navigationBarTitleText": "窗口配置",
    "navigationBarTextStyle":"white"   // 仅支持black和white
  }

app的tabBar配置

将官方文档tabBar的示例代码放进我们的小程序中。

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },

注意tabBar中的两个页面其中必须有一个是启动页面。

下面尝试给tabBar添加一些图片，可以找自己喜欢的图片，放在项目的文件夹中。

    "color" : "#7F7",
    "borderStyle" : "white",    // 仅支持white和black

网络超时配置及debug开启配置

网络超时的示例代码：

  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
   "debug": true   // 只有开启与关闭

开启了debug后，程序启动后控制台会有如下输出日志：

页面配置

我们可以在任何一个页面的文件夹下新建一个json问价，在此json中写入的配置会覆盖app.json中window·内的同名配置。


每个页面单独的wxss也是可以覆盖app.wxss中的内容。