微信小程序踩坑记录 ------- 使用switchTab向tab页面跳转时如何进行参数传递与接收

微信小程序页面之间的跳转传参使用最多的就是直接使用 navigator 标签来进行参数的传递，在跳转页用js进行参数接收，如从A页面跳转到B页面：
A 页面可以在WXML中使用

<navigator url="/pages/B?id=1">
	点我向B页面进行跳转，传递id值1
</navigator>

向B页面传递参数并进行跳转。然后在A页面的js中使用

onLoad: function (o){
	var id = o.id;
	console.log(id)  //  这里获取到的值为从A页面传递来的 id 参数 1
}

但是上面的方法仅仅适用于非Tab标签即不是在 app.json 的 tabBar 中配置的页面，如果我们是向 tab页面进行跳转，然后将上面A页面的跳转链接换成：

<navigator url="/pages/B?id=1" open-type="switchTab">
	点我向B页面进行跳转，传递id值1
</navigator>

会发现我们在B页面 js 中获取到的id 打印结果为 undefined，这会让刚开始进行微信小程序的小伙伴非常头疼，明明写的都对，可就是不能获取到参数。这就是我要写这篇文章的目的了，这里说的也是我自己刚开始时候出现的问题，但是由于一直比较忙没有及时的将解决方案写下来，最近又用到了同样的方法，决定还是花几十分钟记录一下，为那些刚开始进行微信小程序开发并遇到此类问题的小伙伴提供一个解决方案。

废话少说，上干货

出现这个问题的原因是因为 Tab 标签页面不支持页面间通过 navigator 进行参数的传递，基于这个原因，我这里给到的解决办法是：

1. 将参数在 A 页面通过点击事件存到缓存中
   （1）A页面 wxml 文件

<view data-id='1' class="list" bind:tap="clickNav">
    点我向B页面进行跳转，传递id值1
</view>

（2）A页面 js 文件
缓存成功后进行页面跳转

clickNav (e){
    var id = e.currentTarget.dataset.id;
    wx.setStorage({
      key: 'id',
      data: id,
      success: (result)=>{
        wx.switchTab({
          url: '/pages/B',
        });
      }
    });
}

2. 在B页面通过 js 从缓存中读取A页面传递过来的参数

wx.getStorage({
  key: 'id',
  success: (res)=>{
    var id = res.data;  // 这里获取到的id值即为A页面传递id值
    that.setData({
      id: id
    })
  },
  fail: ()=>{

  },
});

到这里使用switchTab向tab页面跳转时进行参数传递与接收的方法就写完了，其实难的不在于怎么写代码，主要还是新手不知道为什么就不能进行参数传递，从而一直怀疑是自己的代码写的有问题，在那里一直浪费时间。