微信小程序首頁數(shù)據(jù)初始化失敗的解決方法

更新時(shí)間：2017年01月08日 14:03:48 作者：zhilonng

這篇文章主要介紹了微信小程序首頁數(shù)據(jù)初始化失敗的解決方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

一、問題描述

用戶首次后再次進(jìn)入小程序時(shí)，我們通常需要通過獲取用戶openid或unionid用作唯一標(biāo)示與后臺進(jìn)行數(shù)據(jù)交流，初始化用戶信息。當(dāng)我們通過第三方服務(wù)器跟微信建立請求時(shí)，微信需要用戶確認(rèn)是否公開信息。如圖1，從console可以看到，在請求的同時(shí)，我們的首頁index已經(jīng)加載完成，圖中初始化數(shù)據(jù)顯示為空。無論我們將請求信息寫在app.js的onload中或者index.js中，當(dāng)我們點(diǎn)擊確認(rèn)后，請求信息才執(zhí)行success方法，將第三方服務(wù)器返回的數(shù)據(jù)處理，這樣的因需要用戶點(diǎn)擊而產(chǎn)生的滯后性，我們很難要求程序停下來等我們。那么，我們可以通過其他途徑，來達(dá)到讓程序“停下來”的錯(cuò)覺，下面容我來介紹一下我的解決方法。

這里寫圖片描述

圖1

二、解決方法的最基本要求

我們想要的解決方法的最基本要求有如下兩點(diǎn)：

1）當(dāng)我們進(jìn)入主頁，數(shù)據(jù)完成了初始化，并正常顯示

2）當(dāng)用戶首次進(jìn)入程序，只需確認(rèn)確認(rèn)公開信息，即可正常進(jìn)入主頁

三、解決方法

我的解決方法是：通過設(shè)計(jì)一個(gè)“臨時(shí)加載頁”來達(dá)到我們想要的效果，這個(gè)臨時(shí)加載頁類似于Android的歡迎界面，但當(dāng)數(shù)據(jù)加載完成，或者我在第二次進(jìn)入時(shí)，將自動跳轉(zhuǎn)到我們的主頁。下面是設(shè)計(jì)代碼部分。

步驟一：首先我們在app.json中，創(chuàng)建一個(gè)新的page，命名為welcome

"pages/welcome/welcome"

注意該page要放置在首頁，也就是程序進(jìn)來第一個(gè)頁面

步驟二：我們在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ù)不存在時(shí)，將跳到這步，這步中，我們將與服務(wù)器進(jìn)行連接，并獲取數(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',
 })
 }
})

可看到，我們在首次登陸時(shí)，將進(jìn)入我們的歡迎界面，當(dāng)用戶確認(rèn)公開信息后，頁面將自動跳轉(zhuǎn)到首頁，首頁數(shù)據(jù)正常顯示