場景
最近公司讓我開始維護(hù)一個微信小程序的應(yīng)用炼杖，由于第一次接觸小程序搜吧，對小程序一知半解的我開始了趟坑。
業(yè)務(wù)中有這么一個場景，我們使用微信的掃描二維碼來進(jìn)入小程序支付費(fèi)用肛冶。走的流程如下：
掃描 - auth驗(yàn)證頁操作(包括授權(quán)，關(guān)注公眾號扯键，綁定手機(jī)) - pay支付頁操作
而且驗(yàn)證頁面是半自動的睦袖。從獲取微信用戶數(shù)據(jù)，輪訓(xùn)關(guān)注信息荣刑，判斷用戶需要進(jìn)行哪一步這些馅笙，手機(jī)綁定操作，這一系列都做完之后會自動地跳轉(zhuǎn)到支付頁面厉亏。
產(chǎn)品給出一個需求董习，需要再支付頁操作的時(shí)候，可以在左上角返回到首頁爱只。
就此開始掉入深淵慢慢往上爬皿淋。
navigateTo和redirectTo
由于此項(xiàng)目之前的代碼是用redirectTo來跳轉(zhuǎn)支付頁面。而且auth驗(yàn)證頁面又是掃碼進(jìn)入小程序的第一個頁面。redirectTo在跳轉(zhuǎn)之前會銷毀頁面再進(jìn)行跳轉(zhuǎn)窝趣。就會在小程序的頁面棧中將auth頁面銷毀疯暑，銷毀之后，pay頁面就是唯一在頁面棧中的頁面哑舒。于是根據(jù)小程序的規(guī)則妇拯，此種情況下左上角是不會出現(xiàn)返回按鈕的。現(xiàn)在我們進(jìn)行更改洗鸵。
將auth跳轉(zhuǎn)pay的方式改為navigateTo,如下:
wx.navigateTo({
url:"../pay/index"
});
在此之后乖阵，我們就會在pay頁面的左上角看到返回按鈕了。
嘗試點(diǎn)擊返回按鈕预麸。
我們在pay頁面嘗試點(diǎn)擊返回按鈕瞪浸，在這之后，我們會看到我們又進(jìn)入了auth頁面吏祸。并且对蒲，因?yàn)槲覀冊诘谝淮芜M(jìn)入的時(shí)候，已經(jīng)授權(quán)過用戶信息贡翘，關(guān)注了公眾號蹈矮，綁定了手機(jī)。導(dǎo)致我們直接通過了其驗(yàn)證鸣驱，馬上又跳轉(zhuǎn)到了pay頁面泛鸟。如此往復(fù)，點(diǎn)擊踊东，跳轉(zhuǎn)北滥，點(diǎn)擊，跳轉(zhuǎn)闸翅。形成了死循環(huán)再芋。這當(dāng)然不對，產(chǎn)品經(jīng)理說的是返回首頁坚冀。
那現(xiàn)在我們來看看怎么返回首頁济赎。
先前的做法，返回首頁方式记某。
這個項(xiàng)目之前也有返回首頁的需求司训。在非掃碼情況下進(jìn)入小程序，會默認(rèn)進(jìn)入首頁液南。然后一步一步地進(jìn)入想要去到的各種業(yè)務(wù)界面壳猜。當(dāng)時(shí)的方案如下：
1.進(jìn)入首頁之后，跳轉(zhuǎn)到下一個頁面的時(shí)候全部用navigateTo進(jìn)行跳轉(zhuǎn)贺拣。
2.之后的二級頁面和更下級頁面之后的所有跳轉(zhuǎn)都用redirectTo進(jìn)行跳轉(zhuǎn)蓖谢。
這樣捂蕴，我們就發(fā)現(xiàn)，頁面的棧里面就只會有首頁闪幽。不管你在哪個頁面只要點(diǎn)擊了左上角的返回按鈕啥辨，就會跳轉(zhuǎn)到首頁。但是這種情況只能是我們先進(jìn)入首頁的情況盯腌，必須在第一時(shí)間就已經(jīng)將首頁加入到了頁面的棧中,而我們這個業(yè)務(wù)場景首先進(jìn)入的是auth頁溉知，全程沒看到過首頁index出現(xiàn)在任何一個業(yè)務(wù)邏輯點(diǎn)。于是這種方法行不通腕够。
現(xiàn)在的做法
經(jīng)過深思熟慮级乍，上面的方法是沒辦法達(dá)成的，必須另辟蹊徑帚湘。
我在auth頁面跳轉(zhuǎn)pay頁面的時(shí)候玫荣，首先運(yùn)用navigateTo來跳轉(zhuǎn)，pay頁面就會出現(xiàn)左上角的返回按鈕大诸。此時(shí)捅厂，頁面棧中油2個頁面的信息，分別是auth和pay资柔。
點(diǎn)擊返回按鈕之后焙贷，我們回到auth頁面，頁面棧中pay彈出贿堰，只剩auth辙芍。此時(shí)，我們在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來獲取到頁面的執(zhí)行棧故硅，這里獲取到auth。
并且在這個頁面棧數(shù)組中注簿，只有auth契吉。我們?nèi)〉絘uth.__displayReporter.showReferpagepath。
這個就是上一頁的路徑诡渴，也就是返回到auth之前的pay頁面。
我們進(jìn)行判斷菲语。然后就可以直接回到首頁了妄辩。
只不過這樣有一個缺點(diǎn)，就是返回index頁面之前要短暫地顯示一下auth頁山上。
綜合各個大公司遇到的類似場景：例如美團(tuán)外賣小程序在綁定用戶信息的時(shí)候也會跨頁面返回眼耀。也會短暫地顯示中間的過渡頁面。目前應(yīng)該找不到更有效的方法了佩憾。
比巨坑還大的石油坑：
今天2019.5.9日哮伟。掃碼進(jìn)入微信小程序(場景值1011)的環(huán)境下干花，調(diào)不出關(guān)注公眾號組件，會在official-account的binderror綁定的函數(shù)中返回這樣的信息：
不得不感慨騰訊公司你們真的不要這樣搞啊楞黄，給我們用了后面又抽風(fēng)池凄，會把我們慣壞的，很多小程序都要因?yàn)檫@個特性沒有而徹底重構(gòu)了鬼廓。
NM$L
