微信小程序頁面加載完成前禁止操作或點其他頁面

2020-12-15 重慶網瀚科技

要實現這個方法是非常簡單的,找了好久,沒找到解決辦法。

有時候為了完成某些功能,需要在首頁執行一些操作或者接口調用。比如我這次要說的,我們需要在打開首頁的時候調用wxlogin或者code,用戶信息等。也就是登錄吧,然後調用接口把用戶信息入庫,並傳回自定義userid,方便後續的操作。

重點來了:

如果這時候不設置加載完頁面,或者還未拿到userid的情況下,用戶點其他頁面是沒有數據的,是不顯示的,這樣會導致很嚴重的問題,整個小程序都無法使用了。

這時候我們使用wx.showLoading,再配合setTimeout,就能輕鬆實現。

好了,我上代碼:

success: function (res) {

console.log(res.data),

that.setData({

cplist1: res.data

})

wx.showLoading({

title: 獲取產品信息,

mask: true

})

setTimeout(function () {

wx.hideLoading()

}, 1500)

}

就是說你在調用接口,成功的時候進行如下設置,就能輕鬆實現,在拿到必要參數之後才能進行其他操作,或者說點其他頁面了。希望對大家有所幫助。

重慶網瀚科技微信小程序開發,不定期提供微信小程序開發攻略,希望大家喜歡。

