小程序--带参数跳转页面，包括跳转到tabbar页面_跳转tabbar页面传参

1.能跳到tabbar页面的方法

wx.switchTab(Object object)
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。不能带参数

wx.reLaunch(Object object)
关闭所有页面，打开到应用内的某个页面。可以带参数，不同参数用&分隔

2.只能跳转到非tabbar页面的方法

wx.navigateTo(Object object)
保留当前页面，跳转到应用内的某个页面。可以带参数，不同参数用&分隔
使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

wx.redirectTo(Object object)
关闭当前页面，跳转到应用内的某个页面。可以带参数，不同参数用&分隔

3.页面带参跳转代码示例

从index页面跳转到cate页面
效果：点击水果类，跳到分类页面，并显示水果类商品

（1）index.wxml代码

当前页面的参数，传到下一个页面。当前视图中view里要写入传递值。如下，通过bindtap绑定gotocate事件，并且把要传递的参数key，以 “data-” 的格式传递。
关键代码：bindtap=“gotocate” data-index="{{index}}"

<!--推荐分类列表-->
    <view class="section cates">
      <block wx:key="1" wx:for="{{cateList}}" wx:for-index="index" wx:for-item="cate" >
        <view class="cate" bindtap="gotocate" data-index="{{index}}" >
          <image src="{{cate.url}}" class="img" mode="aspectFit" />
          <text class="name">{{cate.name}}</text>
        </view>
      </block>
    </view>
1
2
3
4
5
6
7
8
9

（2）index.js代码

/*点击分类推荐列表 */
  gotocate:function(e){
    var key = e.currentTarget.dataset.index
    wx.reLaunch({
      url: "/pages/cate/cate?key=" + key
    })
  },
1
2
3
4
5
6
7

（3）cate.js代码

在跳转到的页面接收数据：数据存在options中，直接以 “options.参数名”的形式获取

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var key = options.key;
    console.log("cate+key:"+key);
    this.setData({
      key:key
    })
  }
1
2
3
4
5
6
7
8
9
10

（4）补充：

上面示例只传一个参数 data-index="{{index}}"，参数也可以是多个 ，比如多加一个data-time="{{time}}"
那么index.js代码改为

   var key = e.currentTarget.dataset.index
   var time= e.currentTarget.dataset.time
    wx.reLaunch({
      url: "/pages/cate/cate?key=" + key+"&time="+time
    })
1
2
3
4
5

cate.js代码改为

onLoad: function (options) {
    var key = options.key;
    var time=options.time
    this.setData({
      key:key
      time:time
    })
  }
1
2
3
4
5
6
7
8