实现微信小程序登录

登录功能简介

通过点击登录按钮，调用微信接口wx.getUserProfile拿到微信的个人信息，先检查是否之前已经登录，若没登录则将拿到的个人信息调用后台的接口，把个人信息传给后台，登录成功之后把相关信息存储在app.globalData中共享给全局使用 (这里使用微信云开发作为后台，提前建一个login_users数据表)

界面展示

代码展示

wxml:

<view class="warp">
  <image class="face" src="{{userInfo.avatarUrl}}" alt=""/>
  <view class="nickName">{{userInfo.nickName}}</view>
</view>



<view>
  <button bindtap="login" disabled="{{show}}">登录</button>
</view>

wxss:

.face {
  width: 150rpx;
  height: 150rpx ;
  border-radius: 50%;
}
.nickName {
  margin-top: 30rpx;
}
.warp {
  text-align: center;
}

js:

// 全局存储，方便随时调用
const app = getApp()

Page({
  data: {
    userInfo:[]，
    show:false //展示登录按钮
  },
  onLoad: function() {     
  },
  login() { 
    var that = this
    wx.getUserProfile({
      desc: '完善信息',  // 提示信息
      success(res){
        var user = res.userInfo
        app.globalData.userInfo = user   //把user里面的数据放在globalData里面使全页面可以调用
        that.setData({
          userInfo:user，
          show:true //隐藏登录按钮

        })
        //云开发用以下方式 java 或者 php 做的数据表 我们要传则需要用request
        //需要检查是否之前已经授权登录了
        wx.cloud.database().collection('login_users').where({
          _openid: app.globalData.openid
        }).get({
          success(){
            console.log(res);
            if (condition) {
              wx.cloud.database().collection('login_users').add({
                data:{
                  avatarUel:user.avatarUrl,
                  nickName: user.nickName
                },
                success(res){
                  wx.showToast({
                    title: '登录成功',
                    duration: 1000,
                    mask: true,
                  })
                }
              })
            }else{
              this.setData({
                userInfo:res.data[0]
              })
            }
          }

        })
      }
    })
  }
})