//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
}
})
微信小程序开发登录模块代码
于 2023-05-22 17:42:33 首次发布