微信公众号H5页面开发怎么获取用户openid

微信公众号里会嵌套h5页面然后跳转，有时候我们就需要用到用户的openid，今天就为大家介绍一下公众号h5页面怎么获取openid
首先，需要用到公众号的appid，其次需要去公众号里配置好h5页面的域名，就不进行过多介绍了，我们直接上代码
我们需要两个参数，

1，appid
2，重定向地址

因为h5页面不在公众号内，想要获取openid就必须跳转到微信官方给的链接上，然后链接上会带有code跳转回来，我们将code从链接上截取下来传给后端，前端是不能直接获取openid的
授权有两种方式，一个是静默授权一个是需要用户手动授权，具体区别可以去微信公众平台查看
链接是这个：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect

需要注意，appid是需要手动填写的，还有redirect是当前页面的地址，获取成功来的地址
下面是我实现的代码

 getCode() {
      let appid = "wxf5f771aXXXXXXX"; //个人开发者appid
      let redirect = encodeURIComponent(window.location.href); //重定向回来的地址
      let wx_code = this.getUrlParam("code"); // 截取url中的code
      //判断有没有code
      if (!wx_code) {
        //获取code的地址。获取成功重定向后地址栏中将会带有code，判断没有code的话，就跳转到微信官方链接上获取，获取成功后会再重定向回来，注意url是需要使用encodeURIComponent处理一下编码的
        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
      } else {
     	// 获取到了code
        this.getOpenId(wx_code); //把code传给后台获取用户信息
      }
    },
    //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;
    },
     getOpenId(code) {
		//这里调用后端给的接口吧code传过去就好了
	}

这就是完整的过程