今天完成的事情

今天在图神的梳理下理清了步骤。

 1、用户访问自定义菜单的url..

下面的地址需要在微信公众平台自定义菜单中自行设置。appid是服务号id。uri是回调域名。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=XXXXXX&redirect_uri=http://mxr.dounixue.net/&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect  

 2、微信解析到 

http://mxr.dounixue.net/?code=061lWlgU1CiUYV0Ez6hU1paegU1lWlgx&state=STATE 

之前一直想不明白该如何通过授权登陆跳到这一页。然而实际上是等跳到这一页之后再去向后端请求。我们只要关注微信公众号，访问自定义菜单，第一次就会出现获取个人信息的授权请求。

而等确认登陆之后。自然跳转到上面那个链接。然后截取code

我要截取url上的code。向后端发送请求。。他返回给我一个id。。和openid

具体方法：

let url = window.location.href;

// let url ="http://mxr.dounixue.net/?code=061jAEDj20EePG0lIBDj2c7UDj2jAEDe&state=STATE";

console.log("url", url);

// 截取code.

let code = url.split("code=")[1].split("&state=")[0];

console.log("code", code);

this.$http

.get("http://122.152.216.183:8092/home/login", {

params: {

code: code

}

})

response:

{

"status": 0,

"data": {

"id": 18,

"openid": "021SFAjY02C6412Z9OfY0VxIjY0SFAj7"

},

"msg": "验证成功"

}

这里的code只能请求一次。第二次请求就是会向微信端重新发送请求。code值立马就变化了。尤其是vue是响应式的，vscode中修改代码，本地立马就变了。请求重新发送。重新在微信工具上获取跳转路径。

解决办法是不予理会，本地测试使用静态的带code的url。将服务器返回的字段存在sessionstorage中

<!-- 以下是用code通过官方接口返回的json包。 --><!-- https://api.weixin.qq.com/sns/oauth2/access_token?appid=XXXXXX&secret=XXXXXXXX&code=071TbCs11sFTBZ1kikt11toGs11TbCsb&grant_type=authorization_code   不能测试对比。应该是一样的。如果这样在浏览器中再打开。会提示code已经使用了。。所以只要后端弄好了就行

{

   "access_token": "11_YNfmJ6NLK6Mm3AW9iDYH2VKlu8bo2pnuBAy77sZgzjyrqE52iI417odqpEzfveZpKwt5uXhc_DLsoSYS7Rgz4Q",

   

   "expires_in": 7200,

   "refresh_token": "11_qtTfdF4t2cpYYfBG3THeOHjB9NGuuB6uBj0O-0UtzP0GhGD0Fhe-MYlxxUO4Bk7Y2lDUX2UI9AufDW8FFGP2vQ",

   "openid": "oSV35t1edoa7ocKrAhuK_bGJZXQc",

   "scope": "snsapi_userinfo"

 }  

3、我通过code=openid    get请求    

http：GET（请使用https协议）  https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=oSV35t1edoa7ocKrAhuK_bGJZXQc=zh_CN 

this.$http

.get("https://api.weixin.qq.com/sns", {

params: {

access_token: access_token,

openid: openid,

lang: "zh_CN"

}

})

.then(response => {

https://api.weixin.qq.com/sns/userinfo?access_token=11_9ITM3olLR6jBlZ5kCvN7LHUFxN9W0dq5ags-yzq_eXK99iWTcbTdTdSHaFLLPZ1fxdKdiimli1mUoGeGHuMf2w&openid=oSV35t1edoa7ocKrAhuK_bGJZXQc&lang=zh_CN

 "openid": "oSV35t1edoa7ocKrAhuK_bGJZXQc",  "webAccessToken": "11_aDux0RGd41BZehuTXMlmZ-nYF3edaZoTaWFhKSUO0hS7ZLmIw3IfLCANG4-YT9TUTUSwdd8CoRl6bjkv7VzsNA"

测试返回json包。而实际上返回

{

"openid": "oSV35t1edoa7ocKrAhuK_bGJZXQc",

"nickname": "素·锦年·时",

"sex": 1,

"language": "zh_CN",

"city": "",

"province": "",

"country": "中国",

"headimgurl": "http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTI027H6e1tkyLzF6OTe53LveYWvBEQUKsLqib1hYgfOCHibpX3FXlob71gYZb4jnVmXtEMroE8JnTww/132",

"privilege": []

}

明天计划的事情

获取微信上传图片接口。等后端返回三个字段，就去调用微信图片上传的接口

遇到的问题

已解决

未解决

收获