微信小程序首頁數(shù)據(jù)初始化失敗的解決方法
一、 問題描述
用戶首次后再次進入小程序時,我們通常需要通過獲取用戶openid或unionid用作唯一標示與后臺進行數(shù)據(jù)交流,初始化用戶信息。當我們通過第三方服務(wù)器跟微信建立請求時,微信需要用戶確認是否公開信息。如圖1,從console可以看到,在請求的同時,我們的首頁index已經(jīng)加載完成,圖中初始化數(shù)據(jù)顯示為空。無論我們將請求信息寫在app.js的onload中或者index.js中,當我們點擊確認后,請求信息才執(zhí)行success方法,將第三方服務(wù)器返回的數(shù)據(jù)處理,這樣的因需要用戶點擊而產(chǎn)生的滯后性,我們很難要求程序停下來等我們。那么,我們可以通過其他途徑,來達到讓程序“停下來”的錯覺,下面容我來介紹一下我的解決方法。
圖1
二、 解決方法的最基本要求
我們想要的解決方法的最基本要求有如下兩點:
1) 當我們進入主頁,數(shù)據(jù)完成了初始化,并正常顯示
2) 當用戶首次進入程序,只需確認確認公開信息,即可正常進入主頁
三、 解決方法
我的解決方法是:通過設(shè)計一個“臨時加載頁”來達到我們想要的效果,這個臨時加載頁類似于Android的歡迎界面,但當數(shù)據(jù)加載完成,或者我在第二次進入時,將自動跳轉(zhuǎn)到我們的主頁。下面是設(shè)計代碼部分。
步驟一:首先我們在app.json中,創(chuàng)建一個新的page,命名為welcome
"pages/welcome/welcome"
注意該page要放置在首頁,也就是程序進來第一個頁面
步驟二:我們在welcome.js中,將具體請求操作寫入到onload中
// pages/welcome/welcome.js Page({ data:{}, onLoad:function(options){ // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù) var that = getApp() try { //首先檢查緩存中是否有我們需要請求的數(shù)據(jù),如果沒有,我們再跟服務(wù)器連接,獲取數(shù)據(jù) //首次登陸肯定是沒有的 that.globalData.userInfo = wx.getStorageSync('userInfo') if(wx.getStorageSync('userInfo')!=''){ //如果緩存不為空,即已經(jīng)存在數(shù)據(jù),我們不用再跟服務(wù)器交互了,那么直接跳轉(zhuǎn)到首頁 wx.switchTab({ url: '../index/index', }) } if (value) { // Do something with return value console.log(that.globalData.userInfo) } } catch(e){ // Do something when catch error //當try中的緩存數(shù)據(jù)不存在時,將跳到這步,這步中,我們將與服務(wù)器進行連接,并獲取數(shù)據(jù) if(that.globalData.userInfo == ''){ wx.login({ success: function(res) { //獲取用戶code,轉(zhuǎn)發(fā)到我們的服務(wù)器,再在我們服務(wù)器與微信交互,獲取openid var code = res.code wx.getUserInfo({ success: function(userInfo) { var encryptedData = userInfo.encryptedData var iv = userInfo.iv //我們服務(wù)器請求地址 var url = that.apiHost + 'index/login' var userinfo = userInfo.userInfo var username = userinfo.nickName var useravatar =userinfo.avatarUrl var usersex=userinfo.gender wx.request({ url: url, method: 'POST', data: { 'code': code, 'username':username, 'useravatar':useravatar, 'usersex':usersex }, header: { "Content-Type": "application/x-www-form-urlencoded" }, success:function(response) { //數(shù)據(jù)交互成功后,我們將服務(wù)器返回的數(shù)據(jù)寫入全局變量與緩存中 console.log(response.data) //寫入全局變量 that.globalData.userInfo = response.data wx.hideToast() //寫入緩存 wx.setStorage({ key: 'userInfo', data: that.globalData.userInfo, success: function(res){ console.log("insert success") }, fail: function() { // fail }, complete: function() { // complete } }) //寫入后,我們將跳轉(zhuǎn)到主頁 wx.switchTab({ url: '../index/index', }) }, failure: function(error) { console.log(error) }, }) } }) } })} } }, onReady:function(){ // 頁面渲染完成 }, onShow:function(){ // 頁面顯示 }, onHide:function(){ // 頁面隱藏 }, onUnload:function(){ // 頁面關(guān)閉 }, redirect:function(){ wx.switchTab({ url: '../index/index', }) } })
可看到,我們在首次登陸時,將進入我們的歡迎界面,當用戶確認公開信息后,頁面將自動跳轉(zhuǎn)到首頁,首頁數(shù)據(jù)正常顯示
在第二次進入時,跳轉(zhuǎn)在onload中就進行了,界面還沒渲染就跳轉(zhuǎn)了,所以速度很快,親測跳轉(zhuǎn)還算滿意,但終究還是繞個彎來做一件事,大家若有更好的方法,也請分享分享,謝謝!
以上所述是小編給大家介紹的微信小程序首頁數(shù)據(jù)初始化失敗的解決方法,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!
相關(guān)文章
Android開發(fā)之自帶下載器DownloadManager的使用示例代碼
本篇文章主要介紹了Android開發(fā)之自帶下載器DownloadManager的使用示例代碼,Android自帶的DownloadManager是一個很好的下載文件的工具,有興趣的可以了解一下。2017-03-03Android編程實現(xiàn)3D旋轉(zhuǎn)效果實例
這篇文章主要介紹了Android編程實現(xiàn)3D旋轉(zhuǎn)效果的方法,基于Android的Camera類實現(xiàn)坐標變換達到圖片3D旋轉(zhuǎn)效果,需要的朋友可以參考下2016-01-01Android編程實現(xiàn)AlertDialog自定義彈出對話框的方法示例
這篇文章主要介紹了Android編程實現(xiàn)AlertDialog自定義彈出對話框的方法,結(jié)合實例形式分析了Android AlertDialog自定義彈出對話框的基本功能與事件監(jiān)聽實現(xiàn)技巧,需要的朋友可以參考下2017-07-07Android中實現(xiàn)多行、水平滾動的分頁的Gridview實例源碼
如果單行水平滾動,可以用Horizontalscrollview實現(xiàn)。如果是多行水平滾動,則結(jié)合Gridview(一般是垂直滾動的)和Horizontalscrollview實現(xiàn)2013-06-06Android Studio 自定義Debug變量視圖的方法
這篇文章主要介紹了Android Studio 自定義Debug變量視圖的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07Android WebView實現(xiàn)網(wǎng)頁滾動截圖
這篇文章主要為大家詳細介紹了Android WebView實現(xiàn)網(wǎng)頁滾動截圖,對整個網(wǎng)頁進行截屏,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-05-05