一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

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

前言

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

本地调试

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

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

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

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

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

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

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

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

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

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

提示我们并没有登陆,现在我们登陆下:

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

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

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

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

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

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

测试号信息中的 appIDappsecret 我们后面会用到

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

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

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

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

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

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

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

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

获取微信用户信息

还记得我们说的 appIDappsecret 后面会用到?其中前端调用用到 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,并调用接口获取 openIdtoken 等信息,并将这里信息设置在 localStorage 中;如果存在该信息,说明之前已经获取过 openId因为 openId 一定,所以可以考虑存放在 localStorge 中

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

后话

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

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

Ok,Finish!下次见~

原文链接:https://juejin.cn/post/7225286853590269989 作者:Jimmy

(0)
上一篇 2023年4月24日 上午11:07
下一篇 2023年4月25日 上午10:00

相关推荐

发表评论

登录后才能评论