微信统一登录

目录

一.wx.getUserProfile获取用户信息

二.wx.login获取code

三.根据code获得微信用户的唯一标识符openId

四.完整流程

---

一.wx.getUserProfile获取用户信息

微信库版本＞2.27.1时，getUserProfile不再返回真实用户信息了并且也不再弹出授权框

详见官方文档：https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01

uniapp使用hxbuild时如何调整微信库版本: 

微信库版本<2.27.1时，获取信息成功返回的数据

 wx.getUserProfile({
        //必填项
		desc: '获取你的昵称、头像、地区及性别',
        //执行成功后调用的接口
		success(res){
			console.log(res)
	    },
        //执行失败后调用的接口
        fail(res){
			console.log('error',res)
		},
        //无论执行失败，成功都会调用的接口
        complete(res){
			console.log('error',res)
		}
  })

二.wx.login获取code

wx.login是微信提供的微信登录接口，会返回一个临时的code值，之后根据这个临时code值获取微信用户唯一的openid和session_key值

wx.login接口正常返回数据：

wx.login({
	 success(res){
		console.log(res)
		if(res.code){
			console.log('code',res.code)
		}
	 }
 })

三.根据code获得微信用户的唯一标识符openId

由于后期小程序上传代码时前端不能出现appid,secret，建议获取openId部分放在后端接口

后端代码:

@RequestMapping(value = "/getOpenId", method = RequestMethod.POST)
 public String wx(String code) throws IOException {
        String url = "https://api.weixin.qq.com/sns/jscode2session?";
        Map<String,Object> requestMap=new HashMap<>();
        requestMap.put("appid",APP_ID);
        requestMap.put("secret",APP_SECRECT);
        requestMap.put("js_code",code);
        requestMap.put("grant_type","authorization_code");
        String result= HttpUtil.get(url,requestMap);
        return result;
    }

前端代码:

//自己封装了request请求
export function  getOppenId(code) {  
  return request({  
    url: `/wx/getOpenId?code=`+code, // 后端接口地址
	method: 'Post'  ,
  });  
} 

返回数据:

四.完整流程

<Script>
    import {getOppenId}  from '../xxxx.js'
    export default {
        methods:{
             wxlogin(){
                 //调用微信接口获取微信用户信息（微信库2.27版本以下才行）
                 wx.getUserProfile({
                     //必填项
		             desc: '获取你的昵称、头像、地区及性别',
                     //执行成功后调用的接口
		             success(res){
                         //调取微信接口获取临时code
                         wx.login({
	                         success(res){
                                 //如果成功获得，code存在
	                        	 if(res.code){
                                      //调用后端接口根据code返回微信的openId
                                      getOppenId(res.code).then(res=>{
                                          /**
                                            写自己的登录逻辑
                                            比如：
                                              如果数据库存在该openId：
                                                 用户存在->跳转到小程序首页
                                              如果数据库不存在该openId：
                                                 新增用户->跳转到小程序首页
                                           */
                                      }).catch(error=>{
								         console.log('错误信息',error)
							          })
	                        	 }
	                         }
                         })
	                 },
                     //执行失败后调用的接口
                     fail(res){
		             	console.log('error',res)
		             
                     //无论执行失败，成功都会调用的接口
                     complete(res){
		             	console.log('error',res)
		             }
                })
             }
        }
    }
</Script>