跳到主要內容

微信小程序入口場景的問題整理與相關解決方案

前言


最近一段時間都在做小程序。


雖然是第二次開發小程序,但是上次做小程序已經是一年前的事了,所以最終還是被坑得死去活來。


這次是從零開始開發一個小程序,其實除了一些莫名其妙的兼容性問題,大多數坑點都是在微信小程序的各個入口場景處。


所以這裏整理一下微信小程序的各個入口場景,以及從這些入口場景進入小程序會面臨的問題以及解決方案。


這裏只列出常用的幾種場景:



  • [簡單場景]啟動小程序並進入

  • [簡單場景]退出重進(啟動小程序后,退出小程序,再次進入小程序)

  • [簡單場景]退出重進首頁(啟動小程序后,退出小程序,通過掃二維碼再次進入小程序)

  • [複雜場景]啟動並進入指定頁面(從小程序的分享卡片或者微信發送的通知消息進入小程序)

  • [複雜場景]退出重進指定頁面(啟動小程序后,退出小程序,從小程序的分享卡片或者微信發送的通知消息進入小程序)


啟動小程序並進入


微信小程序的入口場景光微信提供的場景值就有幾十種,但是絕大多數都可以劃分為啟動小程序並進入。


這是最常用的一種進入小程序的方式,比如通過搜索進入或者點擊最近使用小程序的方式進入,都算是這種類型。


這一場景下,首先我們需要明白髮生了什麼:


下載小程序 => 啟動小程序 onLaunch事件觸發 => 加載首頁 onLoad事件觸發 => 首頁 onShow事件

然後在這個場景下,需要注意以下幾個問題:



  1. 這個場景下一般會涉及到登錄。
    所謂登錄,不一定是要在這個階段做,但是登錄信息的判斷這個階段是一定要做的。
    通常前端肯定是要將登錄的這些信息存儲在小程序的storage里,然後在onLaunch事件中判斷是否登錄,沒登錄就跳轉到登錄頁面,登錄了就跳轉到首頁。
    這裏的登錄判斷一定要放在onLaunch,而不要放在首頁的onLoad裏面,因為小程序啟動一定會進入onLaunch,而不一定會進入首頁的onLoad。

  2. 而登錄頁面在設計的時候最好要加上一個url參數,傳入登錄成功后跳轉到的頁面地址,而不是登錄之後始終跳轉到首頁,後面會講為什麼需要這麼做。

  3. onLaunch階段是否有發出請求,並在請求完成後進行了頁面跳轉,或者請求完成設置storage,並在onLoad頁面中使用?
    這種情況的出現,會導致在請求時間過長時,首頁的onLoad已經執行了,此時就會出現BUG。
    對於這個問題,有的人會用定時器去判斷是否完成這個操作,但是我的建議是盡量避免在onLaunch中進行這些操作。
    如果一定要有,那麼最好的方式就是做一個加載頁面去承載這些功能。

  4. 首頁數據的初始化,一般是放在onLoad中執行。當然總是有些特殊的需求是要放在onShow裏面的。
    關於onLoad和onShow,最常見的處理區別就在跳轉頁面時。
    當載入首頁時,先觸發onLoad,再觸發onShow。
    此時通過wx.navigateTo 的方式跳轉到頁面A,這個時候首頁並沒有被關閉,那麼從頁面A再返回首頁時,onLoad就不會觸發,但onShow會觸發。
    通常在加載數據時,一般會用到onLoad。
    但是如果說頁面A更新了數據,然後返回首頁時,首頁的相關數據也需要更新。
    那麼初始化數據就不能放在onLoad里,而需要放在onShow里。
    (當然還有一種方式是通過getCurrentPages的方式在頁面A中調用首頁的方法。但是這裏極不推薦這種方式,屬於某個頁面的事情一定要給這個頁面。最好不要將頁面間的職責通過這種方式打亂,容易引起代碼混亂,不易維護。)


