微信开发者工具中的全局配置文件
发布于 3 年前 作者 hchen 695 次浏览 来自 分享

新手刚入门小程序时,可能对各个文件目录的功能不太了解。本文着重介绍一下全局配置文件,即app.json文件,该文件通过微信开发者工具新建项目后会自动生成,无需自己手动创建。

下面是__全局配置文件__中各字段的作用或含义。

一、pages字段

作用:控制页面目录

在小程序开发时,每个页面都对应一个目录,每个目录又分别有wxmlwxssjsjson四个文件。

wxml主要负责本页面的界面展示,以及事件的绑定等等。

wxss: 类似与css文件,主要用于与wxml文件一起使用,优化wxml页面

js主要负责页面的逻辑,实现页面的动态效果

json根据不同标签,宏观描述和控制整个项目的属性

而Pages字段内容是一个字符串形式数组,数组中每一个元素代表一个页面。快捷键CTRL+S保存后会自动生成对应目录和页面。

二、window字段

作用:控制小程序顶部背景颜色,标题等元素

该字段内容是一个json字符串,key和value都需要用引号包含。注意每行结束不能省略逗号,除了最后一行。

"window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTitleText": "标题名称",
    "navigationBarTextStyle":"black"
  },

backgroundTextStyle:下拉 loading 的样式,仅支持 dark / light

navigationBarBackgroundColor:导航栏背景颜色,如 #000000

navigationBarTitleText:导航栏标题文字内容。

navigationBarTextStyle:导航栏标题颜色,仅支持 black / white

三、tabBar字段

作用:控制导航条样式和内容

"tabBar": {
    "color": "#999",
    "selectedColor": "#ff2d4a",
    "backgroundColor": "#fafafa",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "./icon/主页0.png",
        "selectedIconPath": "./icon/主页1.png"
      },
      {
        "pagePath": "pages/category/index",
        "text": "分类",
        "iconPath": "./icon/分类0.png",
        "selectedIconPath": "./icon/分类1.png"
      },
      {
        "pagePath": "pages/cart/index",
        "text": "购物车",
        "iconPath": "./icon/购物车0.png",
        "selectedIconPath": "./icon/购物车1.png"
      },
      {
        "pagePath": "pages/user/index",
        "text": "我的",
        "iconPath": "./icon/我的0.png",
        "selectedIconPath": "./icon/我的1.png"
      }
    ]
  },

__color:__tab 上的文字默认颜色,仅支持十六进制颜色。

__selectedColor:__tab 上的文字选中时的颜色,仅支持十六进制颜色。

__backgroundColor:__tab 的背景色,仅支持十六进制颜色。

__position:__tabBar 的位置,仅支持 bottom / top

__borderStyle:__tabbar 上边框的颜色, 仅支持 black / white

list属性

__pagePath:__指定点击后要跳转的页面路径。

__text:__显示的页面名称。

__iconPath:__未被点击时的图标图片。

__selectedIconPath:__被点击后的图标图片。

3 回复

写得真不错,加油

总结得较全面,已赞

针不戳 学到了 社区大佬真多

回到顶部