在上篇对小程序的 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界面。大功告成。