Tips：1.第一条路径固定为小程序的首页，如果把logs路径放到首位，那么logs页面是首页；2.同一个页面的js/wxml/wxss文件的名称必须相同，因为路径是以文件名称来识别的，路径是“pages/index/index”，注意后面不带js/wxml/wxss等后缀，系统会在该路径寻找需要格式文件；3.需要显示的独立页面都需要在此处配置，template模板文件则不需要。
window负责全局的窗口配置，如导航栏背景色、导航栏文字等。你可以修改它们的值，保存后在模拟器上看到效果。
试试将navigationBarBackgroundColor的值改为#ffae00，将navigationBarTitleText的值改为“电影排行榜”，按Ctrl+S键保存看看模拟器中的效果吧。
Tips:1.backgroundTextStyle的值目前只有两种：light和dark；2.navigationBarTextStyle的值目前只有两种：black和white。
回到源码目录，对比index和logs页面的构成，发现index页面并没有.json文件，可见这个文件并非是必须的。但是，如果有这个文件，那么必然不能为空，否则控制台会报错，可在里面写入一个大括号{}保存即可。
开发实战官方样例先认识到这里，我们对开发者工具和小程序源码构成有了一个初步的印象后，开始边做边学。
底部Tab卡页我们使用鼠标右键将源码目录pages下的index/logs两个文件夹删除，并打开app.json，在pages的值中配置下图中的两条路径。
按Ctrl+S键保存，开发者工具将自动在指定路径为我们创建两个页面，如下图所示。
此时，模拟器中的首页已经变成了movies目录下的index页面，因为我们刚才把这个页面的路径配置在app.json文件中pages值的首位了。
如果我们要查看mine页面怎么办呢？除了使用后文将提到的页面跳转功能，这里用Tab卡页的切换功能来试试。在app.json文件中添加tabBar内容，如下所示。
{"pages":[
"pages/movies/index",
"pages/mine/mine"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#ffae00",
"navigationBarTitleText": "电影排行榜",
"navigationBarTextStyle":"white"
},
"tabBar": {
"list": [
{
"pagePath": "pages/movies/index",
"text": "电影"
},
{
"pagePath": "pages/mine/mine",
"text": "我的"
}
],
"borderStyle": "black",
"selectedColor": "#ffae00"
}
}
模拟器预览效果如下图：
在list的值中，我们配置了2个卡页，text是卡页的文字，pathPath代表了页面路径，当点击卡页时，将跳转到指定路径的页面。注意卡页数必须为2-5个才合规，否则控制台会报错。并且，这里的路径必须被包含在顶端的pages值中，因为所有可抵达页面都必须在pages中配置路径。
红色箭头指向处有一条水平灰色线，这是卡页和内容页的分界线，由borderStyle属性控制，其值默认为black，目前暂时只有black和white值可选。
selectedColor表示卡页选中时，其文字的颜色，用十六进制表示。另外卡页背景色也可配置。