1. 程式人生 > >解決微信小程式 app onLaunch非同步請求,在沒有請求執行完就載入首頁了的問題

解決微信小程式 app onLaunch非同步請求,在沒有請求執行完就載入首頁了的問題

 今天在除錯小程式的過程中,進了一個坑,程式載入需要先獲取使用者資訊,然後儲存到Storage中,然後首頁去

Storage取資訊,根據使用者資訊去查本地伺服器資料列表,可是發現第一次進入的時候,資料總是載入不出來,只有再次進入才有資料。除錯之後發現app.js onLaunch並沒有先於onLoad 執行完再執行,而是onLoad先執行完,所以第一次進入的時候根本沒有Storage,追了下原因是因為wx.login是需要使用者授權登入,同時非同步載入首頁,所以就出現這問題,解決辦法

1、加一個啟動頁,獲取成功後,然後再跳轉首頁;

2、使用promise,判斷程序狀態,在index中去判斷程序狀態,再去執行頁面的載入。

解釋下Promise:

var promise = new Promise(function(resolve, reject) {
 if (/* 非同步操作成功 */){
 resolve(value);
 } else {
 reject(error);
 }
});

promise.then(function(value) {
 // success
}, function(value) {
 // failure
});

       Promise 建構函式接受一個函式作為引數,該函式的兩個引數分別是 resolve 方法和 reject 方法。

       如果非同步操作成功,則用 resolve 方法將 Promise 物件的狀態,從「未完成」變為「成功」(即從 pending 變為 resolved);

       如果非同步操作失敗,則用 reject 方法將 Promise 物件的狀態,從「未完成」變為「失敗」(即從 pending 變為 rejected)。

貼一下APP.js程式碼:

