微信小程序的页面跳转

小程序有很多种跳转方式，这里写两个比较常用的跳转方法，一个是使用 js 的方法，一个是使用标签的方法。

首先要简单了解一下小程序的事件绑定

对标签绑定点击事件

直接写一个需要传参的，通过 bindtap 属性指定点击事件绑定的 js 方法。小程序里面传递参数的时候需要把参数写在后面的属性中，并且命名要写成 data- XXX 这种。

<view bindtap="clickMe" data-nid="123" data-name="lixiang">点我跳转</view>


Page({
  // 点击跳转函数
  clickMe: function(e) {
    console.log(e);
  },

  clickMe: function(e) {
    var nid = e.currentTarget.dataset.nid;
    console.log(nid);
  }
})

打印 e 的输出结果

可以看到我们需要的数据在 e.currentTarget.dataset.nid 之中，所以使用的时候直接获取就好了。

页面跳转和页面间的参数传递

下面我们直接加一个跳转函数 wx.navigateTo 就好了

  clickMe: function(e) {
    var nid = e.currentTarget.dataset.nid;
    console.log(nid);
    
    // 跳转
    wx.navigateTo({
      url: '/pages/redirection/redirection?id='+nid,
    })
  }

注意的是函数接收一个字典，其中 url 对应的值是一个 String 就是我们要跳转的页面地址了。
如果需要传递参数 可以像例子这样使用字符串拼接的方法传递，同时在对应页面也需要编写相应的 js 方法接受参数。也就是监听页面加载的生命周期函数 -- onload: function (options)，页面跳转过来之后自动执行该方法。参数 options 就是我们传递的参数。

注意事项
使用 wx.navigateTo 只能跳转到非 tabBar 页面！tabBar 页面跳转有一个专门的方法。

通过标签的跳转

这种方式有点类似于 html 中的 a 标签。使用方法：

<navigator url="/pages/redirection/redirection?id=666">跳转到页面</navigator>