相關焦點

  • 微信小程序 頁面
    Page(Object object)註冊小程序中的一個頁面。
  • 頁面加載功能設計總結
    例如,微信中用戶點擊浮窗,文章頁面是擴展開來的。那麼我們可以腦洞一下,用戶雙指捏合的手勢是否可以關閉文章頁?這是用戶進入一個新頁面所經歷的幾個重要階段,如下圖所示,這裡我將其分成了4個階段。接下來我們從階段1開始梳理頁面加載過程的每一個步驟,力圖發掘可以優化的點。
  • 前端知識普及之頁面加載
    從微觀上分的話,頁面加載有兩部分一個是以DOMContentLoaded觸發為標誌的DOM樹的渲染完成一個是以輔助資源img,font加載完成為觸發標誌的onload事件他們兩個的具體區別就是"資源的加載"這個關鍵點.在獲得數據響應後,頁面開始解析,發生的過程為:(1) 解析HTML結構。
  • 一文了解頁面數據加載
    (3)頁面內事件觸發加載:用戶手動加載、系統自動加載用戶手動加載,一般通過下拉或者點擊操作刷新頁面,加載新數據;系統自動加載的方式一般為,當前內容已經展示完畢後隨即加載並刷新出新的內容。(4)定時數據刷新一些排行榜或者限時活動,需要在特定時間進行頁面刷新和數據加載。
  • 一招搞定微信小程序前端頁面設計
    全民家教歡迎頁效果圖小程序每個頁面組成由4個部分:.wxss和.wxml和.js以及.json其中.wxml(變種的html)和.wxss(變種的css樣式表),對於小程序前端開發至關重要。所以對於從web前端開發轉到小程序開發的人來說,這個接觸起來很容易。但是對於一些像我這樣半道出家,以前只會用DW或者可視化前端工具的人,css一知半解,自己想搞一個小程序前端頁面非常困難(在不使用別人源碼,自己手擼的前提下)。在我剛剛開發"全民家教"小程序的時候往往為了一個頁面,甚至一個組件的擺放都大費周折,往往弄到半夜才勉強可以實現。
  • 小程序頁面設計步驟:用模板做一個美觀的小程序
    小程序頁面設計涉及到哪些部分?下面就跟大家科普一下小程序頁面設計步驟:首先你需要找一個設計美觀的小程序模板,儘量找知名度較高的類型,比如「上線了」,模板設計感強,簡潔現代風,視覺效果很好。新手註冊帳號後選擇「創建小程序」,再選一個你喜歡的模板類型,這裡我以電商模板為例給大家示範下如何使用。
  • 微信小程序實戰篇-下拉刷新與加載更多
    哈嘍,大家好,看這標題是不是有點奇怪,你們期盼的微信小程序實戰篇-電商(三)沒出現,我是這麼想的,因為電商裡面的內容有很多,如何我只是以一二三那樣命名的話
  • 微信小程序學習(創建新頁面)
    我們學習完註冊小程序,添加新建的項目後,下面要創建一個簡單的頁面,設置標題,並從首頁跳轉到這個頁面,具體有以下幾個步驟:1、新建一個項目後,在pages 中添加一個目錄,選中page,右擊滑鼠,在彈出的菜單裡,選擇新建一個文件夾test,完成後如圖
  • 王者榮耀加載頁面卡住沒有進入對局怎麼辦
    王者榮耀加載頁面卡住沒有進入對局怎麼辦呢?想知道的小夥伴就和小編一起來看看吧!
  • Chrome 85 穩定版發布,頁面加載速度提升 10%
    此版本將頁面加載速度提高了 10%,並帶來了許多標籤頁方面的改進,以及提供了一系列開發者功能。可直接使用 Chrome 內置更新程序升級或從 Chrome 官網下載。頁面加載速度提升Chrome 85 帶來了 Profile Guided Optimization(PGO),這是一種編譯器優化技術,可使代碼中性能最關鍵的部分運行得更快。
  • 「精品」微信小程序開發(五)———頁面跳轉
    今天我給大家講一下如何進行頁面跳轉,要是連頁面跳轉都不會,還做什麼微信小程序啊,大家想想對不對,因為我們開發微信小程序不可能只開發一個頁面,我們得開發好幾個頁面,要是不能讓他們之間互相跳轉的話,那玩笑可就開大嘍!
  • 【技術】Hybird App中原生頁面 VS H5頁面
    原生頁面優勢:(1)運行速度比較快(2)能使用設備的底層功能,如攝像頭、方向傳感器、重力傳感器、撥號、GPS、語音、簡訊、藍牙等(3)在界面設計、功能模塊、操作邏輯等層面相較web更易做到App的便捷性和舒適性,功能更加強大
  • 徹底看懂微信小程序
    通過小程序發布的投票並且分享到群裡,可以實時看到前三名。會議助手:臨時召開緊急會議,需要相關人儘快確定參會情況,往群裡拋一個開會通知小程序,特定的人才能打開了解會議內容並確認,誰參加誰請假,參與人數多少一目了然。活動時間點到了,還可通過小程序的消息服務能力給參會人發送參會提醒;到了參會現場打開小程序就能籤到,真正意義上的需要用時就用,用完就走。
  • QQ音樂Android客戶端Web頁面通用性能優化實踐
    對 WebView 頁面加載周期來說:CSR 頁面需在前端頁面框架加載後再展示數據,內容請求完成並上屏,發生在頁面加載完成之後SSR 頁面的首次內容上屏可攜帶首屏數據,因此在頁面加載完成之前,頁面內容已經可以被消費
  • 微信小程序1萬字實操指南
    那趕緊打開餓了吧小程序,黃燜雞30元免運費,於是我發起了一個組團買,然後把這個頁面分享到公司群,小夥伴們點進去頁面選擇自己要的套餐,各自支付完成後,分別都收到了一條「付款成功,正在配送」的模板消息。因為小程序緩存到了本地,在二次打開的時候無需要再加載,但果真如此嗎?如果小程序開發者把很多圖片、文字等頁面元素都做成動態加載且不做緩存,那麼你每次打開小程序相當於……重新下載了一遍 app,跟原來的 H5是一樣的。但是原來 H5的頁面切換不流暢總是要加載,小程序不會啊,你怎麼能說小程序和 H5一樣呢?
  • UX辭典精譯 | 巧用這3種分頁模式,頁面加載不再生硬
    你可以簡單將它們理解為:-分頁,即多個頁面組合(想想那些在線商店程序);-無限滾動,讓用戶產生所有內容都加載好的感覺,但實際上,信息是在上下滑動時才加載出來的(想想Instagram);-加載更多按鈕,常出現在頁面底部,通過用戶點擊操作,出現更多信息(想想Google圖片)。
  • 小程序雲端解決方案,微信小程序及後臺交互架構
    4月 28日,騰訊雲舉辦的雲 +社區技術沙龍,以小程序開發實戰為基準點,圍繞小程序雲上解決方案,serverless後端架構,小遊戲底層設計和直播、電商小程序的開發實戰五大主題內容,分享最全面的微信小程序設計開發思路以及解決方案。本文整理了講師演講精彩內容.
  • 這四點,告訴你微信小程序設計規範
    你需要遵循這些小程序設計規範:1.友好禮貌小程序在設計時應該注意減少無關的設計元素對用戶目標的幹擾,禮貌地向用戶展示程序提供的服務,友好地引導用戶進行操作。這是一個基本的小程序規範。2.重點突出每個頁面都應有明確的重點,以便於用戶每進入一個新頁面的時候都能快速地理解頁面內容。在確定了重點的前提下,應儘量避免頁面上出現其它與用戶的決策和操作無關的幹擾因素。
  • APP loading頁面:淺析「先進入再loading」的交互方法
    兩種分類從順序上看,就是加載數據和進入頁面,哪個放在前面。下面我們具體的看一下這兩種分類。先loading再進入在一個頁面中點擊一個button或者一個入口時,app會先加載完下一個頁面的所有數據之後,再進行跳轉操作,下一個頁面的所有樣式布局、所有的數據,都是在加載完該頁面所有的模塊之後,才會跳轉並顯示出來。
  • 用戶多愛中午12點和晚上10點訪問頁面
    加載  加載超過5秒就會有74%的用戶離開頁面。  2、高峰期  中午12點左右和晚上10點左右是頁面訪問高峰期。  5、流失率  用戶隨著頁面層級的加深而不斷流失,流失率在前幾頁最高。