小程序授權登錄


需求:打開頁面,判斷用戶是否登錄,未登錄的話,自定義彈框提醒用戶登錄,已登錄的話,展示用戶信息

1: wxml 里面 自定義彈框

<view class="login" wx:if="{{!hasUserInfoStatus}}" catchtouchmove='true'>
    <view class="mask"></view>
    <view class="d-login-popup">
      <text class='d-login-popup-text'>微信手機號授權</text>
      <image class='d-login-popup-img' src='../../../../assets/images/d_login_img.png'></image>
      <text class='d-login-popup-text'>允許登錄優藍招聘</text>
      <button class='cancel' bindtap='cancelUserinfo'>取消</button>
      <button class='sure' open-type="getUserInfo" bindgetuserinfo="getUserInfo">允許</button>
    </view>
  </view>

2: data 里面   hasUserInfoStatus 變量 表示是否顯示自定義彈框

data: {
    hasUserInfoStatus: true,
}

3: onshow 里面判斷用戶是否登錄。已登錄,自定義彈框隱藏。未登錄,自定義彈框顯示,用戶通過點擊按鈕,去觸發 授權彈框顯示

onShow() {
    wx.login({
      success: res => {
        console.log('login', res)
        this.getInfo(res.code);
      }
    });
  }, 
  getInfo: function (code) {
    let _self = this;
    wx.request({
      url: api + '/api/miniProgramController/decodeUserInfo?code=' + code,
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        let openid = res.data.openid
        let unionid = res.data.unionid
        _self.setData({
          openId: openid
        })
        app.globalData.openId = openid
        app.globalData.unionId = unionid
        wx.request({
          url: api + '/rest/v1/wxLogin/isLogin/' + openid,
          data: {},
          header: {
            'content-type': 'application/json'
          },
          method: 'POST',
          success: function (suc) {
            if (suc.data.success == true) { // 已登錄
              app.globalData.hasUserInfoStatus = true;
              _self.setData({
                hasUserInfoStatus: true
              })
              if (suc.data.data !== '') {
                app.globalData.ylUserId = suc.data.data
              }
              _self.getComInfo()
            } else { // 未登錄
              app.globalData.hasUserInfoStatus = false;
              _self.setData({
                hasUserInfoStatus: false
              })
              app.globalData.ylUserId = ''
            }
          }
        })
      }
    })
  },

4: 自定義彈框顯示,用戶點擊 允許 按鈕,觸發 getUserInfo 函數, 點擊 取消 按鈕,觸發 cancelUserinfo 函數  

getUserInfo: function () { 
    let _self = this;
    wx.getSetting({ // 獲取用戶已經授權的權限
      success(res) {
        console.log(res)
        if (res.authSetting['scope.userInfo']) { // 點擊了 ‘允許’按鈕
          // 已經授權,可以直接調用 getUserInfo 獲取頭像昵稱
          wx.getUserInfo({
            success: function (res) { }
          })
          wx.navigateTo({
            url: '/pages/newLogin/newLogin?formUser=true' // 跳轉到新頁面
          })
        } else { // 點擊了 ‘拒絕’按鈕
          wx.switchTab({
            url: '/pages/index/index',
          })
        }
      }
    })
  },
  cancelUserinfo(){ 
    wx.switchTab({
      url: '/pages/index/index', // 跳轉到首頁
    })
  },


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM