小程序配置

​ 小程序配置可以分为三种,分别是:全局配置,页面配置,sitemap配置

全局配置

​ 项目根目录下的app.json文件用来对微信到小程序进行全局配置。文件内容为一个JSON对象。app.json文件结构如下

// 注意:在app.json文件不能写注释,这是刚创建的小程序项目的app.json文件的结构
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
pages

​ 在app.json文件的pages节点上新建或减少页面,如果要新建页面,可以在pages节点上新增页面会比视图操作更方便,在[]里面写"pages/要创建文件夹名字/要创建文件名字"。如果新建的页面放在第一个位置,它创建文件并且编译,pages 数组中第一个页面路径,就是小程序项目的默认首页,修改 pages 数组中路径的顺序(放在第一位的就会默认为首页),即可修改小程序的默认首页所以模拟器也显示该页面。

{
    "pages":[
        "pages/要创建文件夹名字/要创建文件名字",
        "pages/index/index",
        "pages/test/test"
    ]
}
window

​ 用于设置小程序的状态栏、导航条、标题、窗口背景色。

样式属性
{
    "window":{
        "navigationBarBackgroundColor": "#ffffff",// 导航栏背景颜色,
        "navigationBarTextStyle": "black",// 导航栏标题颜色,仅支持 `black` / `white`
        "navigationBarTitleText": "微信接口功能演示",// 导航栏标题文字内容
        "backgroundColor": "#eeeeee",// 窗口的背景色
        "backgroundTextStyle": "light" // 下拉loading的样式
    }
}

// 注 1:HexColor(十六进制颜色值),如"#ff00ff"
// 注 2:关于navigationStyle
// iOS/Android 客户端 7.0.0 以下版本,navigationStyle 只在 app.json 中生效。
// iOS/Android 客户端 6.7.2 版本开始,navigationStyle: custom 对 web-view 组件无效
// 开启 custom 后,低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0(不代表最低版本,只供调试用)可方便切到旧视觉
// Windows 客户端 3.0 及以上版本,为了给用户提供更符合桌面软件的使用体验,统一了小程序窗口的导航栏,navigationStyle: custom 不再生效
tabBar

​ 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

其中list是一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:

{
    "tabBar":{
        "color": "#a9b7b7",
        "selectedColor": "#11cd6e",
        "borderStyle": "black",
        "list":[
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "images/tab/home.png",
                 "selectedIconPath": "/images/tab/home_1.png"
            },
            {
                "pagePath": "pages/new/new",
                "text": "新闻",
                "iconPath": "images/tab/new.png",
                 "selectedIconPath": "/images/tab/new_1.png"
            }
        ]
    }
}

页面配置

​ 每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 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" //组件路径
  }
}

sitemap 配置

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引,文件内容为一个 JSON 对象,如果没有 sitemap.json ,则默认为所有页面都允许被索引。

小程序官方sitemap.json配置

了解更多请点击下面链接

小程序官方文档

powered by GitbookEdit Time: 2023-04-08 10:28:32