小程序获取用户昵称登录(wx.getUserProfile)低于2.27.1版本的访问

最新推荐文章于 2024-09-18 16:24:30 发布

青青子衿越

最新推荐文章于 2024-09-18 16:24:30 发布

阅读量354

点赞数

文章标签：小程序前端 javascript

本文链接：https://blog.csdn.net/qq_46376192/article/details/129276446

版权

这篇文章展示了在微信开发者工具中使用WXML和JavaScript处理用户登录和信息展示的过程。当用户信息存在时，显示头像和昵称并提供退出登录选项；否则，提供获取用户信息的按钮。在用户授权后，代码会存储用户信息并调用登录接口。退出登录时，会清除本地存储的信息并重定向到首页。

摘要由CSDN通过智能技术生成

微信开发者工具中使用

home.wxml

<view class="box">
<view class="top" wx:if="{{userInfo.avatarUrl}}">
  <image src="{{userInfo.avatarUrl}}"></image>
<view class="name">{{userInfo.nickName}}</view>
<button bindtap="outLogin">退出登录</button>
</view>
<view class="login" wx:else><button type="primary" bindtap="getUser">获取用户信息</button></view>
</view>

home.js

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userInfo: {}
  },
  getUser() {
    // 获取用户信息
    wx.getUserProfile({
      desc: 'desc',
      success: (res) => {
        this.setData({
          userInfo: res.userInfo
        });
        // 将获取到的信息存储到Storage
        wx.setStorage({
          key: 'info',
          data: res.userInfo
        });
        // 登录
        this.login()
      }
    });

  },
  login() {
    wx.login({
      success: (res) => {
        // 获取码之后发起网络请求
        if (res.code) {
          //发起网络请求
          wx.request({
            url: 'https://api.weixin.qq.com/sns/jscode2session',
            data: {
              js_code: res.code,
              secret: '57993283b09d259209867a1b5c49ef1d',
              appid: 'wx8e599842ea889b19'
            },
            success: (res) => {
              console.log(res);
            }
          })
        } else {
          console.log('登录失败！' + res.errMsg)
        }

      },
    })
  },
  // 退出登录
  outLogin() {
    wx.removeStorage({
      key: 'info',
      success(res) {
        wx.navigateTo({
          url: '/pages/home/home',
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 讲storge中的值存储到data的userInfo中
    wx.getStorage({
      key: 'info',
      success: (res) => {
        // console.log(res)
        this.setData({
          userInfo: res.data
        })
      }
    })
  },


})