加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

微信小程序登录授权 并解决app.js中的onLaunch中的数据 在page的

发布时间:2020-12-14 19:51:54 所属栏目:资源 来源:网络整理
导读:首先理一下授权登录的顺序 1.用户进入小程序有一个默认页面 在这个默认页面的onLoade中设置一个只有点击授权才能得到的数据2.当用户打开小程序进入默认页面 如果获取不到这个数据就跳转到登陆页面3.登录页面只有点击授权登录之后才会生成这个数据 并跳转到首

首先理一下授权登录的顺序 1.用户进入小程序有一个默认页面 在这个默认页面的onLoade中设置一个只有点击授权才能得到的数据 2.当用户打开小程序进入默认页面 如果获取不到这个数据就跳转到登陆页面 3.登录页面只有点击授权登录之后才会生成这个数据 并跳转到首页 如:

 wx.getStorage({
      key: 'success',success: function (res) {
  },fail: function (res) {
    wx.redirectTo({
      url: '../login/login',})
  },complete: function (res) {
  },})

在点击授权登录的页面设置点击授权之后 给一个success在storge中 如

bindGetUserInfo: function (e) {
    if (e.detail.userInfo) {
      wx.setStorage({
        key: 'success',data: '1',})
      // var timestamp = Date.parse(new Date())
      // var expiration = timestamp + 30000
      // wx.setStorageSync('index_data',res.data.data)
      // wx.setStorageSync('index_data_expiration',expiration)
    app.onLaunch()
      //用户按了允许授权按钮
      let that = this;
      wx.switchTab({
        url: '../homepage/homepage'
      })
    } else {
      //用户按了拒绝按钮
      wx.showModal({
        title: '警告',content: '您点击了拒绝授权,将无法进入小程序,请授权之后再进入!!!',showCancel: false,confirmText: '返回授权',success: function (res) {
          if (res.confirm) {
            console.log('用户点击了“返回授权”')
          }
        }
      })
    }
  },

再来看app.js中的代码 app.js中设置了登录的请求 并接收到微信小程序传递过来的个人信息

 wx.getSetting({
          success: res => {
            console.log(res)
            if (res.authSetting['scope.userInfo']) {
              // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
              wx.getUserInfo({
                lang:"zh_CN",success: res => {
                  // 可以将 res 发送给后台解码出 unionId
                  console.log(res)
                  this.globalData.userInfo = res.userInfo
                  console.log(this.globalData.urls)
                  wx.request({
                    url: this.globalData.urls + "/api/login/get_openid",method: "POST",header: {
                      "content-type": "application/x-www-form-urlencoded",'content-type': 'application/json' // 默认值
                    },data: {
                      code: code,nickname: this.globalData.userInfo.nickName,gender: this.globalData.userInfo.gender,avatarUrl: this.globalData.userInfo.avatarUrl,city: this.globalData.userInfo.city
                    },success: res => {
                      console.log(res)
                      wx.setStorage({
                        key: 'token',data: res.data.data.token
                      })
                      this.globalData.account = res.data.data.account
                      this.globalData.token = res.data.data.token
                      const account = res.data.data.account
                      if (this.employIdCallback) {
                        this.employIdCallback(account);
                      }
                      //在res中返回的有account token
                      //  that.globalData.openid = res.data.openid
                      console.log(this.globalData.account,this.globalData.token)
                    }
                  })
              // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })      
  }
})  

},onShow: function() {
// this.globalData.scence = wx.getStorageSync('scence')
// if (this.globalData.scence) {
// wx.switchTab({
// url: 'pages/homepage/homepage',// success: function(res) {
// console.log(res)
// },// fail: function(err) {
// console.log(err)
// }
// })
// }
},onHide: function() {
this.globalData.scence = 1
wx.setStorageSync('scence',this.globalData.scence)
},globalData: {
account: '',stroge: 0,openid: 0,userInfo: null,times: null,urls: 'https://wx.knowdao.com',urlst: 'http://test.knowdao.com',token: ''
}
})

在page页面的onLoade函数中开始调用回调函数获取app.js中设置的全局变量的数据

 const that = this
    if (app.globalData.account && app.globalData.account != ''){
      wx.request({
        url: app.globalData.urls + "/api/follow/list",//仅为示例,并非真实的接口地址
        method: "POST",header: {
          account: app.globalData.account,token: app.globalData.token,"content-type": "application/x-www-form-urlencoded",'content-type': 'application/json' // 默认值
        },success: function (res) {
          if (res.data.status == 200) {
            that.setData({
              focusman: res.data.data
            })
            console.log(that.data.focusman)
          } else {
            console.log('error');
            return false;
          }
        }
      })
    } else {
      const account = app.globalData.account
      // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.employIdCallback = account => {
        if (account != '') {
          wx.request({
            url: app.globalData.urls + "/api/follow/list",//仅为示例,并非真实的接口地址
            method: "POST",header: {
              "content-type": "application/x-www-form-urlencoded",'content-type': 'application/json',// 默认值
              account: app.globalData.account,},success: function (res) {
              console.log(res)
              console.log(that)
              if (res.data.status == 200) {
                that.setData({
                  focusman: res.data.data,})
                console.log(that.data.focusman)
              } else {
                console.log('error');
                return false;
              }
            }
          })
        }
      }

上述全部代码总结起来就是 在 先在onLunch里面 获取到用户信息 并获取到token 和 account 然后 放在全局变量中 但是由于异步的关系和网络的问题很有可能在页面的onlound里面获取不到全局变量中的token和account 这时候就要用到回调了 在这里面用的回调就是 首先在onlound里面写 if(获取到了account和token){正常执行代码} else if(如果咩有获取到就设置个函数重新获取登录的用户信息和token 在这个页面) 然后在onlunch里面判断有没有这个函数有的话把res传过去 res里面包含account 和token 然后在onlound里面判断res传过来的token是不是为空 如果为空就重新发起请求重新获取

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读