前言
本文,我们来聊聊,怎么在微信公众号中获取到微信用户的信息呢?并且,我们怎么在本地进行调试?下面我们就这两点,展开来说。
本地调试
我们下载微信开发者工具 — 选择稳定版本 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 中
。
后话
对微信公众号的开发还是中规中矩。但是需要留意的几点是:
- 申请测试公众号,并关注
- 填写域名为
ip + 端口号
- 微信开发者平台使用
ip
地址访问网页
Ok,Finish!下次见~
原文链接:https://juejin.cn/post/7225286853590269989 作者:Jimmy