微信小程序入口場(chǎng)景的問(wèn)題集合與相關(guān)解決方法
前言
最近一段時(shí)間都在做小程序。
雖然是第二次開(kāi)發(fā)小程序,但是上次做小程序已經(jīng)是一年前的事了,所以最終還是被坑得死去活來(lái)。
這次是從零開(kāi)始開(kāi)發(fā)一個(gè)小程序,其實(shí)除了一些莫名其妙的兼容性問(wèn)題,大多數(shù)坑點(diǎn)都是在微信小程序的各個(gè)入口場(chǎng)景處。
所以這里整理一下微信小程序的各個(gè)入口場(chǎng)景,以及從這些入口場(chǎng)景進(jìn)入小程序會(huì)面臨的問(wèn)題以及解決方案。
這里只列出常用的幾種場(chǎng)景:
- [簡(jiǎn)單場(chǎng)景]啟動(dòng)小程序并進(jìn)入
- [簡(jiǎn)單場(chǎng)景]退出重進(jìn)(啟動(dòng)小程序后,退出小程序,再次進(jìn)入小程序)
- [簡(jiǎn)單場(chǎng)景]退出重進(jìn)首頁(yè)(啟動(dòng)小程序后,退出小程序,通過(guò)掃二維碼再次進(jìn)入小程序)
- [復(fù)雜場(chǎng)景]啟動(dòng)并進(jìn)入指定頁(yè)面(從小程序的分享卡片或者微信發(fā)送的通知消息進(jìn)入小程序)
- [復(fù)雜場(chǎng)景]退出重進(jìn)指定頁(yè)面(啟動(dòng)小程序后,退出小程序,從小程序的分享卡片或者微信發(fā)送的通知消息進(jìn)入小程序)
啟動(dòng)小程序并進(jìn)入
微信小程序的入口場(chǎng)景光微信提供的場(chǎng)景值就有幾十種,但是絕大多數(shù)都可以劃分為啟動(dòng)小程序并進(jìn)入。
這是最常用的一種進(jìn)入小程序的方式,比如通過(guò)搜索進(jìn)入或者點(diǎn)擊最近使用小程序的方式進(jìn)入,都算是這種類型。
這一場(chǎng)景下,首先我們需要明白發(fā)生了什么:
下載小程序 => 啟動(dòng)小程序 onLaunch事件觸發(fā) => 加載首頁(yè) onLoad事件觸發(fā) => 首頁(yè) onShow事件
然后在這個(gè)場(chǎng)景下,需要注意以下幾個(gè)問(wèn)題:
1.這個(gè)場(chǎng)景下一般會(huì)涉及到登錄。
所謂登錄,不一定是要在這個(gè)階段做,但是登錄信息的判斷這個(gè)階段是一定要做的。
通常前端肯定是要將登錄的這些信息存儲(chǔ)在小程序的storage里,然后在onLaunch事件中判斷是否登錄,沒(méi)登錄就跳轉(zhuǎn)到登錄頁(yè)面,登錄了就跳轉(zhuǎn)到首頁(yè)。
這里的登錄判斷一定要放在onLaunch,而不要放在首頁(yè)的onLoad里面,因?yàn)樾〕绦騿?dòng)一定會(huì)進(jìn)入onLaunch,而不一定會(huì)進(jìn)入首頁(yè)的onLoad。
2.而登錄頁(yè)面在設(shè)計(jì)的時(shí)候最好要加上一個(gè)url參數(shù)
傳入登錄成功后跳轉(zhuǎn)到的頁(yè)面地址,而不是登錄之后始終跳轉(zhuǎn)到首頁(yè),后面會(huì)講為什么需要這么做。
3.onLaunch階段是否有發(fā)出請(qǐng)求
并在請(qǐng)求完成后進(jìn)行了頁(yè)面跳轉(zhuǎn),或者請(qǐng)求完成設(shè)置storage,并在onLoad頁(yè)面中使用?
這種情況的出現(xiàn),會(huì)導(dǎo)致在請(qǐng)求時(shí)間過(guò)長(zhǎng)時(shí),首頁(yè)的onLoad已經(jīng)執(zhí)行了,此時(shí)就會(huì)出現(xiàn)BUG。
對(duì)于這個(gè)問(wèn)題,有的人會(huì)用定時(shí)器去判斷是否完成這個(gè)操作,但是我的建議是盡量避免在onLaunch中進(jìn)行這些操作。
如果一定要有,那么最好的方式就是做一個(gè)加載頁(yè)面去承載這些功能。
4.首頁(yè)數(shù)據(jù)的初始化
一般是放在onLoad中執(zhí)行。當(dāng)然總是有些特殊的需求是要放在onShow里面的。
關(guān)于onLoad和onShow,最常見(jiàn)的處理區(qū)別就在跳轉(zhuǎn)頁(yè)面時(shí)。
當(dāng)載入首頁(yè)時(shí),先觸發(fā)onLoad,再觸發(fā)onShow。
此時(shí)通過(guò)wx.navigateTo 的方式跳轉(zhuǎn)到頁(yè)面A,這個(gè)時(shí)候首頁(yè)并沒(méi)有被關(guān)閉,那么從頁(yè)面A再返回首頁(yè)時(shí),onLoad就不會(huì)觸發(fā),但onShow會(huì)觸發(fā)。
通常在加載數(shù)據(jù)時(shí),一般會(huì)用到onLoad。
但是如果說(shuō)頁(yè)面A更新了數(shù)據(jù),然后返回首頁(yè)時(shí),首頁(yè)的相關(guān)數(shù)據(jù)也需要更新。
那么初始化數(shù)據(jù)就不能放在onLoad里,而需要放在onShow里。
(當(dāng)然還有一種方式是通過(guò)getCurrentPages的方式在頁(yè)面A中調(diào)用首頁(yè)的方法。但是這里極不推薦這種方式,屬于某個(gè)頁(yè)面的事情一定要給這個(gè)頁(yè)面。最好不要將頁(yè)面間的職責(zé)通過(guò)這種方式打亂,容易引起代碼混亂,不易維護(hù)。)
退出重進(jìn)(啟動(dòng)小程序后,退出小程序,再次進(jìn)入小程序)
這種場(chǎng)景實(shí)際上是對(duì)第一種場(chǎng)景的擴(kuò)展。
而所謂的退出小程序不管你是點(diǎn)右上角的退出按鈕還是Home鍵直接切出都算是這類退出。
但是退出后再立即進(jìn)入小程序的時(shí)候,依然會(huì)進(jìn)入你退出小程序時(shí)所在的頁(yè)面,而不會(huì)觸發(fā)onLaunch,也不會(huì)觸發(fā)這個(gè)頁(yè)面的onLoad,不過(guò)onShow是肯定會(huì)觸發(fā)的。
這一場(chǎng)景下,首先我們需要明白發(fā)生了什么:
再次進(jìn)入小程序 => 進(jìn)入退出小程序時(shí)所在頁(yè)面 觸發(fā)onShow
在這個(gè)場(chǎng)景下,只需要注意onShow中是否有不可重復(fù)執(zhí)行的操作。
例如onShow中會(huì)獲取用戶喜歡吃的食物,加載到頁(yè)面的列表中,在這種場(chǎng)景下,如果不清空之前的列表或者加個(gè)判斷的話,就會(huì)出現(xiàn)重復(fù)數(shù)據(jù)。
退出重進(jìn)首頁(yè)(啟動(dòng)小程序后,退出小程序,通過(guò)掃二維碼再次進(jìn)入小程序)
這種場(chǎng)景實(shí)際上是對(duì)第二種場(chǎng)景的擴(kuò)展。
我們通常給二維碼配置的是一個(gè)無(wú)參數(shù)的小程序首頁(yè)地址,當(dāng)我們退出小程序,通過(guò)掃二維碼再次進(jìn)入小程序時(shí)會(huì)進(jìn)入首頁(yè)。
這一場(chǎng)景下,首先我們需要明白發(fā)生了什么:
再次進(jìn)入小程序 => 進(jìn)入退出小程序時(shí)所在頁(yè)面A 不觸發(fā)onShow => 觸發(fā)頁(yè)面A onHide => 觸發(fā)頁(yè)面A onUnload=> 進(jìn)入首頁(yè) onLoad => 首頁(yè)onShow
在這個(gè)場(chǎng)景下,除了需要注意第二種場(chǎng)景存在的問(wèn)題,還需要注意頁(yè)面A的onHide事件中是否會(huì)觸發(fā)奇怪的操作,例如頁(yè)面跳轉(zhuǎn)。
啟動(dòng)并進(jìn)入指定頁(yè)面(從小程序的分享卡片或者微信發(fā)送的通知消息進(jìn)入小程序)
這塊場(chǎng)景常見(jiàn)于邀請(qǐng)他人進(jìn)入小程序,需要注意的是他們往往被賦予了更多的業(yè)務(wù)功能,也就往往增大了小程序的實(shí)現(xiàn)難度。
這一場(chǎng)景下,首先我們需要明白發(fā)生了什么:
下載小程序 => 啟動(dòng)小程序 onLaunch事件觸發(fā) => 加載指定頁(yè)面 onLoad事件觸發(fā) =>指定頁(yè)面 onShow事件
這里就可以看出,并不是進(jìn)入小程序就一定會(huì)進(jìn)入首頁(yè)的onLoad。
所以這就是為什么之前強(qiáng)調(diào)不要將登錄判斷放在首頁(yè)的onLoad中,而一定要放在onLaunch里。
但是這里又和掃二維碼不同,掃二維碼的鏈接一般都是指定的首頁(yè)。
而這里通常跳轉(zhuǎn)到的是非首頁(yè)的頁(yè)面,而且可能還多了復(fù)雜的業(yè)務(wù)功能。
我們?cè)谛枨蠓治龊驮O(shè)計(jì)階段應(yīng)該更多地考慮到這里可能會(huì)引發(fā)的復(fù)雜問(wèn)題,而盡量將此處的業(yè)務(wù)邏輯簡(jiǎn)化,或者加大估時(shí)。
接下來(lái),我們將根據(jù)業(yè)務(wù)從簡(jiǎn)單到復(fù)雜,慢慢講解這個(gè)場(chǎng)景下可能存在的問(wèn)題。
最簡(jiǎn)單的邀請(qǐng)函(進(jìn)入小程序首頁(yè))
和第一種場(chǎng)景差不多,這里略過(guò)
進(jìn)階邀請(qǐng)函(進(jìn)入小程序指定頁(yè)面,帶參數(shù),需要根據(jù)參數(shù)初始化頁(yè)面)
這種情況下,需要考慮以下幾個(gè)問(wèn)題:
1.首先在onLaunch階段會(huì)判斷是否登錄
沒(méi)登錄那么就需要跳轉(zhuǎn)到登錄頁(yè)面,登錄頁(yè)面登錄之后,肯定要跳轉(zhuǎn)到這個(gè)頁(yè)面,而不是首頁(yè)。
所以之前說(shuō)過(guò)登錄頁(yè)面設(shè)計(jì)的時(shí)候需要傳入一個(gè)url參數(shù),來(lái)明確登錄成功后跳轉(zhuǎn)到哪個(gè)頁(yè)面。
2.這種跳轉(zhuǎn)到指定頁(yè)面的情況通常都需要一個(gè)回到首頁(yè)的按鈕
就比如邀請(qǐng)某人查看一篇文章,點(diǎn)擊邀請(qǐng)卡片后會(huì)進(jìn)入小程序內(nèi)的文章詳情。
一般在小程序內(nèi)通常是通過(guò)點(diǎn)擊文章列表跳轉(zhuǎn)到文章詳情,那么這個(gè)時(shí)候可以逐級(jí)返回到首頁(yè)。
但是在點(diǎn)擊邀請(qǐng)函進(jìn)入的情況是沒(méi)有返回功能的,此時(shí)如果沒(méi)有回到首頁(yè)功能,那么用戶可能就永遠(yuǎn)沒(méi)法回到首頁(yè)。
(其實(shí)是可以的,但是小程序的的這個(gè)功能藏得比較深,不要指望所有用戶都那么熱愛(ài)摸索)
3.這里一定要特別注意第一種場(chǎng)景的第三個(gè)應(yīng)該注意的問(wèn)題
對(duì)于第一種場(chǎng)景而言那個(gè)問(wèn)題因?yàn)閱?dòng)次數(shù)很多容易出現(xiàn),但是在當(dāng)前的場(chǎng)景下可能很容易被忽略掉。
涉及身份的邀請(qǐng)函(進(jìn)入小程序指定頁(yè)面,帶參數(shù),需要根據(jù)參數(shù)切換身份,更可能涉及到登錄)
為了更好地說(shuō)明這種情況,我們來(lái)列舉一個(gè)場(chǎng)景。
如果有一個(gè)打車軟件,進(jìn)入這個(gè)軟件后有兩種身份,一種是乘客,一種是司機(jī)。
用戶是司機(jī),那么看到的是頁(yè)面A或者選定了TabA,如果是乘客,那么看到的是頁(yè)面B或者選定了TabB。
而且還有一個(gè)需求,用戶上次登陸時(shí)什么身份,這次登陸也是什么身份。
考慮到換手機(jī)的場(chǎng)景,那么這個(gè)信息肯定是存儲(chǔ)在服務(wù)端的,所以進(jìn)入小程序的時(shí)候會(huì)去請(qǐng)求服務(wù)端進(jìn)行判斷。
現(xiàn)在我用司機(jī)的身份發(fā)了個(gè)單,微信給了個(gè)通知消息,我沒(méi)點(diǎn)開(kāi)。然后切換到乘客的身份了,再去點(diǎn)擊通知消息,那么我會(huì)以司機(jī)的身份去打開(kāi)這個(gè)消息。
這個(gè)場(chǎng)景其實(shí)在業(yè)務(wù)上來(lái)看是很合理的,但是對(duì)于我們的程序?qū)崿F(xiàn)來(lái)看,復(fù)雜度一下子就上來(lái)了。
1.首先我們確定一下這個(gè)請(qǐng)求身份信息的請(qǐng)求在哪個(gè)階段發(fā)出?
onLaunch?
那么是不是需要在onLoad階段去獲取這個(gè)身份的信息然后給出不同的頁(yè)面?
這樣一下子就會(huì)出現(xiàn)進(jìn)階邀請(qǐng)函的第三個(gè)問(wèn)題,而且還不僅僅是這一個(gè)問(wèn)題,之后我們會(huì)講到。
所以這個(gè)地方需要做一個(gè)專門的邀請(qǐng)加載頁(yè)面去處理這個(gè)事情。
2.分離出一個(gè)單獨(dú)的加載頁(yè)面之后,其實(shí)我們的工作會(huì)變的簡(jiǎn)單清晰起來(lái)。
因?yàn)槲覀冎恍枰プ鑫覀冞@個(gè)頁(yè)面所需要做的事情就行了。
根據(jù)參數(shù)去獲取我們現(xiàn)在的身份,然后以這種身份跳轉(zhuǎn)到相應(yīng)的頁(yè)面。
3.這里還涉及到一個(gè)問(wèn)題,那就是正常啟動(dòng)而不是通過(guò)通知消息進(jìn)入的時(shí)候,也需要去請(qǐng)求服務(wù)端獲取身份信息。
我給的建議是一定要另外單獨(dú)建一個(gè)頁(yè)面去承載這個(gè)功能,而不要將這兩個(gè)加載頁(yè)面糅合到一起。
里面的頁(yè)面展示我們可以用組件化的方式去做,但是頁(yè)面的邏輯一點(diǎn)更要分開(kāi)。
因?yàn)檫@兩種情況真的很容易混雜,也是為了利于后面的維護(hù)工作。
4.正常啟動(dòng)時(shí)的加載頁(yè)面也可以看情況糅合到首頁(yè)的onLoad里面。
但是如果有可能,還是希望放在單獨(dú)的頁(yè)面里。
首頁(yè)往往功能很多,代碼量比較大,不要將本來(lái)可以分離出去的功能放進(jìn)去。
還是那句話,頁(yè)面的職責(zé)分開(kāi)。
我這里講的其實(shí)還是一個(gè)比較常見(jiàn)的功能,通常我們的業(yè)務(wù)也不一定像上面這樣簡(jiǎn)單。
所以如果涉及到這方面的操作,在需求分析和設(shè)計(jì)的時(shí)候就應(yīng)該考慮清楚。
如果等到功能開(kāi)發(fā)的時(shí)候再去考慮這些事情,那么等待你的一定是延期或者加班。
退出重進(jìn)指定頁(yè)面(啟動(dòng)小程序后,退出小程序,從小程序的分享卡片或者微信發(fā)送的通知消息進(jìn)入小程序)
這種場(chǎng)景同樣是第四種場(chǎng)景的進(jìn)階,但是如果你在第四種場(chǎng)景中使用了我所說(shuō)的加載頁(yè)面,那么接下來(lái)的問(wèn)題會(huì)簡(jiǎn)單很多。
這一場(chǎng)景下,首先我們需要明白發(fā)生了什么:
再次進(jìn)入小程序 => 進(jìn)入退出小程序時(shí)所在頁(yè)面A 不觸發(fā)onShow => 觸發(fā)頁(yè)面A onHide => 觸發(fā)頁(yè)面A onUnload => 進(jìn)入邀請(qǐng)加載頁(yè)面onLoad => 加載頁(yè)面onShow
對(duì)于第四種場(chǎng)景中的打車小程序而言,如果按照我們先前所說(shuō)沒(méi)有在onLaunch中獲取身份信息,而是放在了加載頁(yè)中,那么現(xiàn)在什么都不用改。
如果獲取身份信息的請(qǐng)求放在onLaunch中,現(xiàn)在又得在onLoad中加一道邏輯。
當(dāng)然這里還是得注意一個(gè)問(wèn)題,對(duì)于這一類型的進(jìn)入小程序的方式,比如從分享卡片進(jìn)入和微信的通知消息進(jìn)入。
即使他們所進(jìn)入的頁(yè)面不同,但是他們都可以使用這個(gè)載入頁(yè)面去做判斷。
與正常啟動(dòng)場(chǎng)景的載入頁(yè)面是不同的,他們本來(lái)就是同一種入口場(chǎng)景。
所以該共用的地方還是得共用,用不同的業(yè)務(wù)code判斷即可。
總結(jié)
總的來(lái)說(shuō),以上的幾種情況應(yīng)該能涵蓋絕大多數(shù)小程序的入口場(chǎng)景。
整理的目的其實(shí)主要是為了做需求分析和設(shè)計(jì)時(shí)參考使用,以避免在考慮業(yè)務(wù)問(wèn)題時(shí)漏過(guò)這些場(chǎng)景導(dǎo)致后期的工作計(jì)劃受到影響。
所謂加班和項(xiàng)目延期發(fā)布,大都是前期需求分析和設(shè)計(jì)考慮不周。
我們不可能考慮到所有的場(chǎng)景,但是應(yīng)該盡善盡美。
謀定而后動(dòng),前事不忘后事之師,也算是PDCA了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)的判斷方法、變量是否存在功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的判斷方法、變量是否存在功能,涉及javascript針對(duì)變量、方法判斷與異常處理操作技巧,需要的朋友可以參考下2018-05-05
js實(shí)現(xiàn)簡(jiǎn)單計(jì)算器
一個(gè)簡(jiǎn)潔的網(wǎng)頁(yè)JS計(jì)算器,附詳細(xì)代碼釋義。通過(guò)下邊的效果演示就可以看到,這是一個(gè)挺小的js網(wǎng)頁(yè)計(jì)算器,界面美化的我想還是不錯(cuò)的,畢竟在沒(méi)有使用任何圖片修飾的情況下,很好看,而且功能挺實(shí)用,可以完成基本的數(shù)學(xué)算數(shù)運(yùn)算。2015-11-11
JavaScript中l(wèi)ayim之整合右鍵菜單的示例代碼
這篇文章主要介紹了JavaScript中l(wèi)ayim之整合右鍵菜單的示例代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-02-02
JS實(shí)現(xiàn)動(dòng)態(tài)修改table及合并單元格的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)動(dòng)態(tài)修改table及合并單元格的方法,結(jié)合完整實(shí)例形式分析了JS動(dòng)態(tài)遍歷及修改table單元格的具體操作技巧,需要的朋友可以參考下2017-02-02
基于JavaScript實(shí)現(xiàn)回到頁(yè)面頂部動(dòng)畫代碼
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)回到頁(yè)面頂部動(dòng)畫代碼的相關(guān)資料,代碼簡(jiǎn)單易用,非常實(shí)用,需要的朋友可以參考下2016-05-05
JavaScript如何使用Promise實(shí)現(xiàn)分批處理接口請(qǐng)求
當(dāng)我們?cè)陂_(kāi)發(fā)時(shí)遇到需要同時(shí)發(fā)起百條接口請(qǐng)求怎么辦呢,本文主要來(lái)和大家介紹一下JavaScript如何使用Promise實(shí)現(xiàn)分批處理接口請(qǐng)求,需要的可以參考下2024-03-03

