【一步步学小程序】1.创建项目以及TabBar

1.创建项目

如图，创建项目，输入项目名称、选择目录，AppID是唯一标识，我们可以先点如图红框内的测试号，自动生成一个AppID，然后点新建即创建完一个新项目。

2.创建3个页面

确保如图左上角的编译器按钮是选中状态，此时我们就可以看到项目的文件结构和编译器

打开app.json文件。所有页面都需要在此json中的pages标签下进行声明。我们看到开发工具已经帮我们创建了两个页面index和logs，但是我们不需要，可以先忽略，在pages中，声明3个新页面：

• 首页：pages/home/homeMain/homeMain
• 问答：pages/question/questionMain/questionMain
• 我的：pages/my/myMain/myMain
  
  通过Command+S (WIndows下是Cotrol+S)保存后，此时再看下目录结构，发现pages目录下多了3个文件夹，正是对应上面3个页面。
  
  我们暂时先不讨论目录中包含的文件。

3.创建Tabbar

上一步已经创建了3个页面，我们创建一个包含这三个页面的tabbar。还是在app.json文件中的pages标签之后，添加如下代码

"tabBar": {
    "color": "#646565",
    "selectedColor": "#F55D54",
    "borderStyle": "black",
    "list": [
      {
        "selectedIconPath": "images/tab/home_selected.png",
        "iconPath": "images/tab/home_unselected.png",
        "pagePath": "pages/home/homeMain/homeMain",
        "text": "首页"
      },
      {
        "selectedIconPath": "images/tab/message_selected.png",
        "iconPath": "images/tab/message_unselected.png",
        "pagePath": "pages/question/questionMain/questionMain",
        "text": "问答"
      },
      {
        "selectedIconPath": "images/tab/me_selected.png",
        "iconPath": "images/tab/me_unselected.png",
        "pagePath": "pages/my/myMain/myMain",
        "text": "我的"
      }
    ]
  },

此时app.json文件结构如图：

各个字段的作用如下：

• color：tabItem未被选中时的颜色
• selectedColor：tabItem被选中时的颜色
• borderStyle：tabbar上面的分割线颜色
• list：所包含的tabItem的列表
• selectedIconPath：tabItem被选中时的图片
• iconPath：tabItem未选中时的图片
• pagePath：tab对应的页面路径（即上一步创建在pages中添加的页面路径）
• text：tabItem对应文字

保存app.json文件，此时模拟器中显示的内容如下图，虽然一行代码没写，但是已经创建好tabbar，并可以在多个tab中切换了，下一节，将介绍如果编写页面内容。