文章目录
前言
不多说，我们赶紧开始。
小能手这段时间在学习微信小程序开发，按照 UI、API、云开发 三个部分并结合示例系统性地学习，并实现了一个物联网小程序“花花草草守护仪”，详细可点此查看小程序快速入门教程。
1 开始
基础的准备工作可以参考官方的入门介绍
2 了解下小程序的文件结构和页面组成
结合刚创建的 DEMO，大致了解下小程序的文件结构和页面组成，详细的内容可以查看 小程序代码构成。
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
文件 | 必需 | 作用
app.js | 是 | 小程序逻辑
app.json | 是 | 小程序公共配置
app.wxss | 否 | 小程序公共样式表
一个小程序页面由四个文件组成，四个文件必须具有相同的路径与文件名，分别是：
文件类型| 必需 | 作用
js | 是 | 页面逻辑
wxml | 是 | 页面结构
json | 否 | 页面配置
wxss | 否 | 页面样式表
3 小程序的全局配置
详细文档可以查看小程序全局配置。
在这里先看看全局配置文件 app.json 最常用的三个功能，分别关联到 3 个配置项。
页面的增删 - 配置项 pages
配置项 pages 负责页面路径的列表，该数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。
我们将默认的 index 和 log 页面删除，新建 4 个页面。代码为：
"pages": [
"pages/home/home",
"pages/list/list",
"pages/partner/partner",
"pages/more/more"
],
窗口表现 - 配置项 window
配置项 window 负责默认窗口的表现，比较常见的是对导航栏处理，可修改诸如背景颜色、标题颜色、标题文字内容。
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
底部 tab 栏表现 - 配置项 tabBar
配置项 tabBar 负责底部 tab 栏的表现。这里在底部增加了 4 个tab。
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#13227a",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/home/home",
"iconPath": "image/icon-home.png",
"selectedIconPath": "image/icon-home-active.png",
"text": "⾸⻚"
},
{
"pagePath": "pages/list/list",
"iconPath": "image/icon-list.png",
"selectedIconPath": "image/icon-list-active.png",
"text": "活动"
},
{
"pagePath": "pages/partner/partner",
"iconPath": "image/icon-partner.png",
"selectedIconPath": "image/icon-partner-active.png",
"text": "伙伴"
},
{
"pagePath": "pages/more/more",
"iconPath": "image/icon-more.png",
"selectedIconPath": "image/icon-more-active.png",
"text": "更多"
}
]
},
其中 iconPath 和 selectedIconPath 为 tab 栏图标的路径，这些图标可以从 iconfont阿⾥巴巴矢量图标库 下载，最好是一明一暗的图标。
我的 DEMO 实际效果是这样：
4 具体页面的配置
配置了全局，接下来在学习配置下具体页面，尝试修改 home 页面，home.json 的配置如下：
{
"usingComponents": {},
"navigationBarBackgroundColor": "#ce5a4c",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "⼩程序⻚⾯",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
DEMO 实际效果是这样：
5 小结
这节搭建了基础的开发环境，熟悉了小程序的框架基础，对开发框架做了初步尝试：先是全局性地配置了窗口表现、页面、底部 tab 栏，接着对具体页面做了配置。
如果你对源码有疑问，可参考 我在 github 的 DEMO 提交，lesson 1 就是针对这一节的代码修改。
END
