微信小程序用户登录流程思路

由于微信官方不允许在刚进入小程序的时候，弹出用户登陆页面，需要在进入小程序后，用户主动点击才能进入登陆页面。此时，将会给小程序开发者在设计用户登陆页面时，带来一定的麻烦。现将我的微信小程序用户登陆的基本思路和流程记录下。

小程序入口页面设计思路

首先需要判断用户是否已经授权，需要从下面两个方面来判断。
1、用户已授权登录
此时，在用户登陆页面中，可以考虑将用户的信息存放在全局变量globalData.userInfo中。在进入小程序时，通过判断globalData.userInfo是否为空，来判断用户是否已经登录。
2、用户之前已登录
在用户登陆页面中已成功授权登录后，将用户的信息写入数据库中。进入小程序时，通过判断是否可以从数据库中获取用户的信息来判断用户之前是否已经登录。
3、用户之前未授权登录
直接进入登陆页面

登陆页面设计思路

进入登陆页面意味着用户之前未授权小程序获取用户信息，此时需要弹出获取用户信息弹窗。
如果用户点击确认，则将用户的信息存放在全局变量globalData.userInfo，并写入数据库中。
如果用户点击取消，则弹出相关提示

主要代码

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>申请获取以下权限</view>
			<text>获得你的公开信息(昵称，头像等)</text>
		</view>

		<button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
			授权登录
		</button>
	</view>
	<view wx:else>请升级微信版本</view>
</view>

login_wx.js

/**
   * 页面的初始数据
   */
  data: {
    //判断小程序的API，回调，参数，组件等是否在当前版本可用。
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    openid: '',
    userInfo: '',
    // 判断是否前期已经授权
    isShow: true,
    // 判断用户进入小程序的方式，是否是通过扫描海报上的二维码进入
    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({
      // 需调用的云函数名
      name: 'login_wx',
      data:{
        userInfo: app.globalData.userInfo
      },
      // 成功回调
      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) {
      //授权成功后，跳转进入小程序首页
      that.setData({
        userInfo: e.detail.userInfo,
        isShow: false
      })
      that.switchTabToMine(e.detail.userInfo)
      
    } else {
      //用户按了拒绝按钮
      wx.showModal({
        title: '警告',
        content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
        showCancel: false,
        confirmText: '返回授权',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击了“返回授权”')
            // wx.navigateBack({
            // })
          }
        }
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
 >: function (options) {
    var that = this;
    // 查看是否授权
    wx.getSetting({
      success: function (res) {
        // 如果用户已授权
        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页面进入mine页面
    var isLogin = !(userInfo == '')
    console.log('getUserInfo', isLogin)
    if (isLogin == true) {
      that.setData({
        isLogin: true,
        avatar: userInfo.avatarUrl,
        nickname: userInfo.nickName,
      })

    } else {
      // 从数据库中获取用户信息，用户之前已经登录，登录信息已存储在数据库中
      wx.cloud.callFunction({
        // 需调用的云函数名
        name: 'getUserAllInfo',
        // 成功回调
        success: function (res) {
          // console.log('getUserAllInfo --- ', res.result.userInfo)
          // 如果数据库中有该用户数据，则将数据存储
          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,
            })
          }
        }
      })
    }
  },