退出重進(啟動小程序后,退出小程序,再次進入小程序)


這種場景實際上是對第一種場景的擴展。


而所謂的退出小程序不管你是點右上角的退出按鈕還是Home鍵直接切出都算是這類退出。


但是退出后再立即進入小程序的時候,依然會進入你退出小程序時所在的頁面,而不會觸發onLaunch,也不會觸發這個頁面的onLoad,不過onShow是肯定會觸發的。


這一場景下,首先我們需要明白髮生了什麼:


再次進入小程序 => 進入退出小程序時所在頁面 觸發onShow

在這個場景下,只需要注意onShow中是否有不可重複執行的操作。


例如onShow中會獲取用戶喜歡吃的食物,加載到頁面的列表中,在這種場景下,如果不清空之前的列表或者加個判斷的話,就會出現重複數據。


退出重進首頁(啟動小程序后,退出小程序,通過掃二維碼再次進入小程序)


這種場景實際上是對第二種場景的擴展。


我們通常給二維碼配置的是一個無參數的小程序首頁地址,當我們退出小程序,通過掃二維碼再次進入小程序時會進入首頁。


這一場景下,首先我們需要明白髮生了什麼:


再次進入小程序 => 進入退出小程序時所在頁面A 不觸發onShow => 觸發頁面A onHide => 觸發頁面A onUnload=> 進入首頁 onLoad => 首頁onShow

在這個場景下,除了需要注意第二種場景存在的問題,還需要注意頁面A的onHide事件中是否會觸發奇怪的操作,例如頁面跳轉。


啟動並進入指定頁面(從小程序的分享卡片或者微信發送的通知消息進入小程序)


這塊場景常見於邀請他人進入小程序,需要注意的是他們往往被賦予了更多的業務功能,也就往往增大了小程序的實現難度。


這一場景下,首先我們需要明白髮生了什麼:


下載小程序 => 啟動小程序 onLaunch事件觸發 => 加載指定頁面 onLoad事件觸發 =>指定頁面  onShow事件

這裏就可以看出,並不是進入小程序就一定會進入首頁的onLoad。


所以這就是為什麼之前強調不要將登錄判斷放在首頁的onLoad中,而一定要放在onLaunch里。


但是這裏又和掃二維碼不同,掃二維碼的鏈接一般都是指定的首頁。


而這裏通常跳轉到的是非首頁的頁面,而且可能還多了複雜的業務功能。


我們在需求分析和設計階段應該更多地考慮到這裏可能會引發的複雜問題,而盡量將此處的業務邏輯簡化,或者加大估時。


接下來,我們將根據業務從簡單到複雜,慢慢講解這個場景下可能存在的問題。


最簡單的邀請函(進入小程序首頁)


和第一種場景差不多,這裏略過


進階邀請函(進入小程序指定頁面,帶參數,需要根據參數初始化頁面)


這種情況下,需要考慮以下幾個問題:



  1. 首先在onLaunch階段會判斷是否登錄,沒登錄那麼就需要跳轉到登錄頁面,登錄頁面登錄之後,肯定要跳轉到這個頁面,而不是首頁。
    所以之前說過登錄頁面設計的時候需要傳入一個url參數,來明確登錄成功后跳轉到哪個頁面。

  2. 這種跳轉到指定頁面的情況通常都需要一個回到首頁的按鈕。
    就比如邀請某人查看一篇文章,點擊邀請卡片後會進入小程序內的文章詳情。
    一般在小程序內通常是通過點擊文章列表跳轉到文章詳情,那麼這個時候可以逐級返回到首頁。
    但是在點擊邀請函進入的情況是沒有返回功能的,此時如果沒有回到首頁功能,那麼用戶可能就永遠沒法回到首頁。
    (其實是可以的,但是小程序的的這個功能藏得比較深,不要指望所有用戶都那麼熱愛摸索)

  3. 這裏一定要特別注意第一種場景的第三個應該注意的問題,對於第一種場景而言那個問題因為啟動次數很多容易出現,但是在當前的場景下可能很容易被忽略掉。


