微信小程序巨坑之二:点击左上返回按钮跳转首页

场景

最近公司让我开始维护一个微信小程序的应用,由于第一次接触小程序,对小程序一知半解的我开始了趟坑。
业务中有这么一个场景,我们使用微信的扫描二维码来进入小程序支付费用。走的流程如下:

扫描 - auth验证页操作(包括授权,关注公众号,绑定手机) - pay支付页操作

而且验证页面是半自动的。从获取微信用户数据,轮训关注信息,判断用户需要进行哪一步这些,手机绑定操作,这一系列都做完之后会自动地跳转到支付页面。

产品给出一个需求,需要再支付页操作的时候,可以在左上角返回到首页。

就此开始掉入深渊慢慢往上爬。

navigateTo和redirectTo

由于此项目之前的代码是用redirectTo来跳转支付页面。而且auth验证页面又是扫码进入小程序的第一个页面。redirectTo在跳转之前会销毁页面再进行跳转。就会在小程序的页面栈中将auth页面销毁,销毁之后,pay页面就是唯一在页面栈中的页面。于是根据小程序的规则,此种情况下左上角是不会出现返回按钮的。现在我们进行更改。
将auth跳转pay的方式改为navigateTo,如下:

wx.navigateTo({
  url:"../pay/index"
});

在此之后,我们就会在pay页面的左上角看到返回按钮了。

尝试点击返回按钮。

我们在pay页面尝试点击返回按钮,在这之后,我们会看到我们又进入了auth页面。并且,因为我们在第一次进入的时候,已经授权过用户信息,关注了公众号,绑定了手机。导致我们直接通过了其验证,马上又跳转到了pay页面。如此往复,点击,跳转,点击,跳转。形成了死循环。这当然不对,产品经理说的是返回首页。
那现在我们来看看怎么返回首页。

先前的做法,返回首页方式。

这个项目之前也有返回首页的需求。在非扫码情况下进入小程序,会默认进入首页。然后一步一步地进入想要去到的各种业务界面。当时的方案如下:
1.进入首页之后,跳转到下一个页面的时候全部用navigateTo进行跳转。
2.之后的二级页面和更下级页面之后的所有跳转都用redirectTo进行跳转。
这样,我们就发现,页面的栈里面就只会有首页。不管你在哪个页面只要点击了左上角的返回按钮,就会跳转到首页。但是这种情况只能是我们先进入首页的情况,必须在第一时间就已经将首页加入到了页面的栈中,而我们这个业务场景首先进入的是auth页,全程没看到过首页index出现在任何一个业务逻辑点。于是这种方法行不通。

现在的做法

经过深思熟虑,上面的方法是没办法达成的,必须另辟蹊径。
我在auth页面跳转pay页面的时候,首先运用navigateTo来跳转,pay页面就会出现左上角的返回按钮。此时,页面栈中油2个页面的信息,分别是auth和pay。
点击返回按钮之后,我们回到auth页面,页面栈中pay弹出,只剩auth。此时,我们在onShow顶部加入了一段代码。

const pages = getCurrentPages();
const prePage = pages[pages.length - 1].__displayReporter.showReferpagepath;
if(prePage === "pages/scan_pay/index.html"){
      wx.reLaunch({
        url:"../index/index"
      });
      return
    }

我们通过getCurrentPages来获取到页面的执行栈,这里获取到auth。
并且在这个页面栈数组中,只有auth。我们取到auth.__displayReporter.showReferpagepath。
这个就是上一页的路径,也就是返回到auth之前的pay页面。

我们进行判断。然后就可以直接回到首页了。

只不过这样有一个缺点,就是返回index页面之前要短暂地显示一下auth页。
综合各个大公司遇到的类似场景:例如美团外卖小程序在绑定用户信息的时候也会跨页面返回。也会短暂地显示中间的过渡页面。目前应该找不到更有效的方法了。

比巨坑还大的石油坑:
今天2019.5.9日。扫码进入微信小程序(场景值1011)的环境下,调不出关注公众号组件,会在official-account的binderror绑定的函数中返回这样的信息:


image.png

不得不感慨腾讯公司你们真的不要这样搞啊,给我们用了后面又抽风,会把我们惯坏的,很多小程序都要因为这个特性没有而彻底重构了。
NM$L

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,928评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,192评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,468评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,186评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,295评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,374评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,403评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,186评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,610评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,906评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,075评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,755评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,393评论 3 320
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,079评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,313评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,934评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,963评论 2 351

推荐阅读更多精彩内容