Solo  当前访客:1 开始使用

小水的博客

一个无聊的精彩人生

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

2019-11-04 16:25:51 loogn
0  评论    67  浏览

最近做了一个名片的微信小程序,有一个功能的实现从开始到调整好,的确费了些时间,今天记录下来,希望有缘的同仁引以为鉴。
情景是这样的,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事件在开发者工具中不会触发,在真机中才有。


标题:微信小程序实现TabBar页面加载不同的用户信息
作者:loogn
地址:http://www.loogn.net/mppageevent

发表评论

TOP