微信公众号开发与本地调试详细教程

news2025/4/3 13:30:11

在进行微信公众号开发时，本地调试是一个关键的步骤。本文将详细介绍如何进行微信公众号开发并在本地环境中进行调试。我们将以Nginx为例，演示如何配置虚拟主机，使用ngrok进行内网穿透，以及进行网页授权和JS SDK的测试。

1. 准备工作

首先，确保你已经完成了以下准备工作：

注册了一个微信公众号。
安装了Nginx并启动了Web服务器。
下载并安装了ngrok，用于内网穿透。

2. 配置Nginx虚拟主机

通常，每个项目都应以虚拟主机方式运行，以便Nginx能够将请求正确路由到对应的项目。以下是配置Nginx虚拟主机的步骤：

打开Nginx的配置文件，通常位于 /etc/nginx/nginx.conf 或 /etc/nginx/conf/nginx.conf。
在配置文件中找到 http 块，添加以下内容：

server {
    listen 80;
    server_name your-domain.com; # 将your-domain.com替换为你的域名或ngrok分配的域名

    location / {
        proxy_pass http://localhost:your-port; # 将your-port替换为项目运行的端口
    }
}

保存并关闭配置文件。
检查Nginx配置是否正确：sudo nginx -t
重启Nginx以使更改生效：sudo systemctl restart nginx

现在，你的项目将通过域名访问，例如 http://your-domain.com。
在这里插入图片描述
这里如果是用集合工具包运行的就更加方便了，直接在这里修改就可以将项目通过域名访问。

3. 配置ngrok进行内网穿透

在本地开发中，你需要让微信服务器能够访问你的本地项目。ngrok是一个用于创建安全内网穿透的工具。

这里我们用的是natapp的免费通道来测试，对于测试用的已经够用了，唯一不好的地方就是每次退出重启后域名是会重新分配的。麻烦是麻烦了点，但是免费啊，但是这里说明一下，大家有能力还是要支持一下官方的付费版的。

请按照以下步骤配置ngrok：

打开终端，导航到ngrok所在目录。
运行以下命令启动ngrok并映射到本地项目：

ngrok http your-port

这将创建一个隧道，并为你分配一个公开的域名，如 http://32012c52.ngrok.natapp.cn。

确保 http://32012c52.ngrok.natapp.cn 可以访问你的本地项目。

4. 微信公众号配置

在微信公众号后台进行如下配置：

接口配置信息

URL：http://32012c52.ngrok.natapp.cn/xxxx（xxxx根据你的项目情况而定）
Token：自定义的令牌
AppID：你的微信公众号的AppID
AppSecret：你的微信公众号的AppSecret

网页授权获取用户基本信息

域名：确保填写准确的 32012c52.ngrok.natapp.cn

5. 网页授权开发

网页授权允许你获取用户基本信息，包括用户的openid。在微信公众号开发中，这是一个重要的步骤。请按照以下步骤进行网页授权开发：

创建一个网页链接，用于用户授权。链接的格式如下：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=YOUR_APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

其中，YOUR_APPID是你的微信公众号的AppID，REDIRECT_URI是你的网站的回调URL，snsapi_userinfo表示要获取用户基本信息。

用户点击链接后，将被重定向到微信登录页面，并要求用户授权。用户同意后，将被重定向回你的回调URL，同时附带一个code参数。
你的服务器接收到code参数后，可以使用它来获取用户的openid和其他信息。这通常需要发送HTTP请求到微信服务器，通过code来获取access_token，然后使用access_token来获取用户信息。