微信小程序-引导用户授权登录getUserProfile

vvvzh

墨衍会员 · AI 创作全网分发码龄9年

关注

VIP免费原创最新推荐文章于 2026-08-13 13:00:43 发布 3.2k 阅读 AI 写同款· GEO 优化 ›

【微信小程序】实现授权登入---超详细讲解 微信小程序实现授权登入阅读详情

摘要

引导用户授权登录，并将用户数据存入数据库，保存至本地缓存。登录成功跳转至小程序首页。

页面展示

在这里插入图片描述

wxml

<!-- 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息-->
 <button class="login-btn" wx:if="{
   
   {canIUseGetUserProfile}}"  bindtap="getUserProfile">开始旅程</button>
  <button class="login-btn"wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo">开始旅程</button>

js

//获取应用实例
const app = getApp();
Page({
   
   
  /**   
  * 页面的初始数据   
  * */  
  data: {
   
       
  	canIUseGetUserProfile: false,  //判断小程序的api是否能够在当前版本使用    
  },
//用户点击开始体验按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效
 onLoad: function (options) {
   
   
    if (wx.getUserProfile) {
   
   
      this.setData({
   
   
        canIUseGetUserProfile: true
      })
    }
  },
 getUserProfile(e) {
   
   
    var that = this;
    var apiRootPath = app.globalData.apiRootPath; //接口根目录

    wx.getUserProfile({
   
    //获取用户信息
      lang: "zh_CN",
      desc: "用于互动", //必须填写，否则不弹出授权提示
      success: function (res) {
   
   
        //打印用户信息
        console.log("用户信息", res.userInfo);
        wx.login({
   
   
          success: function (loginRes) {
   
    //登录成功
            console.log(loginRes);
            console.log("===================================================");