Wechat applet onLaunch onLoad onShow asynchronous

Keywords: Mobile

The onLaunch in App is triggered when the widget is initialized, and onLoad or onShow in Page is executed later, but the onLoad or onShow event in Page is executed when the user logs in onLaunch and the onLoad or onShow event in Page is executed while waiting for the return value.

Original code segment
app.js code slice.

  globalData = {
    userInfo: null,
    token:''
  }
  onLaunch() {
    this.$interceptors = {
      request: {
        config(p) {
          p.url = 'http://test.xxx.com/api' + p.url
          if(this.globalData.token && this.globalData.token != ''){
             p.header = {
              token: this.globalData.token
            };
          }
          return p;
        },
        success(rst) {
          return rst;
        }
      }
    };
    this.login();
  }
    login() {
    const self = this;
    wx.login({
      success(data) {
        wepy.request({
          url: '/user/login?code='+data.code,
          success: function(res) {
              wx.setStorageSync('userInfo', res.data.obj);
              self.globalData.token=res.data.obj.token ;  
          }
    });
  }

index.js snippet

  onShow(){
      let self = this
     wx.request({
       url: '/message/get-count',
       success: function(res) {
         if (res.data.obj.count != 0) {
           self.msgimg = '../img/msg.png';
           self.msgshow = 'block';
           self.msgnum = res.data.obj.count;
         } else {
           self.msgimg = '../img/nomsg.png';
           self.msgshow = 'none';
         }
         self.$apply();
       }
     });
   }

Solution

The method adopted here is to define a callback function on the page page, and then to execute the callback function after onLaunch's request. It is important to note that the page page page determines whether the current globalData.token is worth it and then requests the business interface.

The App page has a page page-defined callback method when it judges the success of the request, and if so, it executes the method. Because the callback function is defined in the Page, the method scope this refers to the Page page.
The index.js code slice of callback function is defined.

    onShowCall(){
    let self = this
     wx.request({
        url: '/message/get-count',
        success: function(res) {
          if (res.data.obj.count != 0) {
            self.msgimg = '../img/msg.png';
            self.msgshow = 'block';
            self.msgnum = res.data.obj.count;
          } else {
            self.msgimg = '../img/nomsg.png';
            self.msgshow = 'none';
          }
          self.$apply();
        }
      });
  }
    onShow(){
      var token = this.$parent.globalData.token
        console.log("token:"+token);
        if( token == ''){
          getApp().loginCallback = res => {
            this.onShowCall()
        };
        }else{
          this.onShowCall()
        }
    }

app.js snippet with callback function

globalData = {
    userInfo: null,
    token:''
  }
  onLaunch() {
    this.$interceptors = {
      request: {
        config(p) {
          p.url = 'http://test.xxx.com/api' + p.url
          if(this.globalData.token && this.globalData.token != ''){
             p.header = {
              token: this.globalData.token
            };
          }
          return p;
        },
        success(rst) {
          return rst;
        }
      }
    };
    this.login();
  }
    login() {
    const self = this;
    wx.login({
      success(data) {
        wepy.request({
          url: '/user/login?code='+data.code,
          success: function(res) {
              wx.setStorageSync('userInfo', res.data.obj);
              self.globalData.token=res.data.obj.token ; 
               //Callback functions are called here
               if (getApp().loginCallback) {
               getApp().loginCallback(res.data.obj.token);
              }  
          }
    });
  }

In this way, we can achieve the desired results. The order of execution is:

 [App] onLaunch -> [Page] onLoad -> [App] onLaunch sucess callback

Posted by Nathaniel on Tue, 29 Jan 2019 14:33:15 -0800