實(shí)現(xiàn)微信小程序登錄

登錄功能簡介

通過點(diǎn)擊登錄按鈕，調(diào)用微信接口wx.getUserProfile拿到微信的個(gè)人信息，先檢查是否之前已經(jīng)登錄，若沒登錄則將拿到的個(gè)人信息調(diào)用后臺的接口，把個(gè)人信息傳給后臺，登錄成功之后把相關(guān)信息存儲在app.globalData中共享給全局使用 (這里使用微信云開發(fā)作為后臺，提前建一個(gè)login_users數(shù)據(jù)表)

界面展示

代碼展示

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:文章來源地址http://www.zghlxwxcb.cn/news/detail-507350.html

// 全局存儲，方便隨時(shí)調(diào)用
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里面的數(shù)據(jù)放在globalData里面使全頁面可以調(diào)用
        that.setData({
          userInfo:user，
          show:true //隱藏登錄按鈕

        })
        //云開發(fā)用以下方式 java 或者 php 做的數(shù)據(jù)表 我們要傳則需要用request
        //需要檢查是否之前已經(jīng)授權(quán)登錄了
        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]
              })
            }
          }

        })
      }
    })
  }
})

到了這里，關(guān)于【微信小程序】實(shí)現(xiàn)微信小程序登錄(附源碼)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！