uniapp实现微信授权登录并回显用户头像和名称

阳光穿透心脏的1/2处 2022-11-15 14:19 388阅读 0赞

先上html页面的代码：

<button class="login" v-if="show1" open-type="getUserInfo" @getuserinfo="bindGetUserInfo" >授权登录</button>
              <image v-if="show2" class="avator-img" :src="userInfo.avatarUrl"></image>//这是你登录成功后的头像
              <text v-if="show2">{
       { userInfo.nickName }}</text>//这是你登录成功后的用户名称

登录和显示用户信息的js代码：

methods:{
     bindGetUserInfo(){//这个是登录
    	  	 	uni.login({
    	  	 	success: res => {
    	  	 	  console.log('code')
    	  	 	  console.log(res.code);
    	  	 	    uni.getUserInfo({
    	  	          success: info => {
    	  	 	         console.log(info);
    	  	 			 let url = '/wx/login';
    	  	 			 let data = {
    	  	 		       encryptedData:info.encryptedData,
    	  	 			   code:res.code,
    	  	 			   iv:info.iv,
    	  				   signature:info.signature
    	  	 			}
    	  	 			this.$http.post("/wx/login",{data}).then(res => {
    	  	 			  console.log(res)
    					 this.show2=true;
    					 this.show1=false;
    					 this.get();
    	  	 											   	
    	  	 		});
    	  	      },
    	  	 	});
    	  	 }
    	  	});
    	  },
    	  get{
    	  let that = this;
    	  uni.getUserInfo({
    	  	 	success: function(info){
    	  	 	  console.log('code');
    	  	 	  console.log(info);
    			  that.userInfo = info.userInfo;//获取用户信息
    			  console.log(that.userInfo)
    	  }});
      },
    },
    	
       data() {
        return {
          userInfo: {
          },
      	  show1:true,
      	  show2:false
        };
      },

发表评论取消回复

表情：

评论列表（有 0 条评论，388人围观）

还没有评论，来说两句吧...

相关阅读

相关【微信网页授权】SpringBoot+uniapp实现网页授权获取用户基本信息

SpringBoot+uniapp实现网页授权获取用户基本信息1. 测试公众号实现网页授权并获取用户基本信息2. 灵活掌握微信接口文档，熟练对接相关接口3. 整理授权逻辑...

秒速五厘米/ 2024年05月11日 09:06/ 0 赞/ 86 阅读

相关基于Uniapp+SpringBoot实现微信小程序授权登录

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5a2Z5LiN5Z2aM

Love The Way You Lie/ 2023年10月02日 04:02/ 0 赞/ 445 阅读

相关 uniapp微信授权登录

uniapp微信授权登录想了好久这个问题，我朋友来一会就给我解决了，很厉害！@曹建宇问题：当点击按钮调用`wx.authorize()`方法获取用户个人信息

偏执的太偏执、/ 2023年07月13日 15:14/ 0 赞/ 31 阅读

相关 uniapp实现微信授权登录并回显用户头像和名称

先上html页面的代码： <button class="login" v-if="show1" open-type="getUserInfo" @getuserinf

阳光穿透心脏的1/2处/ 2022年11月15日 14:19/ 0 赞/ 389 阅读

相关微信授权登录简单实现

@RequestMapping("/wxcode") public void wxlogin(HttpServletResponse response) {

╰半橙微兮°/ 2022年10月14日 15:49/ 0 赞/ 228 阅读

相关 H5之微信授权登陆（uniapp网页版微信授权登录）

今天来复盘代码了不然这个月过完我可能脑子里又啥都不剩了感觉自己跟个金鱼脑一样十分沧桑 ![在这里插入图片描述][20200704134543310.png] 1

╰半夏微凉°/ 2021年08月30日 20:40/ 0 赞/ 3427 阅读

相关 uniapp 微信授权登录功能实现

微信授权登录很多app都有第三方账号登录，常见的就是微信/QQ/支付宝/淘宝等第三方账号登录。下面说明一下微信授权的登录的全过程。 uni.login(\{\

た入场券/ 2021年07月26日 02:29/ 0 赞/ 1406 阅读

相关 uniapp微信小程序授权登录

<template> <view> <LotusLoading :lotusLoadingData="lotusLoadingData" styl

本是古典何须时尚/ 2021年07月24日 23:16/ 0 赞/ 1006 阅读

相关微信小程序授权登录(获取微信头像并显示)

用户页面代码 user.wxml <block> <view class="user_img_wrap" wx:if="{ {userInfo.a

小咪咪/ 2021年07月24日 19:19/ 0 赞/ 1300 阅读

相关 JAVA实现微信授权登录

1.先写一个工具类 AuthUtil.java 来存放APPID等信息 public class AuthUtil { public static fina

阳光穿透心脏的1/2处/ 2021年06月26日 16:06/ 0 赞/ 677 阅读