（五）微信小程序的跳转

我们在微信页面往往有点击一个图片就可以跳转的情况，接下来我们就学习一下这个功能

 一  js版本--bindtap 实现跳转

1. 首先我们先写一个跳转的按钮（在index.wxml）

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

　　参数介绍

bindtap  绑定js函数
data-    传参数的关键字

　　

2. js编写（在index.js）

  clickMe:function(e){
    /* e接收传过来的参数 */
    // 在 e.currentTarget.dataset.nid 取到参数
    var nid = e.currentTarget.dataset.nid
 
    // wx下的参数navigateTo是跳转的意思
    // 要是加参数要用拼接的形式
    wx.navigateTo({
      // url: '/pages/rediret/rediret',
      url: '/pages/rediret/rediret?nid='+nid,
    })
  }

　

注意：

navigateTo 只能跳转到非tabBar页面

3. rediret新的页面中的（在rediret.js）--拿到传过来的参数

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log('options',options)
  },

二 标签---navigator 实现跳转

<navigator url="/pages/rediret/rediret?nid=123">点击跳转</navigator>

获取传过来的参数 同一中的第三点