记一次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的时候已经加了代理，所以就不用再加了，因为他们的网站是一样的。

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