微信小程序详解(2 小程序全局配置详解)-优快云博客

本文链接：https://blog.youkuaiyun.com/a2690656046/article/details/118111255

全局配置

介绍
创建完一个新的项目后,我们想要使用,就需要对这个项目进行配置,而全局配置是可以配置完成后,在之后使用时不用再重复的每一个块都配置
其原理和目的是:
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
流程
1.小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象，有以下属性：
2.配置项
在这里插入图片描述

3.我们在了解一些配置项后,就可以在我们的小程序app.json文件中进行配置

4.可以看到,我们一开始的app.json中是这样的,其中pages是指我们的文件项目,这个项目的顺序可以混乱,但是,他会显示第一个项目的内容,其中index值得是我们的首页,logs指的是我们的系统日志,当我们新添加一个项目时,可以在这个pages字段中添加一个路径和文件名字,这样在pages文件中就会自动生成一个新的项目
在这里插入图片描述

5.可以看到,当我们在pages字段中添加一个新路径后,pages下生成了一个demo-01的文件,并且直接生成了四个文件,并且可以看到我们把demo-01的页面放到pages字段下的第一条时,左侧的模拟机已经变为demo-01的页面了
(注意:我们写的路径只要不是最后一个,下面还有别的路径时,我们一定要加,)
6如果有疑惑的话,我们可以看一下,当路径的顺序变化的时候,左侧的模拟机显示的页面会不会也变化

在这里插入图片描述
可以明显看到,当我们的路径顺序变化时,index变为第一条,我们左侧虚拟机就会显示第一条的页面.
7.那么,我们想要使用vsCode编辑器来进行编辑的时候,我们在pages字段下新增一个新的路径,pages会不会也新增一个页面呢?
在这里插入图片描述
8.这时,我们在vsCode编辑器中添加了一个新增的项目,那我们返回微信小程序的编辑器来看看,是不是也跟着改变了呢

9.可以看到,我们的右侧app.json文件中确实是有我们写的demo-02路径,但是我们的pages文件下却并没有新增demo-02的文件.
因此,我们可以说,vsCode中编辑app.json文件并不能在pages文件下新增文件.
(注意:vsCode中编辑app.json文件并不能在pages文件下新增文件.)
但是,此时如果我们在微信小程序中的app.json文件中随意的打几个空格后,在保存,我们就会发现pages文件下就又有新增的demo-02文件了
在这里插入图片描述
10.windows字段的配置

接下来就是我们的windos字段的配置拉,当我们看到这些配置属性后,就应该对windows的功能有所理解了简单来讲就是:
用于设置小程序的状态栏、导航条、标题、窗口背景色。
而对应的属性也在上方表明了,我们可以直接在windows中试用,这个就不多做赘述了,大家可以私下里自己试一试.

11.然后就该我们的全局配置中的最后一个tabber配置了
简单来讲:
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
在这里插入图片描述

当我们了解了tabber的一些属性后,就可以对窗口底部的tab进行位置修改了,他还可以对图片等进行修改

下面是一张我对两个配置后的效果图,大家可以参考一下
在这里插入图片描述
然后呢,我也把这两个配置的代码放到这里大家可以结合着来看一下

  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#0094ff",
    "navigationBarTitleText": "我的小程序",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh":true,
    "backgroundColorTop":"#0055ff"
  },
  "tabBar": {
    "list": [
      {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icon/_shouye.png",
      "selectedIconPath": "icon/shouye.png"
    },
    {
      "pagePath": "pages/tupian/tupian",
      "text": "图片",
      "iconPath": "icon/_tupian.png",
      "selectedIconPath": "icon/tupian.png"
    },
    {
      "pagePath": "pages/wode/wode",
      "text": "我的",
      "iconPath": "icon/_wode.png",
      "selectedIconPath": "icon/wode.png"
    },
    {
      "pagePath": "pages/sosuo/sosuo",
      "text": "搜索",
      "iconPath": "icon/_sosuo.png",
      "selectedIconPath": "icon/sosuo.png"
    }
  ],
  "color":"#0094ff",
  "selectedColor":"#ff9400",
  "backgroundColor":"#ffffff",
  "borderStyle":"black",
  "position":"bottom"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

总结

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
我们在这个页面上的全局配置又分为三部分
1.pages字段的配置,主要是用来新增文件和显示文件的
2.windos字段的配置,主要是用于设置小程序的状态栏、导航条、标题、窗口背景色
3.tabber字段的配置,如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。