小程序开发简介（2）hello world升级版-页面跳转和参数转移

在上一篇文章中，我简要介绍了小程序开发工具创建的hello world项目的结构，并对每个文件进行了简要描述。

在本章中，我们计划对hello world进行简单升级，并学习以下两点：

学习目标

在页面之间跳转

如何在页面之间传输数据

在hello world项目中，单击主页上的“获取头像昵称”按钮以获取头像和昵称。

点击主页上的“获取头像昵称”按钮

点击头像进入启动日志页面

单击头像进入启动日志列表页面，查看app的每个启动日志。

现在我们需要执行以下操作：

创建启动日志详细信息页面

单击日志列表进入详细信息页面

在日志详细信息页面上显示传输的数据

创建日志详细信息页面

右键单击树目录区域中的页面节点，然后选择“新建”->目录

选择新目录

创建新目录logDetail

右键单击logDetail目录节点，然后选择New，Page。在出现的输入框中输入logdetail。

图像.png

我们参考索引和日志页面。目录名与页面名一致。

创建一个新的logdetail页面后，我们可以看到在app中，json文件中还有一行配置。

图像.png

在日志页面上为项目添加单击事件。

打开日志wxml目录查找每个项目的文本控件。向文本控件添加单击事件，并向其添加bindtap属性。在属性之后添加的字符串将用作单击控件后触发的函数。这里我们将其命名为bindItemTap。对我来说，我们需要检查日志在中创建bindItemTap函数。js。

选定的零件

打开app Js文件，添加bindItemTap函数：

添加函数

在这里，请注意不要忘记在前一个函数后添加英文逗号。冒号签名是函数的名称。它需要与用wxml编写的相同。写在冒号后面的函数ID是一个函数。括号是标识参数。现在这个函数没有参数。由花括号内部装饰方法执行的语句。在这里，我写了一句关于控制台日志打印的话。

安慰日志（“项目点击”）

此时，保存js文件和wxml文件，项目将被重新编译。单击头像以重新进入日志列表页面，单击每个项目，您可以看到日志打印在控制台上。

单击项目以查看控制台日志

通过这种方式，我们为每个项目添加单击事件。当事件被触发时，我们打印一个日志。当然，我们可以做更多的事情，比如跳转到日志详细信息页面。

wx。NavigateTo跳转到日志详细信息页面

现在让项目点击跳转到我们刚刚添加的logDetail页面。页面跳转使用函数wx。导航到

图像.png

在日志打印语句下，我们输入wx。navigateTo语句和微信开发者工具具有提示功能。我们选择扳手作为签名