闲来无事研究研究小程序,毕竟现在辣么火的一个产品,但是作为前端盲的我不得不一步一步的跟随去学习,没有大神的那种快速入口,跟着官方文档按部就班的走吧,本想在小程序中针对每一个字段进行注释描述方便自己去定义学习,但是在小程序里面的json中不支持,个人又懒得每次登陆微信官方去查看,所以在这里就进行偷师注释下,也算是记录下自己的学习过程了。
第一步我们一定是需要一个微信开发者工具：开发者工具下载地址请移步 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 进行工具下载,你可能还需要一个开发者账号如果你想把你所开发的小程序发布出来供大家使用的话,小程序账号注册请移步https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=1528300445 进行账号注册.更详细的请百度下吧,度娘很强大的说.（其实官方文档讲的很细致了）
废话不多说了,跟着官方所提供的案例进行实现下吧
这个就是按照官方步骤所实现后的效果,此篇幅主要记录一些参数的含义
app.json配置项列表
| 属性 | 类型 | 必填 | 描述 |
| pages | String Array | 是 | 设置页面路径 |
| window | Object | 否 | 设置默认页面的窗口表现 |
| tabBar | Object | 否 | 设置底部tab的表现 |
| networkTimeout | Object | 否 | 设置网络超时时间 |
| debug | Boolean | 否 | 设置是否开启debug模式 |
pages:用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window 参数描述(用于设置小程序的状态栏,导航条,标题串口背景色等等)
| 属性 | 类型 | 默认值 | 描述 | 最低版本 |
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色，如"#000000" | |
| navigationBarTextStyle | String | white | 导航栏标题颜色，仅支持 black/white | |
| navigationBarTitleText | String | 导航栏标题文字内容 | ||
| navigationStyle | String | default | 导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮 | 微信版本 6.6.0 |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 | |
| backgroundTextStyle | String | dark | 下拉 loading 的样式，仅支持 dark/light | |
| backgroundColorTop | String | #ffffff | 顶部窗口的背景色，仅 iOS 支持 | 微信版本 6.5.16 |
| backgroundColorBottom | String | #ffffff | 底部窗口的背景色，仅 iOS 支持 | |
| enablePullDownRefresh | Boolean | false | 是否开启下拉刷新 | 微信版本 6.5.16 |
| onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离，单位为px |
tabBar:如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面
Tip:
当设置 position 为 top 时，将不会显示 icon
tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
Tip参数描述
| 属性 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| color | HexColor | 是 | tab 上的文字默认颜色 | |
| selectedColor | HexColor | 是 | tab 上的文字选中时的颜色 | |
| backgroundColor | HexColor | 是 | tab 的背景色 | |
| borderStyle | String | 否 | black | tabbar上边框的颜色， 仅支持 black/white |
| list | Array | 是 | tab 的列表，详见 list 属性说明，最少2个、最多5个 tab | |
| position | String | 否 | bottom | 可选值 bottom、top |
其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
| pagePath | String | 是 | 页面路径，必须在 pages 中先定义 |
| text | String | 是 | tab 上按钮文字 |
| iconPath | String | 否 | 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片 |
| selectedIconPath | String | 否 | 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效 |
networkTimeout
可以设置各种网络请求的超时时间。
属性说明：
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
| request | Number | 否 | wx.request的超时时间，单位毫秒，默认为：60000 |
| connectSocket | Number | 否 | wx.connectSocket的超时时间，单位毫秒，默认为：60000 |
| uploadFile | Number | 否 | wx.uploadFile的超时时间，单位毫秒，默认为：60000 |
| downloadFile | Number | 否 | wx.downloadFile的超时时间，单位毫秒，默认为：60000 |
debug
可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。
page.json
每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键，如：
| 属性 | 类型 | 默认值 | 描述 | |
|---|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色，如"#000000" | |
| navigationBarTextStyle | String | white | 导航栏标题颜色，仅支持 black/white | |
| navigationBarTitleText | String | 导航栏标题文字内容 | ||
| backgroundColor | HexColor | #ffffff | 窗口的背景色 | |
| backgroundTextStyle | String | dark | 下拉 loading 的样式，仅支持 dark/light | |
| enablePullDownRefresh | Boolean | false | 是否开启下拉刷新，详见页面相关事件处理函数。 | |
| disableScroll | Boolean | false | 设置为 true 则页面整体不能上下滚动；只在 page.json 中有效，无法在 app.json 中设置该项 | |
| onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离，单位为px |
先这样记录下吧