小程序：登录页获取用户信息并传递用户数据到个人中心页

科技前沿 • 2025-03-22 14:53 • 阅读 54

大家好，我是讯享网，很高兴认识大家。

步骤一：个人中心页添加“立即登录”按钮跳转至登录页
一、个人中心页的me.wxml代码

 <view class="userinfo"> <button wx:if="{ 
  
    
  {!hasUserInfo && canIUse}}" bindtap="bindUserLogin"> 立即登录 </button> <block wx:else open-type="getUserInfo"> <image bindtap="bindViewTap" class="userinfo-avatar" src="{ 
  
    
  {userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{ 
  
    
  {userInfo.nickName}}</text> </block> </view>

讯享网

分析

属性bindtap="bindUserLogin"实现从个人中心跳转到登陆页
wx:if和wx:else判断个人中心页是否获取到用户信息，如果有用户信息，显示<block>标签内的内容，否则显示<button>按钮

个人中心页me.wxss代码

讯享网

讯享网.userinfo { width: 100%; display: flex; flex-direction: column; align-items: center; } .userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; } .userinfo-nickname { color: #aaa; } .usermotto { width: 100%; margin-top: 200rpx; }

个人中心页me.js代码

const app = getApp() Page({ data: { motto: '', userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo') }, // 事件处理函数：跳转到登陆页 bindUserLogin:function() { wx.navigateTo({ url: '../login/login', }) }, onLoad: function () { }, // onShow中的代码作用：在登陆页获取到用户新消息后，个人中西页进行判断，有用户信息就把信息添加到<block>对应的位置，没有用户信息就不显示 onShow:function() { if (app.globalData.userInfo) { this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else if (this.data.canIUse) { app.userInfoReadyCallback = res => { this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } } else { wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) } } })

步骤二：登录页获取用户信息并返回个人中心页
登录页loginwxml代码

讯享网<button class='wx-login' open-type="getUserInfo" bindgetuserinfo="getUserInfo">微信授权一键登录</button> 分析 1. bindgetuserinfo="getUserInfo" 对应获取用户信息的方法 2. open-type="getUserInfo" 没有这个属性，无法弹出授权弹窗 3. 点击“立即授权一键登录”，会调用getUserInfo方法

当前页login.js代码

const app = getApp() Page({ data: { motto: '发布', // 初始化用户信息：userInfo hasUserInfo userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo') }, onLoad: function () { }, // 点击“点击授权一键登录，调用getUserInfo获取用户信息” getUserInfo: function (e) { app.globalData.userInfo = e.detail.userInfo this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) // 获取到用户信息后，调用wx.navigateBack()返回上一页，即个人中心页，wx.navigateBack()一定要在这个位置： wx.navigateBack() } })

小程序：登录页获取用户信息并传递用户数据到个人中心页

相关推荐