微信小程序（2 搭建home页面）

在上篇对小程序的 QuickStart 项目分析之后，了解了整个项目的整体结构，另外在 pages/index 目录中看到了小程序的事件绑定和页面跳转。现在利用现有的知识，新建一个pages/home 目录。

1、新建 home 目录

在小程序中，每一个完整的页面有包含.wxml .js .json .wxss 四个文件，在开发者工具中，有一种快速创建这四个文件的方法。

pages目录上右键 –> 新建 –> 目录 –> 新建 xxx 目录。
xxx目录上右键 –> 新建 –> Page –> 新建 xxx 四个页面文件。

按照上面的方式新建了 home 目录以及 四个页面文件。分别打开四个文件发现文件中初始化都有默认的内容。

2、跳转到 home 页面

目标： 点击 index 页面中的头像跳转到home页面

实现过程：

在 app.json 中添加 home 页面的配置信息。

在小程序中为了让微信客户端知道当前小程序页面定义在哪个目录，每一个页面都需要在 app.json 中的 pages 中配置。

我们发现 pages 中已经存在了 home 页面的配置项，这是因为我们用上述方式快速添加 home 目录以及页面后，小程序开发者工具会自动在 pages 中添加页面配置。如果页面目录和页面文件不是通过开发者工具快速构建，就需要手动在 app.json 中的 pages 中手动添加 页面信息。

修改 index.js 中的 bindViewTap 函数。

 //事件处理函数  bindViewTap: function() {    wx.navigateTo({      url: '../logs/logs'    })  }

现在点击index 页面的头像后，页面跳转到 logs 页面。修改函数使页面跳转到 home 页面。

//事件处理函数  bindViewTap: function() {    wx.navigateTo({      url: '../home/home'    })  }

重新编译项目后，点击头像发现页面现在已经成功的跳转到了 home界面。大功告成。