//app.js
var http = require('service/http.js')
App({
  onLaunch: function() {
    //呼叫API從本地快取中獲取資料
    // var that = this;
  },
  getAuthKey: function () {
    var that = this;
    return new Promise(function (resolve, reject) {
        // 呼叫登入介面
        wx.login({
          success: function (res) {
            if (res.code) {
              that.globalData.code = res.code;
              //呼叫登入介面
              wx.getUserInfo({
                withCredentials: true,
                success: function (res) {
                  that.globalData.UserRes = res;
                  that.globalData.userInfo = res.userInfo;
                  that.func.postReq('/api/v1/image/oauth', {
                    code: that.globalData.code,
                    signature: that.globalData.UserRes.signature,
                    encryptedData: that.globalData.UserRes.encryptedData,
                    rawData: that.globalData.UserRes.rawData,
                    iv: that.globalData.UserRes.iv
                  }, function (res) {
                    wx.setStorage({
                      key: "auth_key",
                      data: res.data.auth_key
                    })
                    var res = {
                      status: 200,
                      data: res.data.auth_key
                    }
                    resolve(res);
                    
                  })
                }
              })
            } else {
              console.log('獲取使用者登入態失敗!' + res.errMsg);
              var res = {
                status: 300,
                data: '錯誤'
              }
              reject('error');
            }  
          }
        })
    });
  },
})
//index.js
  onLoad: function () {
    app.getAuthKey().then(function (res) {
      console.log(res);
      if (res.status == 200){
        var auth_key = res.data;
        app.func.req('/api/v1/image/theme-list', {
          page: 1,
          auth_key: auth_key
        }, function (res) {
          var page = that.data.pageValue + 1;
          that.setData({
            images: res.data,
            pageValue: page
          });
        });
      }else{
        console.log(res.data);
      }
    });

相關推薦

解決程式 app onLaunch非同步請求沒有請求執行載入的問題

 今天在除錯小程式的過程中,進了一個坑,程式載入需要先獲取使用者資訊,然後儲存到Storage中,然後首頁去Storage取資訊,根據使用者資訊去查本地伺服器資料列表,可是發現第一次進入的時候,資料總是載入不出來,只有再次進入才有資料。除錯之後發現app.js onLaunc

解決程式自定義彈窗滑動自定義彈窗底部的頁面也一起跟著滑動的問題

解決方案,我總結了以下幾種 1、控制底部根目錄scroll-view 的scroll-y屬性的true/false,控制底部滾動以及不滾動 2、在自定義彈框最外層元素加上catchtouchmove=’true’ ;或者catchtouchmove="preventTouchMove"

解決程式使用wxcharts在螢幕不固定問題-開發工具裡也顯示好佈局為啥到真機就是亂的

解決微信小程式使用wxcharts在螢幕不固定問題-開發工具裡也顯示好了佈局,為啥到真機就是亂的 .chart{ width: 100%; text-align: center; } .canvas{ /* position: absolute; top: 10%; */ width: 100%; heig

程式 | app.json配置屬性

    app.json 檔案用來對微信小程式進行全域性配置,決定頁面檔案的路徑、視窗表現、設定網路超時時間、設定多 tab 等。 widows: 用於設定小程式的狀態列、導航條、標題、視窗背景色。 navigationBarBackgroundColor 導航條背景顏色可用 十六

解決 程式獲取使用者資訊時彈框不顯示的問題

在開發中碰到使用者點選按鈕獲取使用者資訊時,彈框出不來的情況 wxml: <button class='btn' bindgetuserinfo="loginClick" open-type="getUserInfo">請授權</button> js: l

解決程式防止無法回到主頁的問題

【小程式】提交訂單頁面到訂單詳情頁面,如何防止無法回到主頁 問題場景: 小程式某個頁面完成後,希望跳轉到另一個相關頁面。 比如,訂單提交完成後,希望跳轉到訂單詳情頁面,可選的方案有兩個 前端精品教程:百度網盤下載 A 使用 wx.navigateTo 跳轉到非 tabBar 頁面 優點是

解決程式登入與釋出的一些問題

解決微信小程式的問題 圖片在電腦上顯示但在手機上卻無法顯示的問題 要使用的是本地圖片,不想把圖片上傳到網路再通過https的方式解決,解決方法如下: 1.image src中的圖片地址對英文字母大小寫敏感,必須確認大小寫對得上; 2.圖片大小問題。本地圖片要小於10KB才能順利在真機上顯示。 為什麼

解決程式、mpvue、vue 關於 wx:for、v-for 迴圈次數的問題

微信小程式:wx:if="{{index<5}}" <view wx:for="{{dataArray}}" wx:key="index" wx:for-item="item" wx:if="{{index<5}}"></view>   mp

解決程式disabled屬性不生效”的問題!

微信小程式中帶disabled屬性的表單元件有(點選可以進入官方文件): button,checkbox,input,picker,radio,slider,switch,textarea   如果是固定禁用元件的話,直接放上disabled就好,簡單粗暴,如: <!

程式退出或隱藏後內嵌的web-view的音訊沒有停止的幾種解決辦法

1.嘗試下通過h5的pagehide事件 2.小程式改變web-view src的hash值,網頁端監聽hashchange來處理 這均需要在h5去修改程式碼。 3.使用wx.pauseVoice() 4.注意的地方 wx.pauseVoice()介面主要用來實現暫停正在播放的語音。需要注意的是當再

如何解決程式介面適配問題-引用-生命週期回撥函式-優化機制-樣式引入

如何解決微信小程式介面適配問題 .wxss page{ height: 100%; width:750rpx; } this.setData({ imageWidth: wx.getSystemInfoSync().windowWidth }) rpx(res

解決程式的wx-charts外掛tab切換時的顯示會出現位置移動問題-tab切換時圖表顯示錯亂-實現滑動tab

解決Echarts在微信小程式tab切換時的顯示會出現位置移動問題 我的js var dateTimePicker = require('../../utils/dateTimePicker.js'); var wxCharts = require('../../utils/wx

程式——App.json

①app.json是對當前小程式的全域性配置,它包括了小程式的所有頁面路徑、介面表現、網路超時時間、底部tab等。 ②App配置項列表 屬性 型別 pages String Array window Ojbect neyworkTimeo

程式」PHP非同步程序async-helper例項詳解

PHP非同步程序async-helper例項詳解 PHP 的非同步程序助手,藉助於 AMQP 實現非同步執行 PHP 的方法,將一些很耗時、追求高可用、需要重試機制的操作放到非同步程序中去執行,將你的 HTTP 服務從繁重的業務邏輯中解脫出來。以一個較低的成本將傳統 PHP 業務邏輯轉換成非阻塞、高可用、可

程式App()方法與getApp()方法

App() 註冊一個小程式 小程式的入口方法 //app.js App({ onLaunch: function(options) { console.log("onLaunch"); }, onShow: function(options) { consol

程式開發詳解(七)---程式APP生命週期

1:微信小程式APP的生命週期方法: 在微信小程式工程中的app.js中增加如圖1所示方法 圖1 編譯執行,檢視日誌如圖2,圖3所示:微信小程式啟動時,呼叫生命週期方法為:onLaunch方法(app.js)---onShow方法(app.js)---onLoad方法(首

程式:處理非同步問題和promise物件的使用淺析

        微信小程式為了提高使用者的體驗,請求皆為非同步請求。但是在某些場景下,前面的請求回來的資料,有可能作為後面請求的基礎,或者請求提交的資料內容,就會出現銜接不上問題。例如獲取使用者的資訊的API:wx.getUserInfo(),就必須在登入狀態下,即先要呼叫w

解決程式switchTab後tab不重新整理

轉自:http://blog.csdn.net/defender_/article/details/54315085 據說這個BUG以後解決,先提供現在的解決辦法 [javascript] view plain copy <span style

解決程式要求的TLS版本必須大於等於1.2的問題(windows伺服器)

1、在伺服器中新建文字文件,複製貼上下面程式碼: Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProv

程式APP(商超營銷類)經驗總結

專案介紹 這是一款主打門店營銷的小程式。包括首頁、門店、營銷、個人設定、登入、資料統計展示、營銷設定等。 本來要獨立完成整個專案,包括前後端一套的,有些意外因素,專案臨時收尾(說明:只完成了前端的部分,後端未完成)。 管理大師們說過:一個好的專案,必須有一個好的收尾,好的收尾,就一定要有好的經驗總結。 於是乎