微信小程序开发入门（三）

任亚飞

之前我们已经了解了小程序的发展及前景、开发环境、目录结构。

下面来了解小程序重要的全局配置文件。一个小程序会包括最基本的两种配置文件，全局的app.json 和页面自己的page.json。特别注意：配置文件中不能出现注释。

全局配置app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab 等。更多配置信息请参考微信开发者文档， 初学者要多写多练多看官方文档（https：//developers.weixin.qq.com/miniprogram/dev/framework/config.html）。

一、全局配置字段

1.pages字段

用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。可以看到在Pages 下面有index 和logs 两个子页面。

这跟目录Pages 里面的首页和日志页面是相对应的（如图1）。

假设我想打开程序就能看到日志页面，那么就把“pages/logs/logs”和“pages/index/index”互换位置。如果想增加一个子页面，就在pages 字段中增加一行，如“pages/diyi/diyi”，pages 是它的开头，diyi 是它的名字，保存后观察模拟器看是否起效（注意：引号和逗号是半角）。同样如果想把diyi 页面指定为首页，就把这行放在Pages 字段第一行。

2.window 段

定义小程序所有页面的顶部背景颜色、文字颜色等。app.json 中的部分配置，也可以对单个页面进行定义。一般用页面对应的.json 文件来控制本页面的表现，优先级更高会覆盖app.json 中相同的配置项（样式相关的配置项属于app.json 中的window属性，但这里不需要额外指定window 字段），具体的取值和含义可参考微信小程序开发者全局配置文档中的说明。通过图1的2號框，我们能够清楚地看到app.json 配置里面的window 字段，这里面有4 个属性，分别为：

"backgroundTextStyle"："light"，

"navigationBarBackgroundColor"："#fff"，

"navigationBarTitleText"： "Weixin"，

"navigationBarTextStyle"："black"

后三个属性都用来配置navigationBar，就是控制导航栏外观：

"navigationBarBackgroundColor"："#fff"， 导航栏背景颜色属性。#fff 表示为背景颜色是白色，如果我们不清楚导航栏背景在哪里，可以用蓝色#0094ff 来替换，保存后在模拟器看发生的变化，就知道改变背景颜色的效果了，更多颜色属性可自行百度。

" navigation Bar Title Text " ："Weixin"， 标题名称。模拟器上方正中间Weixin 字样就是标题，注意更改时不要少了引号。

"navigationBarTextStyle"："black" 文字颜色，black 黑色。默认文字颜色为黑色，你可以改成白色white 试试看。这里的字体颜色只能是黑色和白色。

"backgroundTextStyle"："light"， 是下拉loading 的样式，仅支持 dark / light 这两个属性，默认属性是light。可以控制下拉效果出现的小圆点颜色。

我在这个字段里增加两行代码，能起什么作用呢：

"enablePullDownRefresh"：true

"backgroundColor"："#CCFF00

"enablePullDownRefresh 是否开启当前页面下拉刷新状态，有两个状态属性，false 否/true是。

backgroundColor 是下拉窗口背景色。

修改后用鼠标左键按住标题下拉，就会看到效果。

3.tabbar 字段

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及tab切换时显示的对应页面。它跟window、pages 字段同层级。通过列表tab、列表list 来交互页面之间的联系（注意：tab 的列表，最少 2个、最多5个tab）。请参考下面的代码，双斜杠后为注释。

"tabBar"： {

"list"： [{ //tab 列表list

"pagePath"： "pages/zhuye/zhuye"，

// 关联的页面，也就是pages 字段里面的页面

"text"： " 主页"， // 底部导航栏的名字

"iconPath"： "icon/zhuyehong.png"，// 选中后底部导航栏的主页图标

" s e l e c t e d I c o n P a t h " ： " i c o n /zhuyehui.png"// 未选中底部导航栏的主页图标

}，

作者在小程序项目文件里增加了一个icon 文件夹存放icon 图片，图片文件夹可在壹零社公众号中下载。

下面这几个属性跟列表list 同层级，双斜杠后面为注释。其实大家注意发现一个问题没有，同层级的语法它们颜色是一样的。

"color"："#003333"，//tab 底部导航栏文字默认颜色，仅支持十六进制颜色。

" selected Color"：" #330000 " ， / /tab 底部导航栏的文字选中时的颜色， 仅支持十六进制颜色。"backgroundColor"："#FFFFCC"，//tab 底部导航栏背景色，仅支持十六进制颜色。

"position"："bottom"//tabBar 的位置，仅支持 bottom（ 底部） / top（ 顶部）， 默认bottom。

保存后在模拟器上查看效果，若编译出现错误极有可能是标点符号，字母大小写，查看调试器报错问题所在（如图2）。

页面配置：每一个小程序页面也可以使用同名.json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项（如图3）。

注意，app.json 的 window 配置项和Pages 中的"pages/zhuye/zhuye" 页面里的json 是一样的配置项。也就是说Pages 中的每一页我们可以去单独配置。红色框为app.json； 绿色框为"pages/zhuye/zhuye" 页面里的json，只是页面不同。

"pages/zhuye/zhuye" 页面的json配置了顶部背景颜色、标题、标题字体颜色。

4.sitemap 配置

小程序內搜索可以通过 sitemap.json配置或者打开管理后台页面收录开关（小程序管理后台→功能→页面内容接入→页面收录开关），让微信来索引。

当开发者允许微信索引时，微信会通过爬虫为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。爬虫访问小程序内页面时，会携带特定的 useragent：mpcrawler 及场景值：1129。需要注意的是，若小程序爬虫发现的页面数据和真实用户的呈现不一致，那么该页面将不会进入索引中。

sitemap 配置会在发布上线的章节具体讲解。