微信公众号h5获取用户openId

最新推荐文章于 2024-04-22 11:12:50 发布

我爱画页面

最新推荐文章于 2024-04-22 11:12:50 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/qdm13209211861/article/details/108056920

版权

参考微信开发文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

一、获取openId的方法与步骤：

1、登录微信公众平台后台获取公众号的AppId，设置回调地址。

在这里插入图片描述
回调地址设置页面向导：开发>接口权限>网页服务>网页授权>修改。
注意：回调地址中必须为配置好的域名

2、用户同意授权，获取code

参考链接(请在微信客户端中打开此链接体验)：
scope为snsapi_base
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect

具体参数解析如下：
在这里插入图片描述

如果用户同意授权，加载上面链接将跳转至 redirect_uri/?code=CODE&state=STATE。

3、通过code换取openId

配置的参数要一一对应，获取code，并调用后台接口，把code传给后台

前端具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试</title>
</head>
<body>
   <script>
   var STATE = window.location.search.replace('?', '');
   STATE = encodeURIComponent(STATE)
   window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?'+
   'appid=这里写公众号的AppID&redirect_uri=这里写回调页面'+
   '&response_type=code&scope=snsapi_base&state="+ STATE +"#wechat_redirect"'
   </script>
</body>
</html>

直接加载上面这个页面，会回调 redirect_uri参数的地址，这里我写的回调地址就是下面这个页面，所以会直接跳转到如下页面：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试</title>
  <script>
    (function (doc, win) { var htmlFont = function () { var docEl = doc.documentElement, l = docEl.clientWidth, f; f = l / 7.5; docEl.style.fontSize = f + "px" }; htmlFont(); win.addEventListener("resize", htmlFont, false) })(document, window);
  </script>
</head>
<body>
</body>
<script src="js/axios.min.js"></script>
<script>
  !function () {
    // 地址栏获取参数
    function getQueryParam(key, url) {
      var searchStr = url || window.location.search;
      searchStr = url ? decodeURIComponent(searchStr) : searchStr;
      searchStr = searchStr.replace(/^\?/, '');
      var params = searchStr.split('&');
      var paraObj = {};
      params.forEach(function (s) {
        var ss = s.split('=');
        ss.length && (paraObj[ss[0]] = ss[1])
      })
      return paraObj[key] !== undefined ? paraObj[key] : ''
    }
    var code = getQueryParam('code');
    var state = getQueryParam('state');
    //请求后端接口，根据code获取openId
    axios.get('/pos-coupon/weChat/card/getOpenId?code=' + code).then(function (res) {
      if (res.data.code == 200) {
        openid = res.data.result.openId;
        openid && getCoupon(openid);
      } else {
        oFailContent.innerText = res.data.msg
      }
    })
    //拿到openId后根据具体业务请求接口
    function getCoupon(openid) {
      axios.post('/weChat/coupon/send', {
        "openid": openid,
      }).then(function(res) {
        if (res.data.code !== '200') {
          oFailContent.innerText = res.data.msg
        }else{
          oFailContent.innerText = res.data.msg
        }
      })
    }
  }()
</script>
</html>

我爱画页面

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
微信公众号h5获取用户openId

参考微信开发文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html一、获取openId的方法与步骤：1、登录微信公众平台后台获取公众号的AppId，设置回调地址。回调地址设置页面向导：开发>接口权限>网页服务>网页授权>修改。注意：回调地址中必须为配置好的域名2、用户同意授权，获取code参考链接(请在微信客户端中打开此链接体验)
复制链接

扫一扫