h5页面获取微信code

最近要求做一个h5签到页面,需求是在微信里面扫描二维码链接,不同城市的同事填写个人信息,提交到后台,实现签到功能。
微信授权文档

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect\_uri=REDIRECT\_URI&response\_type=code&scope=SCOPE&state=STATE#wechat\_redirect,这个是获取微信code的请求,

          //为测试号id
          let appid = "你的appid"; 
          // 正式路径
          let link = '你的h5正式路径';
          //重定向后会带上state参数,我这边的需求要区分是哪个城市的,不需要参数可以不写state这个字段
          let city = 'nj';                
          window.location.href =
            `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(link)}&response_type=code&scope=snsapi_base&state=${city}#wechat_redirect`;

我这边只需要获取open,所以用的静默授权scope=snsapi_base
我这边需要判断是否是微信内置浏览器打开,还有截取判断公众号截取code,下面是我这一整个业务的代码:




逻辑都在getWxCode()这个方法里面。
先判断是否为公众号模拟器环境。下面调用getUrlParam('code')这个方法,如果有的话,说明已经请求获取到了,如果没有获取到的话,就去请求微信接口获取code。获取成功之后,就可以把code给后端,后端请求拿得到openid了。
上面的代码不多,但是参考了很多的网上的写法,我把这些链接也贴出来,希望能帮到需要的人。
通过微信网页授权获取用户OpenId(微信公众平台配置我主要参考这个链接)
微信H5授权获取code,拿取用户信息(我主要参考这位前辈的代码,写的真好)
在公众号配置域名
微信开放平台
微信开放平台(另一个)
在看了官网的文档和上面各位前辈的代码后,我这边是实现了需求了的,很感谢他们,也希望能帮到需要的朋友。

你可能感兴趣的:(前端,vue.js,小程序)