微信小程序实现 TabBar 页面加载不同的用户信息

最近做了一个名片的微信小程序，有一个功能的实现从开始到调整好，的确费了些时间，今天记录下来，希望有缘的同仁引以为鉴。
情景是这样的，tabBar 菜单中有【名片】和【名片夹】，点击【名片】是展示自己的名片，从【名片夹】中点击别人的名片，也是到【名片】这个页面，但是要展示别人的名片，这个看似简单，中间遇到了不止一个坑！
我们假设这个 tab 菜单页面叫 card，要实现以下操作：
1，任何时候点击【名片】都会显示我自己的名片
2，任何时候点击别人的名片，都会显示别人的名片
3，这个页面可以分享出去，别人点开逻辑正常
中间的曲折就不说了，这里只记录一下最后的实现，并且会加一些解释（其实也就是避坑操作），由于我使用 uni-app 开发的，所以这里是 mpvue 的写法：

第一步：card 的 onLoad

onLoad(options) {

    let that = this;

    let goid = 0; //要看谁的名片

    if (options.scene) {

        //二维码分享出去的scene值，也就是cardid

        goid = options.scene;

    } else if (options.shareid) {

        // 页面分享出去所带的参数shareid也是cardid

        goid = options.shareid;

    } else {

        that.hasload = true;

        goid = getApp().globalData.cardid || getApp().globalData.userid;

    }

    that.getCardInfo(goid);

}

我们考虑打开 card 页面执行 onLoad 的情况有这么几种：1，通过二维码识别进入小程序，并打开这个页面，会执行 card 的 onLoad，对应 scene 那个分支。2，通过小程序中分享页面打开这个页面，会执行 onLoad 事件，对应 shareid 那个分支。3，自己打开小程序，第一次点击【名片】或者从【名片夹】中点击别人名片的时候，会执行 onLoad 事件，这里要注意，由于 card 是 tabBar 页面，只能通过 switchTab 来跳转，并且不能带参数！所以这里使用 globalData 用全局变量 cardid 来传递，如果获取不到，那么取 userid,userid 保存着登录人的编号。那么为什么有个 hasload 变量，我们下面说。

第二步 名片夹中的跳转

goCard(userid) {

    getApp().globalData.cardid = userid;

    uni.switchTab({

        url: "../card/card"

    });

}

这一步简单了，由于我们第一步的铺垫，这里只设置一下 globalData.cardid，然后切换 switchTab 就行了。

那么现在大家想一下 card 页面如何呈现呢，首先要明确 tabBar 页面只会触发一次 onLoad 事件，也就是说加载过 tabBar 页面之后就会缓存起来的，所以不能只在 onLoad 事件中加载，这个时候你也许会想放在 onShow 中不就行了吗，onShow 中虽然可以加载出来，但是由于名片中有二级页面连接，点进去返回的时候还会执行 onShow，并且，如果在 onShow 中加载，怎么记录改下载谁的名片呢？ 比如我点开了小明的名片，globalData.cardid 设置成了小名，现在点击 tabBar 中的【名片】，怎么实现查看自己呢？搜一下资料，知道了页面有 onTabItemTap 事件。

第三步 card 页面的 onTabItemTap

onTabItemTap(obj) {

    let that = this;

    if (that.hasload) {

        that.hasload = false;

        return;

    }

    if (obj.index == 3) {

        let goid = getApp().globalData.cardid;

        if (goid == 0) {

            goid = getApp().globalData.userid;

        }

        that.getCardInfo(goid);

    }

}

ob.index==3 是【名片】所在的位置，索引是从 1 开始的，这里判断 globalData.cardid 如果是 0 的话，就加载自己的名片，最开始又出现了 hasload 的判断，就是为了不要重复加载，因为在 card 第一次打开的时候，会执行 onLoad，如果正好又是 tabBar 切换的话，这里也会执行，页面会刷新两次，这就是 hasload 的用途了。

第四步 重置 globalData.cardid

在 getCardInfo 中，大概有如下代码

getCardInfo(goid) {

    let that = this;

    getApp().globalData.cardid = 0;

    if (goid == that.userid) {

        return;

    }

    that.userid = goid;

    //下面加载名片

}

这样整个逻辑就跑通了，入了好几个坑才到达彼岸，很有必要记录之！

注意：onTabItemTap 事件在开发者工具中不会触发，在真机中才有。