记一次vue获取微信用户信息

使用vue静态页获取微信的用户信息，通过调取微信的接口进行实现。

注意：我写的代码判断了只有在微信浏览器打开才可以获取用户信息，别的还没有进行测试！！！！！！！！！！

第一步：获取code

    getCode(){  var _api_root = "";_api_root = "这里是你获取完code后，跳转到的地址";//获取地址参数var hrefAdd = window.location.href.split("?")[1];//当前url路径转base格式var baseUrl = _api_root + hrefAdd;//这个是你要跳转地址的完整路径var encode = encodeURI(baseUrl);var base64 = btoa(encode);//跳转后台路径 拼接base格式的url路径window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+"你的appid"+'&redirect_uri='+
base64 +'&response_type=code&scope=snsapi_userinfo&state=wecedirect';}

注意：这是微信官方给定的接口。

第二步：获取用户的openid

注意：这里的process.env.VUE_APP_URL == ‘/api’

getWxUserInfo(code) {var that = this;var url = process.env.VUE_APP_URL+ "sns/oauth2/access_token?appid='小程序的APPID'&secret='用自己的'&code=" + code + "&grant_type=authorization_code";return new Promise((resolve, reject) => {axios.get(url).then(function (res) {var access_token = res.data.access_token;var openid = res.data.openid;sessionStorage.setItem("openid", openid);that.getWxUnionids(access_token, openid);//这个是获取unionid})})},

注意：这个官方接口是需要解决跨域问题，我这边是在nigex里边添加了以下代码

location /api {proxy_pass https://api.weixin.qq.com;  #代理的域名add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-AllowCredentials' 'true'; }

第三步就是unionid

注意：这里的process.env.VUE_APP_URL == ‘/api’

getWxUnionid(access_token, openid) {var that = this;var url = process.env.VUE_APP_URL+  "sns/userinfo?access_token=" +access_token + "&openid=" + openid + "&lang=zh_CN";return new Promise((resolve, reject) => {axios.get(url).then(console.log("unionid结果",unionid);)})},

注意：这个也需要跨域，不过因为在获取openid的时候已经加了代理，所以就不用再加了，因为他们的网站是一样的。

一次记录，不知道对你有没有帮助。如果有错误还希望大家可以提出来。

记一次vue获取微信用户信息相关推荐

SAP系统和微信集成的系列教程之六：如何通过OAuth2获取微信用户信息并显示在SAP UI5应用中
这是Jerry 2020年的第87篇文章,也是汪子熙公众号总共第269篇原创文章. 本系列的英文版Jerry写作于2017年,这个教程总共包含十篇文章,发表在SAP社区上. 系列目录 (1) 微信开发 ...
SpringBoot中获取微信用户信息竟然这么简单！
前言不知道你是否参加过拼多多上邀请微信好友砍价功能,这个功能实现首先需要考虑的就是获取微信用户的信息.获取用户信息就是获取公众号下微信用户的信息,今天我就来讲讲如何从公众号下获取微信用户信息. 需要 ...
获取微信昵称乱码php,Android 微信登录昵称乱码问题，及获取微信用户信息
微信第三方登录时昵称,username乱码问题解决方法如下: /** * 获取微信用户信息 * @param access_token 调用凭证 * @param openid 普通用户的标识,对当前 ...
Spring学习笔记（二十三）——实现网站微信扫码登录获取微信用户信息Demo
目录微信扫码登录介绍开发步骤微信扫码登录示例微信开放文档遇到的问题使用第三方工具实现网站微信扫码登录开发前介绍开发步骤微信扫码登录获取微信用户信息Demo实现流程实现效果实现过程 ...
获取微信用户信息java开发_Java微信公众平台开发(十二)--微信用户信息的获取
前面的文章有讲到微信的一系列开发文章,包括token获取.菜单创建等,在这一篇将讲述在微信公众平台开发中如何获取微信用户的信息,在上一篇我们有说道微信用户和微信公众账号之间的联系可以通过Openid关 ...
腾讯微搭小程序获取微信用户信息
腾讯微搭小程序获取微信用户信息无论你对低代码开发的爱与恨, 微信生态的强大毋庸置疑. 因此熟悉微搭技术还是很有必要的! 在大多数应用中, 都需要获取和跟踪用户信息. 本文就微搭中如何获取和存储用户信 ...
springboot+h5页面+微信公众号获取微信用户信息
springboot项目,h5页面通过微信公众号获取微信用户信息最近本人有一个项目需求,微信公众号里点击一个菜单进入一个商城购物系统. 对于在微信公众号还是小白的我来说难度有点大,但是做完后发现也就 ...
微信中获取微信用户信息的2种方式
微信中获取微信用户信息的2中方式 1, 在公众号底部菜单栏地址配置h5地址,如 http://test.dingdong.com/page1 然后前端在所有页面前拦截如login页面,查看是否有tok ...
android 微信乱码问题怎么解决方法,Android 微信登录昵称乱码问题，及获取微信用户信息...
微信第三方登录时昵称,username乱码问题解决方法如下: /** * 获取微信用户信息 * @param access_token 调用凭证 * @param openid 普通用户的标识,对当前 ...

记一次vue获取微信用户信息

记一次vue获取微信用户信息相关推荐

最新文章

热门文章