微信小程序的配置详解

配置·小程序 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.jsonwindow·内的同名配置。
这里写图片描述

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

阅读更多
个人分类: 微信小程序
上一篇微信小程序事件
下一篇微信小程序的生命周期
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