小程序开发之解决第一次加载页面获取不到openid的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_37936542/article/details/80480998

记录:小程序开发过程中,index.wxml加载时需要使用用户信息,之前wx.login是写在app.js的onLaunch函数中,通过后台获取到openid后存储到本地缓存中,之后在index.js中获取openid老是出现第一次取值为空,第二次再打开就有值的情况。原代码如下:

app.js:

onLaunch: function () {
    var that = this 
    wx.login({
      success: function (res) {
        //code 获取用户信息的凭证
        if (res.code) {
          //请求获取用户详细信息
          wx.request({
            url: "https://pig.intmote.com/wxApp/user/getOpenid.do",
            data: { "code": res.code },
            method: 'GET',
            header: {
              'Content-type': 'application/json'
            },
            success: function (res) {
              //保存openid
              wx.setStorageSync('openid', res.data.openid);//存储openid
              wx.showToast({ title: "登录成功" })
            }
          });
        } else {
          wx.showToast({ title: "登录失败" })
        }
      }
    }) 
   },

index.js

onLoad: function () {
    var that = this;  
    wx.showToast({ title: wx.getStorageSync('openid') });  
    that.setData({
      openid: wx.getStorageSync('openid')
    })
  },

出现这种情况是因为app.js onLaunch是异步加载,在加载index.js onLoad的时候还没有取到openid


解决方案

使用promise来获取异步操作的消息。


Promise简介

Promise 是异步编程的一种解决方案,所谓Promise ,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise是一个对象,从它可以获取异步操作的消息。

promise基本用法如下:

const promist = new Promise(function(resolve,reject){
    if(/*异步操作成功*/){
        resolve(value);
    }else{
        reject(error);
    }
})

resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”,在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;

reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”,在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。


Promise 实例生成以后,可以用then 方法分别指定resolved状态和rejected状态的回调函数。

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


小程序代码实现:

1.app.js中定义getOpenid函数,并使用promise生成实例

getOpenid: function () {
    var that = this;
    return new Promise(function (resolve, reject) {
      wx.login({
        success: function (res) {
          //code 获取用户信息的凭证
          if (res.code) {
            //请求获取用户openid
            wx.request({
              url: "https://pig.intmote.com/wxApp/user/getOpenid.do",
              data: { "code": res.code },
              method: 'GET',
              header: {
                'Content-type': 'application/json'
              },
              success: function (res) {
                wx.setStorageSync('openid', res.data.openid);//存储openid
                var res = {
                  status: 200,
                  data: res.data.openid
                }
                resolve(res);
              }
            });
          } else {
            console.log('获取用户登录态失败!' + res.errMsg)
            reject('error');  
          }
        }
      })
    });
  }, 

2.index.js通过promise的then方法取出openid

//获取应用实例
const app = getApp()
Page({
  data: {
    openid : '',
  }, 
  onLoad: function () {
    var that = this;  
    app.getOpenid().then(function (res) {
      if (res.status == 200) {
        that.setData({
          openid: wx.getStorageSync('openid')
        })
      } else {
        console.log(res.data);
      }
    }); 
  },
})


参考文章:点击打开链接




展开阅读全文

没有更多推荐了,返回首页