调试微信公众号获取用户信息

前言

本文，我们来聊聊，怎么在微信公众号中获取到微信用户的信息呢？并且，我们怎么在本地进行调试？下面我们就这两点，展开来说。

本地调试

我们下载微信开发者工具 — 选择稳定版本 Stable Build 即可。

点击下载好的软件，进入到 公众号网页项目 进行开发～

为了演示，我使用 Creat React App 创建了一个 demo 项。

# 创建 demo 项目
npx create-react-app demo
# 进入 demo 项目
cd demo
# 启动 demo 项目
npm start

运行项目之后，在默认浏览器网页 http://localhost:3000/ 上会自动弹出该项目的运行效果：

一切正常，我们把该项目 localhost 地址在微信开发者工具上运行下：

提示我们并没有登陆，现在我们登陆下：

为了测试微信公众号的内容，我们还需要注册一个测试的号。

当然，如果你已经有一个现成的微信公众号，你可以忽略该内容

进入 公众号平台测试账号系统 进行扫码登录。

测试号信息中的 appID 和 appsecret 我们后面会用到

当然，开发者或者测试环境体验者还需要关注该测试号，不然不允许调试或者体验。

注意 ⚠️ 线上环境不强制要关注公众号才可以查看网页

我们调试的时候，不能使用 localhost 进行预览 ，需要更改成本机的 Ip 地址，我这里是 192.168.***.***，并且在微信测试平台上网页服务 - 网页账号 - 网页授权获取用户基本信息上配置好网页的域名，这里是 192.168.***.***:3000。

做好了上面本地调试的工作之后，我们可以正式开始获取微信用户信息了。

获取微信用户信息

还记得我们说的 appID 和 appsecret 后面会用到？其中前端调用用到 appID，后端则两者都用到。这里我们只是说前端调用获取 code ，传递给后端即可。

我们在 demo 的入口页面 App.js 中添加。下面是完整的如何获取 code 的代码：

// src/App.js

import React, { useEffect } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const theAppId = '****';
  const openId = window.localStorage.getItem('open-id');

  // 获取微信 code 
  const requestForWechatCode = () => {
    const localUrl = encodeURIComponent(window.location.href);
    const appId = theAppId;
    const scope = 'snsapi_base'; // 这里不进行弹窗获取
    let code = getCode();
    if(!code) {
      // 向微信平台发送授权请求 code
      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${ appId }&redirect_uri=${ localUrl }&response_type=code&scope=${ scope }&state=STATE#wechat_redirect`;
    } else {
      requestForToken(code);
    }
  }

  // 判断是否有 code
  const getCode = () => {
    var code = "";
    var url = window.location.search;
    if (url.indexOf("?") !== -1) {
      var strings = url.substring(1).split("&");
      for (var i in strings) {
        if (strings[i].indexOf("code") === 0) {
          code = strings[i].split("=")[1];
        }
      }
    }
    return code;
  }

  const requestForToken = () => {
    // TODO: 向后端发起请求，获取登陆 openId 和 token 凭证等信息
  }

  useEffect(() => {
    if(!openId) { // 不存在 openId ，则需要重新发起请求
      // 跳转到获取获取 code 的接口
      requestForWechatCode();
    } else {}
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

代码中的思路很清晰。首先判断是否获取到了 openId。如果没有该信息，则重定向到微信中获取 code，并调用接口获取 openId 和 token 等信息，并将这里信息设置在 localStorage 中；如果存在该信息，说明之前已经获取过 openId。因为 openId 一定，所以可以考虑存放在 localStorge 中。

后话

对微信公众号的开发还是中规中矩。但是需要留意的几点是：

1. 申请测试公众号，并关注
2. 填写域名为 ip + 端口号
3. 微信开发者平台使用 ip 地址访问网页

Ok，Finish！下次见～