跳到主要內容

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

前言


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


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


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


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


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



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

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

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

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

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


啟動小程序並進入


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


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


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


下載小程序 => 啟動小程序 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: 微信小程序入口場景的問題整理與相關解決方案

留言

這個網誌中的熱門文章

強強聯手!攜手打造雲林縣Web3.0 領地方品牌進軍元宇宙

中華電信攜手國內最大Potato Media Web3.0社群共享平台,及品牌醫生果俐文創三方結合,透過經濟部「CBMP智慧雲遊跨域串連計畫」,協助品牌數位轉型,帶動品牌體驗情境、新商業模組升級與行動支付應用,第一站選在雲林縣當地原生消費品牌,打造社群消費循環,探索近期最夯的元宇宙新玩法。 Potato Media執行長顏宏霖表示,在CBMP計畫協助下,加上站內Web3.0資源,將快速協助雲林縣當地品牌升級轉型,幫助店家創造品牌價值,包含黑矸仔醬油、四代目麥芽酥、玉津烘焙坊、禪屋米胖工坊、YuDS沐耳飲、莫蒂精品巧克力、維野納複合式餐飲、頂雲咖啡、媽祖埔豆腐張、玉山碾米廠等,另外嘉義市麥麵、名香茗茶也等不及跨縣市加入,結合Potato Media站內活動,打造雲林專屬限定NFT道具與頭框,發行雲林扭蛋,體驗全新元宇宙新世界。 左起雲林縣計畫處處長李明岳、果俐文創執行長-陳郁涵、雲林縣議員周秀月、中華電信雲林營運處總經理張肇家、Potato Media執行長顏宏霖、LINE禮物代表睿鼎數位、12CMTaiwan行銷總監楊涵柔。(圖/由Potato Media提供) 此次Potato Media平台合作內容是店家會員註冊活動:首次註冊可得100積分 + 一顆扭蛋,店家推薦文章介紹,可領取店家消費優惠券,站內扭蛋禮物抽獎活動,獎項豐富:雲林限定禮品、雲林意象限定NFT道具與頭框,雲林幣扭一下APP政令大聲公獎勵活動,另外各種雲林美食伴手禮、住宿旅遊的店家,都可以使用行動支付或上LINE禮物平台實際體驗消費。 推薦評價好的 iphone維修 中心 擁有專業的維修技術團隊,同時聘請資深iphone手機維修專家,現場說明手機問題,快速修理,沒修好不收錢 產品缺大量曝光嗎?你需要的是一流 包裝設計 窩窩觸角包含自媒體、自有平台及其他國家營銷業務等,多角化經營並具有國際觀的永續理念。 雲林縣副縣長謝淑亞強調,此次計畫和Potato Media 合作,Potato Media 是一個在 2021 年 4 月正式發布的「區塊鏈 Web3.0 共享社群平台」,創作者和使用者都可以透過互動的機制,例如對文章點讚、留言與轉發分享,來獲取相對應比例的加密貨幣CFO(Potato Media 平台上的原生加密貨幣),跟Facebook、Instagram、YouTu...

要上網站行銷農產品,得經過市政府抽驗農藥殘留,檢驗合格才能上網行銷

台北網站設計      網頁設計公司     網站設計公司 食安五環為「源頭控管」、「重建生產管理履歷」、「提高查驗能力」、「加重生產者、廠商的責任」及「鼓勵、創造監督平臺」五大要環,除推動政府與市民消費者共同監督食品安全,更要從農場到餐桌,鏈結農村產業線,以網路社群為媒介,建立嘉義市農村網頁平台。活動現場介紹「農抵嘉」產銷網頁平台的內容,包含在地人文地產景,將景觀、產業、生態及文化等資訊整合、展現,更推廣在地農村農友優質、安全的農產品。要上「農抵嘉」網站行銷農產品,得經過市政府抽驗農藥殘留,檢驗合格才能上網行銷自己的農產品,嘉義市農友可以多利用,也提供店家採購管道。 「尚安心,農抵嘉」,透過「農抵嘉」產銷網頁平台,鏈結農村產業線並促進地產地消,從源頭管理食安,讓政府管理、民間參與,透過食安小教育,讓小朋友接觸農作物,與生產者互動,產生共鳴,一同攜手維護嘉義市的食安。記者會中也展示紅瓦厝社區所做的紅瓦窯烤,並有其他下埤花生等農產品,透過農場職人使「農特產品不只是農產品」,民眾可登入「農抵嘉」網頁http://chiayirural.com/index.asp瞭解更進一步的訊息。 網動廣告 參考資料:蕃新聞https://n.yam.com/Article/20171226529712 Orignal From: 要上網站行銷農產品,得經過市政府抽驗農藥殘留,檢驗合格才能上網行銷

IEA:疫情衝擊能源需求 但再生能源呈創紀錄成長_台中搬家公司

※ 台中搬家公司 教你幾個打包小技巧,輕鬆整理裝箱! 還在煩惱搬家費用要多少哪?台中大展搬家線上試算搬家費用,從此不再擔心「物品怎麼計費」、「多少車才能裝完」 摘錄自2020年11月10日中央社報導 國際能源總署(IEA)報告今天(10日)指出,武漢肺炎(COVID-19)疫情可能衝擊能源需求,但電力部門再生能源繼續以創紀錄速度成長。 IEA執行董事比羅爾(Fatih Birol)表示:「在2025年,再生能源將成為全球最大發電來源,預計將提供1/3的全球電力,終結煤炭50年來作為最大電力供應來源的地位。」 ※推薦 台中搬家公司 優質服務,可到府估價 台中搬鋼琴,台中金庫搬運,中部廢棄物處理,南投縣搬家公司,好幫手搬家,西屯區搬家 IEA關於再生能源的年度報告估計,儘管受到疫情干擾,今年的再生能源新發電容量可望創紀錄,達將近200GW(GW為十億瓦)。 能源轉型 國際新聞 再生能源 疫情看氣候與能源 本站聲明:網站內容來源環境資訊中心https://e-info.org.tw/,如有侵權,請聯繫我們,我們將及時處理 ※ 台中搬家公司 教你幾個打包小技巧,輕鬆整理裝箱! 還在煩惱搬家費用要多少哪?台中大展搬家線上試算搬家費用,從此不再擔心「物品怎麼計費」、「多少車才能裝完」 Orignal From: IEA:疫情衝擊能源需求 但再生能源呈創紀錄成長_台中搬家公司