涉及身份的邀請函(進入小程序指定頁面,帶參數,需要根據參數切換身份,更可能涉及到登錄)


為了更好地說明這種情況,我們來列舉一個場景。


如果有一個打車軟件,進入這個軟件後有兩種身份,一種是乘客,一種是司機。


用戶是司機,那麼看到的是頁面A或者選定了TabA,如果是乘客,那麼看到的是頁面B或者選定了TabB。


而且還有一個需求,用戶上次登陸時什麼身份,這次登陸也是什麼身份。


考慮到換手機的場景,那麼這個信息肯定是存儲在服務端的,所以進入小程序的時候會去請求服務端進行判斷。


現在我用司機的身份發了個單,微信給了個通知消息,我沒點開。然後切換到乘客的身份了,再去點擊通知消息,那麼我會以司機的身份去打開這個消息。


這個場景其實在業務上來看是很合理的,但是對於我們的程序實現來看,複雜度一下子就上來了。



  1. 首先我們確定一下這個請求身份信息的請求在哪個階段發出?
    onLaunch?
    那麼是不是需要在onLoad階段去獲取這個身份的信息然後給出不同的頁面?
    這樣一下子就會出現進階邀請函的第三個問題,而且還不僅僅是這一個問題,之後我們會講到。
    所以這個地方需要做一個專門的邀請加載頁面去處理這個事情。

  2. 分離出一個單獨的加載頁面之後,其實我們的工作會變的簡單清晰起來。
    因為我們只需要去做我們這個頁面所需要做的事情就行了。
    根據參數去獲取我們現在的身份,然後以這種身份跳轉到相應的頁面。

  3. 這裏還涉及到一個問題,那就是正常啟動而不是通過通知消息進入的時候,也需要去請求服務端獲取身份信息。
    我給的建議是一定要另外單獨建一個頁面去承載這個功能,而不要將這兩個加載頁面糅合到一起。
    裏面的頁面展示我們可以用組件化的方式去做,但是頁面的邏輯一點更要分開。
    因為這兩種情況真的很容易混雜,也是為了利於後面的維護工作。

  4. 正常啟動時的加載頁面也可以看情況糅合到首頁的onLoad裏面。
    但是如果有可能,還是希望放在單獨的頁面里。
    首頁往往功能很多,代碼量比較大,不要將本來可以分離出去的功能放進去。
    還是那句話,頁面的職責分開。


我這裏講的其實還是一個比較常見的功能,通常我們的業務也不一定像上面這樣簡單。


所以如果涉及到這方面的操作,在需求分析和設計的時候就應該考慮清楚。


如果等到功能開發的時候再去考慮這些事情,那麼等待你的一定是延期或者加班。


退出重進指定頁面(啟動小程序后,退出小程序,從小程序的分享卡片或者微信發送的通知消息進入小程序)


這種場景同樣是第四種場景的進階,但是如果你在第四種場景中使用了我所說的加載頁面,那麼接下來的問題會簡單很多。


這一場景下,首先我們需要明白髮生了什麼:


再次進入小程序 => 進入退出小程序時所在頁面A 不觸發onShow => 觸發頁面A onHide => 觸發頁面A onUnload => 進入邀請加載頁面onLoad => 加載頁面onShow

對於第四種場景中的打車小程序而言,如果按照我們先前所說沒有在onLaunch中獲取身份信息,而是放在了加載頁中,那麼現在什麼都不用改。


如果獲取身份信息的請求放在onLaunch中,現在又得在onLoad中加一道邏輯。


當然這裏還是得注意一個問題,對於這一類型的進入小程序的方式,比如從分享卡片進入和微信的通知消息進入。


即使他們所進入的頁面不同,但是他們都可以使用這個載入頁面去做判斷。


與正常啟動場景的載入頁面是不同的,他們本來就是同一種入口場景。


