返回

手把手教你调试微信JSSDK和授权

前端

一、准备工作

  1. 确保微信公众号已经申请并配置好相关参数。
  2. 在公众号后台获取AppID和AppSecret。
  3. 安装Node.js和npm。
  4. 安装微信开发工具包（WeixinJSBridge）。

二、配置项目

  1. 创建项目目录，并切换到该目录。
  2. 初始化Node.js项目。
  3. 安装必要的依赖包。
npm install express weixin-jsbridge
  1. 创建服务器端代码文件。
const express = require('express');
const weixinJsbridge = require('weixin-jsbridge');

const app = express();

app.use(weixinJsbridge({
  appId: 'YOUR_APPID',
  appSecret: 'YOUR_APPSECRET',
}));

app.get('/', (req, res) => {
  res.sendFile('index.html');
});

app.listen(3000);
  1. 创建HTML文件。
<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>微信公众号JSSDK和授权调试</h1>
  <button id="btn-authorize">授权</button>
  <script src="bundle.js"></script>
</body>
</html>
  1. 创建JavaScript文件。
const btnAuthorize = document.getElementById('btn-authorize');

btnAuthorize.addEventListener('click', () => {
  weixinJsbridge.authorize({
    scope: 'snsapi_userinfo',
  }).then((res) => {
    console.log(res);
  }).catch((err) => {
    console.log(err);
  });
});

三、运行项目

  1. 启动服务器。
npm start
  1. 在浏览器中打开localhost:3000。
  2. 点击“授权”按钮。
  3. 在弹出的授权页面上点击“同意”。

四、调试

  1. 打开Chrome开发者工具。
  2. 切换到“网络”选项卡。
  3. 点击“授权”按钮。
  4. 在“网络”选项卡中可以看到发出的请求和响应。
  5. 检查请求和响应是否正确。

五、常见问题

  1. 授权失败。
    • 检查AppID和AppSecret是否正确。
    • 检查scope参数是否正确。
    • 检查是否已经关注了公众号。
  2. JSSDK接口调用失败。
    • 检查是否已经授权。
    • 检查接口名称是否正确。
    • 检查参数是否正确。

六、结语

本文详细介绍了如何在本地调试微信公众号JSSDK和授权。通过本文，希望你能够顺利完成微信公众号JSSDK和授权的调试工作。