公众号测试号 进行H5授权获取code《前端部分》

Tips：因为申请公众号需要 ¥300。 so 我用的是测试号。【白嫖永远不亏】

需要注意的是 测试号是和个人微信号关联起来的，不是公众号主体关联。。也就是每个人都可以申请，而不是必须有公众号主题才可以。测试号和公众号是独立的。

一、前置准备-注册配置测试账号

1.注册测试号

去微信公众平台注册一个测试号。注意这是测试账号【白嫖的快乐】你会进入到这个界面。会生成测试用的appid 让你测试授权。记下来等会要用。

2、配置网页回掉域名

还是这个界面往下滑 你会看到 一个。体验接口权限表

在这个表的 【网页服务】- 【网页账号】- 【网页授权获取用户基本信息】这一项 点击【修改】按钮
点击按钮会让你 设置网页回调域名 无需以"http://"开头，直接写域名就可以,例如 “aa.bb.com”。

因为是开发调试， 所以我们需要用手机连接电脑启动的H5服务。你可以把这个路径写成自己启动的H5 项目的服务地址，然后在手机上访问。具体怎么访问的流程之后会讲。我这边填写的就是我启动的H5服务地址。

**end：**到这里就已经可以进行授权了，其他的一些功能就不叽歪了。

二、H5 获取授权信息

1、微信授权分为静默授权（snsapi_base）和非静默授权（snsapi_userinfo）

我选择的是静默授权

静默授权流程：以snsapi_base为scope发起网页授权得到code，再用公众号的appid和secret获取微信公众号的全局唯一凭证access_token，然后用拿到的access_token调用公众号的“用户管理接口”中的“获取用户信息接口”获得unionID。

前端需要做的是以snsapi_base为scope发起网页授权得到code，调用后台接口获取unionId

2、代码实现

废话不多说上代码：

URl就是你上面配置的 那个路径 这里 是使用当前获取授权的 界面地址。我们用的是测试号， 所以你上面 配置了什么路径就在这里用什么路径。这样直接获取当前界面的路径 我没试也不知道测试号行不行。小伙伴们可以尝试一下

getBaseInfos() {
  if (this.isWeiXin()) {
    const code = this.getUrlParam("code"); // 截取路径中的code
    if (code == null || code === "") {

      let url = sessionStorage.getItem("originUrl");
      window.location.href =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=你申请的appkey&redirect_uri=" +
        encodeURIComponent(url) +
        "&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect";
    } else {
    ///
    ///暂时不知道怎么写不是微信浏览器怎么搞。
    ///
    }

    if (code != "" && code != null) {
      this.wxCode = code;
      console.log(code)
      //这里就是把code给服务端了，没我们的事啦。【撒花】
      this.getOpenid(code)
    }
  } else {
  }
},
//判断是不是微信浏览器。
isWeiXin() {
  var ua = window.navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    return true;
  } else {
    return false;
  }
},
// 编码函数
getUrlParam(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
  var r = window.location.search.substr(1).match(reg); //匹配目标参数
  if (r != null) return unescape(r[2]);
  return null; //返回参数值
},