小程序的相关配置

小程序的很多开发需求被规定在了配置文件中，这样做可以更有利于提高的开发效率，并且可以保证开发出来的小程序的某些风格是比较一致的，比如导航栏、顶部TabBar，以及页面路由等等。

小程序中有很多配置，其大致可以分为三类：（1）project 和 sitemap 配置（2）全局配置 app（3）局部配置 page。下面具体对这几种配置进行说明，这是小程序官方文档关于相关配置的链接：配置小程序

1、project 和 sitemap 配置

（1）project.config.json：项目配置文件，比如项目名称、appid 等；

这个配置文件记录了小程序的一些关于项目的相关配置（在小程序开发工具的详情按钮中可以对一些配置进行修改），其实早期的小程序项目是没有这个配置文件的，但是如果没有这个配置文件就会出现 多端配置不一致的问题。比如当你和同事协同开发一款小程序的时候，他用的是 2.7.0 版本开发的，而你默认的是 2.7.1 版本，这种情况就需要其中一个人进行手动配置，这样会造成不必要的麻烦，因此微信考虑到了这种情况，保证一个项目中只有一种配置，这就是 project.config.json 的作用。

（2）sitemap.json：小程序搜索相关的配置；

这个配置文件是用来配置小程序及其页面是否允许被微信索引的，当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。用户也可以自行配置具体哪些页面允许被索引，详细请参考官方文档：sitemap 配置。

一般企业开发的小程序都是默认允许被微信索引的，因为这样可以提高小程序的曝光了，这也就意味着利润。这个设置可以在微信公众平台的设置找到：微信公众平台 — 设置 — 页面收录设置。

2、全局配置 app

app.json 是整个小程序的入口，该文件中的 pages 属性主要是配置小程序中都有哪些页面，除了 pages 之外这里面将配置一些全局的配置，具体的各个配置项可以查看一下官方文档：传送门。下面具体说一下几个比较重要的配置项：

属性	类型	必填	描述
pages	String	是	页面路径列表
window	Object	否	全局的默认窗口表现
tabBar	Object	否	底部tab栏的表现

（1）pages：页面路径列表，用于指定小程序由哪些页面组成，每一项都对应一个页面的路径信息，小程序中所有的页面都是必须在 pages 中进行注册的（其实这一步编译器会自动配置）。

小技巧：小程序新加页面的时候一般现在根目录下新建一个文件夹，然后右键文件夹新建 Page，编译器即会在 app.json 文件中的 pages 属性上增加该页面的路径配置，不需要手动进行配置。也可以在 app.json 文件中的 pages 属性手动写上一个需要新建的页面的路径，Ctrl + s 保存一下，即可生成新的页面文件。

{
  "pages": ["pages/index/index", "pages/logs/logs"]
}

（2）window：全局的默认窗口展示口用户指定窗口如何展示，下面说一下几个主要的属性及属性值，具体的：官方文档

"window":{
    "navigationBarBackgroundColor":"#ff5777",  //导航栏背景颜色，值只能是16进制
    "navigationBarTextstyle":"white",          //导航栏的bar的文字颜色，黑或白色
    "navigationBarTitleText":"我的小程序",      //导航栏的title标题文字
    "backgroundColor"："#ffedee",              //下拉刷新的背景颜色，值可是单词或16进制
    "backgroundTextStyle":"light",             //下拉刷新的进度动画颜色，light/dark
    "enablePullDownRefresh":false              //是否支持下拉刷新，默认是不支持的
    //enablePullDownRefresh属性在全局中一般设置成false，如果哪个页面需要刷新，可以在单个页面的配置文件中进行设置
}

（3）tabBar：底部 tab 栏的展示，tabBar 对象中有一个 list 数组，数组中存放一个个对象，每个对象代表一个底部导航栏的 item ，默认情况下 list 数组中至少要保证有 item 两个对象，一般情况下是 4 个 item，具体属性可以查看官方文档。

选中状态 or 默认状态图标的图片，一般会在项目根目录下新建一个 assets 文件夹，里面存放相关的图片等资源。

"tabBar":{
    "selectedColor":"#ff5777",    //tabbar的每一项的文字选中状态的颜色
    "list":[
        {
            "pagePath":"pages/home/home",    //指向的页面路径
            "text":"首页",                   //tabbar的每一项的text文字
            "iconPath":"assets/tabbar/home.png",     //选中状态显示的图标
            "selectedIconPath":"assets/tabbar/home_active.png"  //默认状态显示的图标
        },        
        {
            "pagePath":"pages/profile/profile",  //指向的页面路径
            "text":"我的",                       //tabbar的每一项的text文字
            "iconPath":"assets/tabbar/profile.png",     //选中状态显示的图标
            "selectedIconPath":"assets/tabbar/profile_active.png"  //默认状态显示的图标
        },
    ]
}

3、局部配置 page

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置，页面中配置项在当前页面会覆盖 app.json 的 window属性中相同的配置项，详情查看官方文档。

{
    "usingComponents"：{},                    //自定义组件
    "navigationBarTitleText"："我的界面",
    "navigationBarBackgroundColor"："#ffeeee",
    "enablePu1lDownRefresh":true             //是否支持下拉刷新
}

来源：CSDN

作者：yingjieweb

链接：https://blog.csdn.net/Marker__/article/details/103807933

标签

微信小程序开发文档

索引

sitemap