微信小程序首頁數(shù)據(jù)初始化失敗的解決方法
一、 問題描述
用戶首次后再次進入小程序時,我們通常需要通過獲取用戶openid或unionid用作唯一標(biāo)示與后臺進行數(shù)據(jù)交流,初始化用戶信息。當(dāng)我們通過第三方服務(wù)器跟微信建立請求時,微信需要用戶確認(rèn)是否公開信息。如圖1,從console可以看到,在請求的同時,我們的首頁index已經(jīng)加載完成,圖中初始化數(shù)據(jù)顯示為空。無論我們將請求信息寫在app.js的onload中或者index.js中,當(dāng)我們點擊確認(rèn)后,請求信息才執(zhí)行success方法,將第三方服務(wù)器返回的數(shù)據(jù)處理,這樣的因需要用戶點擊而產(chǎn)生的滯后性,我們很難要求程序停下來等我們。那么,我們可以通過其他途徑,來達到讓程序“停下來”的錯覺,下面容我來介紹一下我的解決方法。
圖1
二、 解決方法的最基本要求
我們想要的解決方法的最基本要求有如下兩點:
1) 當(dāng)我們進入主頁,數(shù)據(jù)完成了初始化,并正常顯示
2) 當(dāng)用戶首次進入程序,只需確認(rèn)確認(rèn)公開信息,即可正常進入主頁
三、 解決方法
我的解決方法是:通過設(shè)計一個“臨時加載頁”來達到我們想要的效果,這個臨時加載頁類似于Android的歡迎界面,但當(dāng)數(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
//當(dāng)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',
})
}
})
可看到,我們在首次登陸時,將進入我們的歡迎界面,當(dāng)用戶確認(rèn)公開信息后,頁面將自動跳轉(zhuǎn)到首頁,首頁數(shù)據(jù)正常顯示

在第二次進入時,跳轉(zhuǎn)在onload中就進行了,界面還沒渲染就跳轉(zhuǎn)了,所以速度很快,親測跳轉(zhuǎn)還算滿意,但終究還是繞個彎來做一件事,大家若有更好的方法,也請分享分享,謝謝!
以上所述是小編給大家介紹的微信小程序首頁數(shù)據(jù)初始化失敗的解決方法,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!
相關(guān)文章
Flutter?Animation實現(xiàn)縮放和滑動動畫效果
這篇文章主要為大家詳細(xì)介紹了Flutter?Animation實現(xiàn)縮放和滑動動畫效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03
Android應(yīng)用開發(fā)的版本更新檢測升級功能實現(xiàn)示例
本文對Android版本更新的知識做全面的總結(jié),主要包括開發(fā)中版本的設(shè)置,如何檢測本程序的版本,版本的更新判斷和顯示,新版本程序的安裝2022-04-04
Android仿知乎懸浮功能按鈕FloatingActionButton效果
前段時間在看屬性動畫,恰巧這個按鈕的效果可以用屬性動畫實現(xiàn),下面通過本文給大家分享adroid仿知乎懸浮功能按鈕FloatingActionButton效果,需要的朋友參考下吧2017-04-04
Android自定義ViewGroup實現(xiàn)淘寶商品詳情頁
這篇文章主要為大家詳細(xì)介紹了Android自定義ViewGroup實現(xiàn)淘寶商品詳情頁,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-10-10
Android自定義控件實現(xiàn)帶文本與數(shù)字的圓形進度條
這篇文章主要為大家詳細(xì)介紹了Android自定義控件實現(xiàn)帶文本與數(shù)字的圓形進度條,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-12-12
android:descendantFocusability方法介紹
開發(fā)中很常見的一個問題,項目中的listview不僅僅是簡單的文字,常常需要自己定義listview,問題就出現(xiàn)了,可能會發(fā)生點擊每一個item的時候沒有反應(yīng),無法獲取的焦點2012-11-11

