微信小程序开发登录模块代码

翳翳清欢

已于 2023-05-22 17:45:54 修改

阅读量1.3k

点赞数

文章标签：微信小程序小程序

于 2023-05-22 17:42:33 首次发布

本文链接：https://blog.csdn.net/weixin_57935767/article/details/130811839

版权

该代码段展示了如何在微信小程序中处理用户授权登录和退出功能。当用户信息不存在时，显示授权登录按钮；否则，显示用户头像、昵称及退出登录按钮。用户登录成功后，信息被存储在本地缓存中，退出时清除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//wxml


<button wx:if="{{!userInfo}}" bindtap="login">授权登录</button>
<view wx:else class="root">
  <view>
    111
  </view>
  <!-- <image class="touxiang" src="{{userInfo.avatarUrl}}"></image>
  <text class="nicheng">{{userInfo.nickName}}</text>
  <button bindtap="loginOut">退出登录</button> -->
  
</view>


//wxss

.root{
  display: flex;
  flex-direction: column;
  align-items:center;
}
.touxiang{
  width:200rpx;
  height:200rpx;
  border-radius:50%;
  margin-top:30rpx;
  margin-bottom:10rpx;
}

//js

// index.js
// 获取应用实例
const app = getApp()
// })
Page({
  data:{
  //用户信息开始为空
     userInfo:''
  },
  onLoad(){
      //获取本地缓存
      let user=wx.getStorageSync('user')
      console.log("进入小程序的index页面获取缓存",user)
      this.setData({
          userInfo:user
      })
  },
  //授权登录
  login(){
      wx.getUserProfile({
          desc:'必须授权后才能继续使用',
          success:res=>{
              let user=res.userInfo
              //设置本地缓存,把用户信息缓存到本地
              wx.setStorageSync('user',user)
              console.log('用户信息',user)
              this.setData({
                  userInfo:user
              })
          }
      })
  },
  //退出登录
  loginOut(){
      this.setData({
          userInfo:''
      })
      wx.setStorageSync('user',null)
  }
})


//json

{
  "usingComponents": {}
}






//app.js

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})