所以該共用的地方還是得共用,用不同的業務code判斷即可。


總結


總的來說,以上的幾種情況應該能涵蓋絕大多數小程序的入口場景。


整理的目的其實主要是為了做需求分析和設計時參考使用,以避免在考慮業務問題時漏過這些場景導致後期的工作計劃受到影響。


所謂加班和項目延期發布,大都是前期需求分析和設計考慮不周。


我們不可能考慮到所有的場景,但是應該盡善盡美。


謀定而後動,前事不忘後事之師,也算是PDCA了。

【精選推薦文章】



智慧手機時代的來臨,RWD網頁設計已成為網頁設計推薦首選



想知道網站建置、網站改版該如何進行嗎?將由專業工程師為您規劃客製化網頁設計及後台網頁設計



帶您來看台北網站建置台北網頁設計,各種案例分享



廣告預算用在刀口上,網站設計公司幫您達到更多曝光效益



Orignal From: 微信小程序入口場景的問題整理與相關解決方案

留言

這個網誌中的熱門文章

Python 併發總結,多線程,多進程,異步IO

1 測量函數運行時間 import time def profile(func): def wrapper(*args, ** kwargs): import time start = time.time() func( *args, ** kwargs) end = time.time() print ' COST: {} ' .format(end - start) return wrapper @profile def fib(n): if n<= 2 : return 1 return fib(n-1) + fib(n-2 ) fib( 35 )   2 啟動多個線程,並等待完成   2.1 使用threading.enumerate() import threading for i in range(2 ): t = threading.Thread(target=fib, args=(35 ,)) t.start() main_thread = threading.currentThread() for t in threading.enumerate(): if t is main_thread: continue t.join()   2.2 先保存啟動的線程 threads = [] for i in range(5 ): t = Thread(target=foo, args= (i,)) threads.append(t) t.start() for t in threads: t.join()   3 使用信號量,限制同時能有幾個線程訪問臨界區 from threading import Semaphore import time sema = Semaphor...

高雄十大包子名店出爐

, 圖文:吳恩文 高雄包子大賽落幕了,我只能就我個人意見, 介紹一下前十名這些包子,但是不能代表其他四位評審的意見,雖然身為評審長,我通常不會第一個表示意見,以免影響其他評審, 我主要工作是負責發問。   這次參賽的素包子很少,而且都不夠細致,又偏油,我不愛, 但是第一名的甜芝麻包-熔岩黑金包,竟然是素食得名- 漢來蔬食巨蛋店。   這包子賣相太好,竹炭粉的黑色外皮刷上金粉,一上桌,眾人驚呼, 搶拍照,內餡是芝麻餡,混一點花生醬增稠,加入白糖芝麻油, 熔岩爆漿的程度剛剛好,我一直以為芝麻要配豬油才行、 但是選到好的黑芝麻油一樣不減香醇, 當下有二位評審就想宅配回家。   尤其特別的是,黑芝麻餡室溫易化,師傅必須要輪班躲在冷藏室內, 穿著大外套才能包,一天包不了多少,我笑說,漢來美食,集團餐廳那麼多,實力雄厚,根本是「 奧運選手報名參加村裡運動會」嘛,其他都是小包子店啊, 但是沒辦法,顯然大家都覺得它好看又好吃, 目前限定漢來蔬食高雄巨蛋店,二顆88元,可以冷凍宅配, 但是要排一陣子,因為供不應求,聽說,四月份, 台北sogo店開始會賣。   第二名的包子,左營寬來順早餐店,顯然平易近人的多,一顆肉包, 十塊錢,是所有參賽者中最便宜的,當然,個頭也小, 它的包子皮明顯和其他不同,灰灰的老麵,薄但紮實有嚼勁, 肉餡新鮮帶汁,因為打了些水,味道極其簡單,就是蔥薑,塩, 香油,薑味尤其明顯,是老眷村的味道, 而特別的是老闆娘是台灣本省人, 當年完全是依據眷村老兵的口味一步一步調整而來,沒有加什麼糖、 五香粉,胡椒粉,油蔥酥。就是蔥薑豬肉和老麵香,能得名, 應該是它的平實無華,鮮美簡單,打動人心。   這是標準的心靈美食,可以撫慰人心,得名之前,寛來順已經天天排隊,現在,恐怕要排更久了, 建議大家六七點早點上門。   第三名,「專十一」很神奇,我記得比賽最後, 大家連吃了幾家不能引起共鳴的包子,有些累,到了專十一, 就坐著等包子,其他評審一吃,就催我趕快試,我一吃, 也醒了大半。   它的包子皮厚薄適中,但是高筋麵粉高些,老麵加一點點酵母, 我心中,它的皮屬一屬二,至於餡又多又好吃,蛋黃還是切丁拌入, 不是整顆放,吃起來「美味、均衡、飽滿」。一顆二十元。   老闆是陸軍專科十一期畢業取名專十一,...

