上一篇文章对于小程序开发工具创建的 hello world 项目做了个简单的结构介绍，对于每种文件做了简单说明。
本篇，计划对hello world 做简单的升级，从中学习以下两点：

学习目标

1. 页面之间的跳转
2. 如何在页面之间传递数据

在hello world项目中，点击首页的“获取头像昵称”按钮，获得头像和昵称。

点击头像可以进入启动日志列表页面，查看app的每次启动日志情况。

我们现在需要做下面的事情：

1. 创建启动日志详情页面
2. 点击日志列表后进入详情页面
3. 将传递过来的数据显示在日志详情页面

创建日志详情page

在树形目录区域在pages节点上右击，选择“新建” -> 目录。

在logdetail 目录节点上右击选择新建，Page，在出现的输入框中输入logDetail 。

我们参考index 和logs 页面，目录名称和page 名称一致。
在新建logdetail 这个page 后，我们可以看到在app.json 文件中多了一行配置。

为 logs 页面的item添加点击事件。

打开logs.wxml目录找到每个item的text 控件。为text 控件添加点击事件，为其添加bindtap属性，属性后的加入的字符串，将作为点击这个控件后触发的函数。这里我们取名 bindItemTap， 对于我我们需要在 logs.js 中创建 bindItemTap函数。

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

这个地方需要注意不要忘记在上一个函数后面添加英文逗号作为分割。冒号签名是函数的名字，这里需要和wxml中写的一样，冒号后面写 function 标识是一个函数。圆括号是标识参数，现在这个函数没有参数。花括号内饰方法执行的语句。这里我写了一句控制台的日志打印。

  console.log("item tap")

这个时候保存js文件和wxml文件，项目会重新被编译。点击头像重新进入日志列表页面，点击每一个item，可以看到控制台有日志打印出来。

这样我们就为每个item添加了点击事件，事件触发的时候我们打印了一句日志，当然我们可以做更多事情，比如跳转到日志详情页面。

wx.navigateTo 跳转到日志详情页面

现在让item点击的时候跳转到我们刚刚添加的 logDetail页面，页面跳转采用函数 wx.navigateTo

在日志打印语句下我们输入wx.navigateTo 语句，微信开发者工具有提示功能，我们选择签名是扳手图标的 function ，敲回车后可以自动补全。

在输入的时候点击function后面的蓝色背景白色 i 小图标（如图），可以打开函数的文档。

此时光标在url后，需要我们输入要跳转到的url地址。我们输入日志详情页面的地址

我们将app.config中配置的路径复制到url:的两个单引号之间。

绝对路径 和相对路径介绍

绝对路径和相对路径和电脑的文件目录概念是一致的，开发人员其实应该都知道，这里略微赘述。因为我发现还是有的app开发人员对这块不是很熟悉。

绝对路径：就是从项目的根目录开始，绝对不变的路径。

wx.navigateTo({
      url: '/pages/logDetail/logDetail',
    })

相对路径：就相对某一个页面计算路径，最终的路径是根据相对的页面不同而改变的。

wx.navigateTo({
      url: '../logDetail/logDetail',
    })

参数打印

编辑wxml中的列表text， 加上数据绑定，以 data- 开头,后面追上变量名。这里我们定义了两个数据绑定一个是变量名为index的变量，一个是变量名为log的变量。

{{index + 1}}. {{log}}

在 logs.js中,在bindItemTap 函数加入，参数 e 标识 event的意思。
我们在控制台打印这个event，可以看到如下结果。由于e是一个对象，所以被打印出了具体的层级关系和对应的字段值。

我们看到event 有currentTarget 字段，currentTarget 有dataset 字段。下面有我们定义的两个变量，并且有明确的数值。

我们改动代码，打印出具体的 index 和 log 信息。

console.log("index : " + e.currentTarget.dataset.index + "  log: " + e.currentTarget.dataset.log)

运行后看到结果如下：

参数传递和接收

我们需要将这两个参数传给logDetail页面。这里的参数传递，和http 请求中的get请求的参数传递和你相似。路径和参数列表中间用连接，参数和赋值之间用=连接。不同参数之间用&连接。
代码如下：

url: '../logDetail/logDetailindex=' + e.currentTarget.dataset.index + '&log=' + e.currentTarget.dataset.log,

我们在logDetail页面接收参数，打开logDetail.js文件。我们注意到有一个生命周期方法就是，onLoad，其中参数有 options，把 options 打印出来看看。

可以看到options 是一个json 对象。里面有我们刚刚传递过来的数据的key 和 value 。
为了接收传递过来的参数我们需要在 logDetail.js页面的 data 区域定义数据来接收。
如下：

data: {
    logIndex: 0,
    logTime: ''
  },

我们定义了 logIndex 和logTime 两个数据段准备来分别接收日志编号和日志的记录时间。

在onLoad 方法中我们用 setData方法将传递过来的数据赋值给他们两个。

    tShopfas.setData({
      logIndex: options.index,
      logTime: options.log
    })

tShopfas.setData方法可以传入一个数据对象，具体的格式和页面定义的data 数据格式一致。如下：

  {
      logIndex: options.index,
      logTime: options.log
    }

这样我们的传递过来的数据就赋值给了这个页面的data中。

显示传值

我们编辑 logDetail.wxml页面，

日志编号: {{logIndex}} 
App启动时间：{{logTime}}

保存运行后，就可以看到我们今天文章的整体效果了：
点击头像，进入日志列表页面，点击某一条日志，可以看到具体的日志详情页面。

总结一下：
传递数据用 data- ，数据被放在了 event对象的 currentTarget.dataset下。
页面跳转用 wx.navigateTo方法。
接收数据从 onload方法的options 中读取。

本文介绍的 wx.navigetTo方法属于导航跳转的一种，还有很多其他的导航方式，同时我们也可以知道页面是否跳转成功，是否跳转失败等信息，以便做一些处理。我们后续介绍。

期待和大家共同进步。