微信小程序的页面跳转

2021-03-02  本文已影响0人  Vector_Wan

小程序有很多种跳转方式,这里写两个比较常用的跳转方法,一个是使用 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>
上一篇 下一篇

猜你喜欢

热点阅读