通过小程序获取公众号的openId

记录项目开发过程之--获取公众号的openid

公司最近需要一个新的功能，公众号的消息推送。需要获取到用户的公众号的openId来进行推送，但是公司没有开发公众号H5，所以临时通过小程序来进行交互。开发完成然后自己记录一下

先奉上微信的文档 微信授权

1. 需要在公众号平台上面设置你的授权回调页面，这个页面在你获取code的时候会回调跳转过去并且将code拼接到你的回调路由里面，当成路由参数。这样你就可以通过这个路由获取到code。在开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名

2. 在小程序中，使用web-view组件进行跳转。我这里选择了静默授权，不需要用户进行手动授权

<view>
  <view class="">
    <web-view src="`https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect_uri=redirect_uri&response_type=code&scope=snsapi_base&state=123#wechat_redirect`"></web-view>
  </view>
</view>

3. 我这里设置的redirect_uri是我们线上有个pc端，我在这个pc端里面加了个页面。然后在这里进行前后端交互获取到openId。这里有个坑，我的pc项目是vue-router进行了hash来进行路由跳转的，带了#号。它返回过来是类似的是http://192.107.2/?code=code&state=123/#/getopenid 所以需要进行针对url进行处理来获取

<template>
  <div>
    <div>openid:{{ code }}</div>
    {{ url }}
    <!-- <div>url: {{ window.location }}</div> -->
  </div>
</template>

<script>
import api from "../../../api/api_common";
import wx from "weixin-js-sdk";

export default {
  name: "login",
  data() {
    return {
      code: "",
      url: window.location,
    };
  },
  created() {
    // 获取URL参数方法
    function getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return decodeURI(pair[1]);
        } // eslint-disable-line
      }
      return false;
    }
    this.code = getQueryVariable("code");
    alert(this.code);

    请求后端接口获取公众号openid
    api.getOpenId(this.cod).then((res) => {
      //跳转回小程序的登录页面并将公众号openid带过去
      wx.miniProgram.redirectTo({
        url: "/pages/tab/my/myHome/myHome?mpOpenid=" + res.data.data,
      });
    });
  },
};
</script>

4. 交互完成，跳转回到小程序并将openid待会带小程序里面去

网上还有另一种方式，是通过小程序和公众号的关联性，获取到unionid。这个没怎么深入

关于两种授权的方式 摘自官网

关于网页授权的两种scope的区别说明

1、以snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面）

2、以snsapi_userinfo为scope发起的网页授权，是用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。

3、用户管理类接口中的“获取用户基本信息接口”，是在用户和公众号产生消息交互或关注后事件推送后，才能根据用户OpenID来获取用户基本信息。这个接口，包括其他微信接口，都是需要该用户（即openid）关注了公众号后，才能调用成功的。