韋伯連續劇終於更新 期待第一季順利完結

  地球天文學界的跳票大王詹姆斯·韋伯空間望遠鏡 (James Webb Space Telescope,縮寫為 JWST)自 1996 年以來斷斷續續不按劇本演出的連續劇終於讓焦慮的觀眾們又等到了一次更新:五層遮陽罩測試順利完成。 裝配完成的韋伯望遠鏡與好夥伴遮陽罩同框啦。Credit: NASA   嚴格的測試是任何空間任務順利成功的重中之重。遮陽罩,這個韋伯望遠鏡異常重要的親密夥伴,要是無法正常運轉的話,韋伯的這一季天文界連續劇說不準就要一直拖更了。   詹姆斯·韋伯空間望遠鏡是歷史上造出的最先進的空間望遠鏡。它不僅是一架紅外望遠鏡,還具有特別高的靈敏度。但想要達到辣么高的靈敏度來研究系外行星和遙遠的宇宙童年,韋伯童鞋必須非常"冷靜",體溫升高的話,靈敏度會大大折損。這個時候,遮陽罩就要大顯身手啦。   遮陽罩在韋伯的設計中至關重要。韋伯望遠鏡會被發射到拉格朗日 L2 點,運行軌道很高,遠離太陽、地球與月球。太陽是韋伯的主要熱量干擾的來源,其次是地球與月球。遮陽罩會有效阻斷來自這三大熱源的能量並保護韋伯維持在工作溫度正常運轉。這個工作溫度指的是零下 220 攝氏度(-370 華氏度;50 開爾文)。 上圖中我們可以看出,韋伯望遠鏡的配置大致可分為兩部分:紅色較熱的一面溫度為 85 攝氏度,藍色較冷的一面溫度達到零下 233 攝氏度。紅色的這部分中,儀器包括太陽能板、通信設備、計算機、以及轉向裝置。藍色部分的主要裝置包括鏡面、探測器、濾光片等。Credit: STSci.   遮陽罩的那一部分和望遠鏡的鏡面這部分可以產生非常極端的溫差。遮陽的這面溫度可以達到 110 攝氏度,足以煮熟雞蛋,而背陰處的部分溫度極低,足以凍結氧氣。   工程師們剛剛完成了五層遮陽罩的測試,按照韋伯在 L2 時的運行狀態安裝了遮陽罩。L2 距離地球約 160 萬公里。NASA 表示這些測試使用了航天器的自帶系統來展開遮陽罩,測試目前都已成功完成。韋伯望遠鏡遮陽罩負責人 James Cooper 介紹說這是遮陽罩"第一次在望遠鏡系統的电子設備的控制下展開。儘管這個任務非常艱巨,難度高,但測試順利完成,遮陽罩展開時的狀態非常驚艷"。   遮陽罩由五層 Kapton 製成。Kapton 是一種聚酰亞胺薄膜材料, 耐高溫絕...