微信小程序------登录

      接触微信小程序,一个多月了,总体来说还是比较简单的,能用到的方法和组件,接口等微信都给提供。而且不用处理那个恶心的兼容问题,但小程序还有许多坑,下面就提一下排坑之路。

     小程序登录:

        我的登录思路,wx.login -> 拿到code -> 用code做参数请求后台,返回openId  -> 拿到openId获取用户的用户名和头像在后台做注册,返回一个用户的唯一标识accessToken -> 在其他页面就可以拿accessToken去请求数据渲染页面。

wx.login({
      success: res => {
        //console.log(res.code)
        //发送 res.code 到后台换取 openId, sessionKey, unionId
        if(res.code){
              wx.request({
                url: getApp().globalData.server+"user/getOpenId.htm",
                method: 'POST',
                header : {
                  'content-type': 'application/x-www-form-urlencoded'
                },
                data:{code:res.code},
                success: function(res) {
                  var openid = res.data.data.openId
                  that.globalData.openId = openid
                  wx.setStorage({
                    key: "openId",
                    data: openid
                  })
                }
              })
            }
      }      
    })

    

// 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo
              //console.log(res)
              // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
              wx.getStorage({
                key: 'openId',
                success: function (res) {
                  var openId = res.data
                  wx.getUserInfo({
                    success: function (res) {
                      wx.request({
                        url: getApp().globalData.server+"user/wechatLogin.htm",
                        method: 'POST',
                        header: {
                          'content-type': 'application/x-www-form-urlencoded'
                        },
                        data: { openid: openId, nickName: res.userInfo.nickName, avatarUrl: res.userInfo.avatarUrl },
                        success: function (res) {
                          wx.setStorage({
                            key: "accessToken",
                            data: res.data.data.accessToken
                          })
                        }
                      })
                    },
                    fail: function () {
                      wx.redirectTo({
                        url: '../login/login'
                      })
                    }
                  })
                }
              })
            }
          })
        }
      }
    })

        因为用户可能首次进入会有拒绝访问用户信息,这就增加了另一种可能性,而且做开发的时候wx.getUserInfo开发版不会弹窗,测试的时候就非常困难,就在index里面做了守卫,如果到用户注册过的话,就直接到首页,如果用户拒绝了获取用户信息,就直接跳到登录页面,里面有按钮可以直接在次获取弹窗。

wx.getStorage({
      key: 'accessToken',
      success: function (res) {
        that.getUserDataFn();
      },
      fail: function () {
        wx.redirectTo({
          url: '../login/login'
        })
      }
    })


 

猜你喜欢

转载自blog.csdn.net/hlyphard/article/details/80895267