1、安装小程序开发者工具 2、配置小程序底部按钮、顶部窗口 3、根据底部按钮，创建对应页面 4、列出10个组件的使用方法

1、安装小程序开发者工具

前往 开发者工具下载页面 (https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html) 根据自己的操作系统下载对应的稳定版安装包进行安装

2、配置小程序底部按钮、顶部窗口
在小程序app.json下,window下配置顶部窗口navigation与底部按钮tabBar

window 配置项

 navigationBarBackgroundColor    HexColor    #000000    导航栏背景颜色，如 #000000
 navigationBarTextStyle    string    white    导航栏标题颜色，仅支持 black / white
 navigationBarTitleText    string        导航栏标题文字内容
 backgroundColor    HexColor    #ffffff    窗口的背景色
 backgroundTextStyle    string    dark    下拉 loading 的样式，仅支持 dark / light

tabBar 配置项

pagePath    string    是    页面路径，必须在 pages 中先定义
text    string    是    tab 上按钮文字
 iconPath    string    否    图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。
 selectedIconPath    string    否    选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。

 "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "默默记账",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
  },
  "tabBar": {
    "color": "#444444",
    "selectedColor": "red",
    "backgroundColor": "#ffffff",
    "position": "bottom",
    "borderStyle": "black",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "主页",
      "iconPath": "./static/img/1.png",
      "selectedIconPath": "./static/img/2.png"
    },
    {"pagePath": "pages/ad/ad",
      "text": "广告",
      "iconPath": "./static/img/1.png",
      "selectedIconPath": "./static/img/2.png"
    },
    {"pagePath": "pages/art/art",
      "text": "文章",
      "iconPath": "./static/img/3.png",
      "selectedIconPath": "./static/img/4.png"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "./static/img/3.png",
      "selectedIconPath": "./static/img/4.png"
    }
  ]
  }
}