1. Create a project
As shown, create a project, enter the project name, select the directory, AppID is a unique identifier, we can first test point shown in the red box number, automatically generate a AppID, then that is completely new to create a new project.
2. Create three pages
Ensure that shown in the upper left corner of the compiler button is selected, this time we can see the file structure of the project and compiler
open app.json file. All pages need to be declared in this json in the pages tag. We see development tool has helped us create a two page index and logs, but we do not need, you can ignore, in pages, declare three new page:
- 首页：pages/home/homeMain/homeMain
- 问答：pages/question/questionMain/questionMain
- I: pages / my / myMain / myMain
by the Command + S (under WIndows is Cotrol + S) to save, then look at the directory structure, found more than three pages directory under the file folder, it is above the corresponding 3 page.
We do not discuss files contained in the directory.
3. Create Tabbar
Previous've created three pages, we create a tabbar contains three pages. After the label or pages in app.json file, add the following code
"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": "我的"
}
]
},
At this time, the file structure shown in FIG app.json:
role of each field is as follows:
- color: color when not selected tabItem
- selectedColor: when color is selected tabItem
- borderStyle: tabbar above dividing line color
- Included in the list of tabItem: list
- selectedIconPath: Picture of tabItem is selected
- iconPath: Picture of tabItem unchecked
- pagePath: tab corresponding Page path (ie, the last step to create a path to add a page in the pages of)
- text: tabItem text corresponding to
App.json save the file, then what is displayed in the following figure simulator, although I did not write a line of code, but has created tabbar, and can be switched in multiple tab in the next section, we describe how you write the page content.
