vue 授权获取微信openId

最新推荐文章于 2025-04-22 11:15:56 发布

只会切图的前端

最新推荐文章于 2025-04-22 11:15:56 发布

阅读量1.5w

点赞数 5

分类专栏： web移动端文章标签： code vue openId

本文链接：https://blog.youkuaiyun.com/qq_41786458/article/details/83010287

版权

web移动端专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何从微信公众号的URL中获取code参数，并利用该code通过微信开放平台API获取用户的OpenID。首先，使用JavaScript函数从当前URL中解析出code参数。如果code存在，则调用后端接口进行OpenID的交换；若不存在，则生成带有code请求的微信授权链接，引导用户进行授权。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、获取url中参数code；根据code 获取openId；调用后台接口获取openId 。参考文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

 function getUrlKey(name){//获取url 参数
   return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
 }
  
function getCodeApi(state){//获取code   
     let urlNow=encodeURIComponent(window.location.href);
     let scope='snsapi_base';    //snsapi_userinfo   //静默授权 用户无感知
     let appid='wx4cc5d5c123123123';
     let url=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${urlNow}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
     window.location.replace(url);
}

//注意代码放置位置
export default {
	created(){
		let code=getUrlKey("code");//获取url参数code
		if(code){ //拿到code， code传递给后台接口换取opend
			getOpenIdApi(code).then(res=>{
                 console.log(res);
            }).catch(res=>{})
		 }else{
			getCodeApi("123");
		 }
	}
}