微信小程序用户登陆和获取用户信息功能实现

官方文档:

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

接口说明:

https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/user-login/code2Session.html

我们看官方这个图,梳理一下用户登陆的大概流程就是:

1.小程序获取code,将code发给服务器,

2.服务器将appid + appsecret + code发给微信接口 

3.微信接口返回 session_key + openid给服务器 

4.服务器定义登陆状态,返回token给小程序

5.小程序接收token并保存

1、做一个用户登陆按钮和获取用户信息按钮

<view>
  <button bindtap="getUserInfo" type="primary">获取用户信息</button>
  <button bindtap="wxLogin" type="warn" >登陆</button>
</view>

 2、调用微信官方的用户登陆方法和获取用户信息方法

  //获取微信用户的头像和昵称
  getUserInfo() {
    wx.getUserProfile({
      desc: '用于完善会员资料', 
      success: res => {
        console.log('用户信息:', res.userInfo)
      },
      fail: err => {
        console.error('获取用户信息失败', err)
      }
    })
  },
  // 微信登陆
  wxLogin() {
    wx.login({
      success: (res) => {
        console.log(res.code)
      },
    })
  }

3、测试 

这里我们可以看到当我点击“获取用户信息”按钮之后,成功返回的用户信息。这说明测试成功了,这里还得提一下,现在新版本的都不会显示用户昵称和头像了,之前旧版本的会直接返回用户真实的头像和昵称,所以不必纠结这一点,这不是问题。

当点击登陆按钮时,返回了code,这也说明咱们的代码是没问题的。 

4、小程序发送code给服务器 

  // 发送请求
  sendRequest() {
    wx.request({
      url: 'http://localhost:8080/api/user/wxLogin',
      method:'POST',
      data: {
        jsCode: this.code // 将code作为jsCode字段放在data对象中
      },
      success: (res)=>{
        this.token = res.data.data;
        console.log('接收到的token为:' + this.token)
      }
    })
  }
<view>
  <button bindtap="getUserInfo" type="primary">获取用户信息</button>
  <button bindtap="wxLogin" type="warn" >登陆</button>
  <button bindtap="sendRequest" type="default" >发送请求</button>
</view>

5、服务器端代码

@Override
public Result<String> wxLogin(WxLoginParam param) {
    System.out.println("打印code" + param.getJsCode());
    // 得到微信登录信息
    String response = payService.getWxLogin(param.getJsCode());
    if (StrUtil.isEmpty(response)) {
        return Result.fail(ResultCodeEnum.WX_ERROR);
    }
    // 微信会返回一段json,从中得到openid、session_key和unionid
    JSONObject resJson = JSONUtil.parseObj(response);
    String openid = resJson.getStr("openid");
    if (StrUtil.isEmpty(openid)) {
        Result<String> result = new Result<>();
        result.setCode(ResultCodeEnum.SERVICE_ERROR.getCode());
        result.setMessage("调用微信接口异常:" + resJson.get("errmsg"));
        return result;
    }
    // 根据微信用户信息查询
    LambdaQueryWrapper<User> usWrapper = Wrappers.lambdaQuery();
    usWrapper.eq(User::getOpenId, openid);
    synchronized (this) {
        User user = baseMapper.selectOne(usWrapper);
        if (Objects.isNull(user)) {
            // 如果是第一次登录则创建信息
            user = new User();
            user.setOpenId(openid);
            user.setInvokeFlag(ProjectConstant.INVOKE_FLAG_TRUE);
            baseMapper.insert(user);
        } else if (ProjectConstant.INVOKE_FLAG_FALSE.equals(user.getInvokeFlag())) {
            return Result.fail(ResultCodeEnum.ACCOUNT_STOP);
        }
        return Result.ok(JwtUtil.getToken(user.getId(), null));
    }
}

6、测试结果 

 可以看到我们已经成功地接收到了token,说明成功了。

 亲爱的读者,感谢您关注与支持我的博客。您的每一份鼓励都是我前行的动力。若我的文章曾给您带来收获或启发,欢迎打赏支持。打赏款项将用于提升内容质量,为您提供更优质的阅读体验。无论结果如何,都感恩您的陪伴,让我们共同在知识的世界里探索前行!

​​​​​​​

  • 9
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
### 回答1: 微信小程序登录后,可以在页面中使用 "tabbar" 组件来显示底部导航栏。 在微信小程序的 app.json 文件中,可以配置 "tabBar" 属性来配置底部导航栏的样式和内容。在页面的 json 文件中,可以使用 "usingComponents" 属性来引用 tabbar 组件。 在页面的 wxml 文件中,可以使用"<tabbar/>"标签来渲染底部导航栏。 具体实现细节可以参考微信小程序的官方文档。 ### 回答2: 微信小程序是一种轻量级的应用程序,用户可以通过微信直接打开使用,非常方便。在微信小程序中,用户登录后的页面显示tabbar是一种常见的设计方式,可以提供多个功能入口,让用户快速切换不同的页面。 一般来说,微信小程序的tabbar通常位于页面的底部,由一系列图标和文字组成。每个图标代表一个功能入口,用户可以通过点击图标实现页面的切换。用户在登录后的页面上看到tabbar,可以根据自己的需求选择不同的功能微信小程序的tabbar具有以下特点: 1. 多个页面入口:通过tabbar,用户可以在不同的页面之间进行切换,方便快捷。每个tab对应一个功能,比如首页、消息、发现、我的等。 2. 易于操作:用户只需轻触tabbar的图标即可切换页面,无需进行复杂的手势操作,使用起来非常方便。 3. 显示当前页面状态:在tabbar中,通常会有一个页面的图标高亮显示,以表示当前所在页面。这样用户可以清晰地知道当前所处的页面状态。 4. 提供导航功能:tabbar可以作为主导航栏,供用户在不同功能页面之间进行导航。用户可以通过点击不同的tab来浏览不同的内容,提高用户体验。 总之,微信小程序登录后的页面显示tabbar是一种常见的设计方式,它可以提供多个功能入口和快速切换,让用户方便地浏览不同的页面。这种设计能提高用户体验,增加小程序的可用性。 ### 回答3: 微信小程序登陆成功后,页面会显示一个底部导航栏,也被称为"tabbar"。这个tabbar通常位于页面的底部,供用户快速切换不同功能页面。 tabbar的外观和功能通常根据开发者的需要进行定制。它通常由多个图标和标签组成,每个图标和标签代表小程序中不同的功能页面。 当用户点击tabbar上的某个图标或标签时,页面会根据对应的功能跳转到相应的页面。这有助于用户快速访问和切换不同的功能和内容。 开发者可以通过配置小程序的app.json文件来定义tabbar的样式和内容。在app.json中,可以设置tabbar的背景颜色、字体颜色、选中态的样式,以及每个页面对应的图标和标签等。 需要注意的是,如果一个小程序不需要tabbar或只在部分页面显示tabbar,开发者也可以在app.json中进行相应的配置。 总之,微信小程序登陆后的页面显示tabbar,为用户提供了一种便捷的方式来浏览和切换不同的功能页面。这使得小程序使用更加直观和易于操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

周盛欢

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值