微信 H5 端获取用户 OpenId 操作步骤

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

前言

由于最近自己研究开发网页端微信小程序，需要用到用户 OpenId，所以通过微信官方文档进行操作，在这里分享一下自己的部分操作心得。

• 用到的技术栈：

  • Vue3
  • ElementPlus
  • Springboot
  • SpringCloud
  • Nacos

操作步骤

• 引入所需js

微信js：

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

vue3.js以及axios.js

<script src="/static/js/vue3.js"></script>
<script src="/static/js/axios.js"></script>

• 前端代码开发（伪代码方式）

mounted() {
    // 个人公众号appId
    var appid = "*********";
     // 重定向回来的地址
    var redirect = encodeURIComponent(window.location.href);
    // 截取url中的code
    var wxCode = this.getUrlParam("code"); 
    // 获取code的地址。获取成功重定向后地址栏中将会带有code，判断没有code的话，就跳转到微信官方链接上获取，获取成功后会再重定向回来，注意url是需要使用encodeURIComponent处理一下编码的
    if (!wxCode) {
        // scope: 必传；应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）
        // 静默授权
        window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + redirect + "&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
    } else {
        // 获取到了code
        this.getOpenId(wxCode); //把code传给后台获取用户信息
    }
},
methods: {
      // getUrlParam方法就是使用正则截取地址栏里的code
     getUrlParam: function (name) {
       var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
       var r = window.location.search.substr(1).match(reg);
       if (r != null) return unescape(r[2]);
       return null;
      },
     // 获取用户的openid
     getOpenId(code) {
          let result = axios({
          method: 'post',
          url: "/api/getOpenid",
          data: {code: code},
          header: {
              'Content-Type': 'application/x-www-form-urlencoded'
           }
          }).then(function (result) {
             var wxResult = result.data.data;
             var openid = wxResult.openid;
             }).catch(error => {
                    //待完善弹窗
                });
            },
        }

• Controller 层

    @RequestMapping("/getOpenId")
    public ResponseVO getOpenId(@RequestBody WxMpRequest request){
        return wxMpService.getOpenId(request);
    }

• Service 层

    // 获取openId
    public String getOpenId(WxMpRequest request) {
        String code = request.getString("code", "");
        // 在 nacos 配置文件中配置 appid 及 secret,直接通过 @Value 注解获取即可
        // 在 nacos 配置文件中配置上请求域名 
              String url = WxMpUrl+"/sns/oauth2/access_token?appid=" + appId + "&secret=" + appsecret + "&code=" + code + "&grant_type=authorization_code";
        String data = HttpUtil.sendGet(url);
        return data;
    }

• 在微信公众平台配置网页授权域名

操作步骤省略。

结束

至此，即可通过上述步骤获取到用户的 openId

• END -