微信小程序用戶登錄流程思路

由于微信官方不允許在剛進(jìn)入小程序的時候，彈出用戶登陸頁面，需要在進(jìn)入小程序后，用戶主動點擊才能進(jìn)入登陸頁面。此時，將會給小程序開發(fā)者在設(shè)計用戶登陸頁面時，帶來一定的麻煩?，F(xiàn)將我的微信小程序用戶登陸的基本思路和流程記錄下。

小程序入口頁面設(shè)計思路

首先需要判斷用戶是否已經(jīng)授權(quán)，需要從下面兩個方面來判斷。
1、用戶已授權(quán)登錄
此時，在用戶登陸頁面中，可以考慮將用戶的信息存放在全局變量globalData.userInfo中。在進(jìn)入小程序時，通過判斷globalData.userInfo是否為空，來判斷用戶是否已經(jīng)登錄。
2、用戶之前已登錄
在用戶登陸頁面中已成功授權(quán)登錄后，將用戶的信息寫入數(shù)據(jù)庫中。進(jìn)入小程序時，通過判斷是否可以從數(shù)據(jù)庫中獲取用戶的信息來判斷用戶之前是否已經(jīng)登錄。
3、用戶之前未授權(quán)登錄
直接進(jìn)入登陸頁面

登陸頁面設(shè)計思路

進(jìn)入登陸頁面意味著用戶之前未授權(quán)小程序獲取用戶信息，此時需要彈出獲取用戶信息彈窗。
如果用戶點擊確認(rèn)，則將用戶的信息存放在全局變量globalData.userInfo，并寫入數(shù)據(jù)庫中。
如果用戶點擊取消，則彈出相關(guān)提示

主要代碼

login_wx.xml

<view wx:if="{{isShow}}">
	<view wx:if="{{canIUse}}">
		<view class='header'>
			<image src='/images/wx_login.jpg'></image>
		</view>

		<view class='content'>
			<view>申請獲取以下權(quán)限</view>
			<text>獲得你的公開信息(昵稱，頭像等)</text>
		</view>

		<button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
			授權(quán)登錄
		</button>
	</view>
	<view wx:else>請升級微信版本</view>
</view>

login_wx.js

/**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    //判斷小程序的API，回調(diào)，參數(shù)，組件等是否在當(dāng)前版本可用。
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    openid: '',
    userInfo: '',
    // 判斷是否前期已經(jīng)授權(quán)
    isShow: true,
    // 判斷用戶進(jìn)入小程序的方式，是否是通過掃描海報上的二維碼進(jìn)入
    isFromCode: false
  },
  switchTabToMine: function (userInfo) {
    var that = this
    app.globalData.userInfo = userInfo
    that.uploadUserInfoToCloud()
    wx.navigateBack({
      
    })
  },
  uploadUserInfoToCloud: function () {
    // var userInfo = app.globalData.userInfo
    // console.log(userInfo)
    wx.cloud.callFunction({
      // 需調(diào)用的云函數(shù)名
      name: 'login_wx',
      data:{
        userInfo: app.globalData.userInfo
      },
      // 成功回調(diào)
      success: function (res) {
        console.log('uploadUserInfoToCloud --- ',res.result.openid, res.result.userInfo)
        app.globalData.openid = res.result.openid
        app.globalData.userAllInfo = res.result.userInfo
        // app.globalData.userInfo = res.result.userInfo.userInfo
      }
    })
  },
  bindGetUserInfo: function (e) {
    var that = this
    if (e.detail.userInfo) {
      //授權(quán)成功后，跳轉(zhuǎn)進(jìn)入小程序首頁
      that.setData({
        userInfo: e.detail.userInfo,
        isShow: false
      })
      that.switchTabToMine(e.detail.userInfo)
      
    } else {
      //用戶按了拒絕按鈕
      wx.showModal({
        title: '警告',
        content: '您點擊了拒絕授權(quán)，將無法進(jìn)入小程序，請授權(quán)之后再進(jìn)入!!!',
        showCancel: false,
        confirmText: '返回授權(quán)',
        success: function (res) {
          if (res.confirm) {
            console.log('用戶點擊了“返回授權(quán)”')
            // wx.navigateBack({
            // })
          }
        }
      })
    }
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
 >: function (options) {
    var that = this;
    // 查看是否授權(quán)
    wx.getSetting({
      success: function (res) {
        // 如果用戶已授權(quán)
        if (res.authSetting['scope.userInfo']) {
          // console.log('------- login ')
          wx.getUserInfo({
            success: function (res) {
              that.setData({
                userInfo: res.userInfo,
                isShow: false
              })
              that.switchTabToMine(res.userInfo)
            }
          })

        } else {
          that.setData({
            isShow: true
          })
        }
      }
    })
  },

index.js主要代碼

// 獲取用戶信息
  getUserInfo: function () {
    var that = this
    var userInfo = app.globalData.userInfo
    // 判斷用戶是否通過login_wx頁面進(jìn)入mine頁面
    var isLogin = !(userInfo == '')
    console.log('getUserInfo', isLogin)
    if (isLogin == true) {
      that.setData({
        isLogin: true,
        avatar: userInfo.avatarUrl,
        nickname: userInfo.nickName,
      })

    } else {
      // 從數(shù)據(jù)庫中獲取用戶信息，用戶之前已經(jīng)登錄，登錄信息已存儲在數(shù)據(jù)庫中
      wx.cloud.callFunction({
        // 需調(diào)用的云函數(shù)名
        name: 'getUserAllInfo',
        // 成功回調(diào)
        success: function (res) {
          // console.log('getUserAllInfo --- ', res.result.userInfo)
          // 如果數(shù)據(jù)庫中有該用戶數(shù)據(jù)，則將數(shù)據(jù)存儲
          if (res.result.userInfo.data.length != 0) {
            app.globalData.userAllInfo = res.result.userInfo.data[0]
            app.globalData.userInfo = res.result.userInfo.data[0].userInfo
            var userInfo = app.globalData.userInfo
            // console.log('userInfo --- ', userInfo)
            that.setData({
              isLogin: true,
              avatar: userInfo.avatarUrl,
              nickname: userInfo.nickName,
            })
          }
        }
      })
    }
  },