微信小程序配置-------页面配置, 详细配置 全局配置 局部配置

发布时间:2022-12-26 08:00

微信小程序中我们创建页面时会自动创建四个文件分别为js文件,wxml文件 wxss文件最后还有我们今天的主角json配置文件

小程序的json配置分为两种,一种是直接在创建的路由文件夹内单独的json配置文件来进行单独的页面配置

当然有第二种,小程序也是非常的贴心,为我们全局的页面配置也开发出来了一个app.json文件,让我们为全局的页面进行配置,来决定页面文件的路径,窗口表现,设置网络超时时间,设置tabbar,界面表现等
tips:配置文件中不能出现注释, tabbar 最多只能五个,配置优先级单页面配置高于全局配置
废话比较多哈,下面我们开始
一 , 全局配置
微信小程序配置-------页面配置, 详细配置 全局配置 局部配置_第1张图片

  1. pages 页面路径
    直接在pages中书写页面路径即可创建相应的页面微信小程序配置-------页面配置, 详细配置 全局配置 局部配置_第2张图片
  2. windows 窗口设置
    用来设置小程序的状态栏 导航条 标题 窗口背景颜色
    微信小程序配置-------页面配置, 详细配置 全局配置 局部配置_第3张图片
    示例:
 "window": {
    "backgroundTextStyle": "light", 
    "navigationBarBackgroundColor": "#fff", //导航栏背景颜色
    "navigationBarTitleText": "baidu", //导航栏标题文字内容
    "navigationBarTextStyle": "black" //导航栏标题颜色,仅支持 black / white
  },
  1. tabBar 底部导航
    可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面
    微信小程序配置-------页面配置, 详细配置 全局配置 局部配置_第4张图片
    3.1 底部选项卡 list
    其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:
    微信小程序配置-------页面配置, 详细配置 全局配置 局部配置_第5张图片
    示例:
"tabBar": {
    "color": "#333", // 字体的颜色
    "selectedColor": "#f66", // tab 上的文字选中时的颜色
    "borderStyle": "white",//tabbar 上边框的颜色, 仅支持 black / white
    "backgroundColor": "#efefef", //tab 的背景色,
    "list": [ //list 接受一个数组,只能配置**最少 2 个、最多 5 个 tab
      {
        "pagePath": "pages/home/home", //页面路径,必须在 pages 中先定义
        "iconPath": "image/home.png",//图片路径,使用Iconfont
        "selectedIconPath": "image/home_active.png",//选中时图片
        "text": "首页" //tab 上按钮文字
      },
      {
        "pagePath": "pages/kind/kind",
        "iconPath": "image/kind.png",
        "selectedIconPath": "image/kind_active.png",
        "text": "分类"
      }
      ]
  },
  1. networkTimeout 各类网络请求的超时时间
    各类网络请求的超时时间 均为毫秒
    微信小程序配置-------页面配置, 详细配置 全局配置 局部配置_第6张图片
    示例:
"networkTimeout" : {
     "request" :6000,
     "connectSocket" :5000,
     "uploadFile" : 5000,
      "downloadFile" : 5000
  },
  1. permission 小程序接口权限相关设置
    小程序接口权限相关设置 , 字段类型为 Object,结构为:
    在这里插入图片描述
    PermissionObject 结构为:
    在这里插入图片描述
    示例:
 "permission" : {
   "scope.userLocation" : {
     "desc": "你的位置信息将用于小程序位置接口的效果展示"
   }
  },

效果展示:
微信小程序配置-------页面配置, 详细配置 全局配置 局部配置_第7张图片

  1. sitemapLocation
    指明 sitemap.json 的位置;默认为 ‘sitemap.json’ 即在 app.json 同级目录下名字的 sitemap.json 文件
    微信小程序配置-------页面配置, 详细配置 全局配置 局部配置_第8张图片
  2. navigateToMiniProgramAppIdList
    当小程序需要使用 wx.navigateToMiniProgram 接口跳转到其他小程序时,需要先在配置文件中声明需要跳转的小程序 appId 列表,最多允许填写 10 个
    在这里插入图片描述
    二. 局部页面配置
    每一个小程序页面也可以使用 json 文件来对本页面的窗口表现进行配置 , 页面中配置项在当前页面会覆盖 app.jsonwindow 中相同的配置项。文件内容为一个 json对象,有以下属性
    微信小程序配置-------页面配置, 详细配置 全局配置 局部配置_第9张图片
    示例:
    json 文件
{
  "navigationBarBackgroundColor": "#ff4001", //导航栏背景颜色
  "navigationBarTextStyle": "white", //导航栏标题颜色,仅支持 black / white
  "navigationBarTitleText": "嗨购-首页", //导航栏标题文字内容
  "backgroundColorTop": "#efefef", //窗口的背景色
  "backgroundTextStyle": "light", //下拉 loading 的样式,仅支持 dark / light
  "enablePullDownRefresh": true,//是否开启当前页面下拉刷新。
  "onReachBottomDistance": 50, //页面上拉触底事件触发时距页面底部距离,单位为px。
  "disableScroll": false, //设置为 true 则页面整体不能上下滚动。只在页面配置中有效,无法在 app.json 中设置
  "usingComponents": { //页面自定义组件配置
    "prolist": "/components/prolist/prolist" //组件路径
  }
}

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号