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

您所在的位置:网站首页 微信开发教程 微信公众号开发与本地调试详细教程

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

2024-07-09 14:18| 来源: 网络整理| 查看: 265

在进行微信公众号开发时,本地调试是一个关键的步骤。本文将详细介绍如何进行微信公众号开发并在本地环境中进行调试。我们将以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:你的微信公众号的AppIDAppSecret:你的微信公众号的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来获取用户信息。

6. 测试JS SDK

如果你的项目中使用了微信的JS SDK,确保在微信公众号后台配置了安全域名,将域名准确地填写为 32012c52.ngrok.natapp.cn,没有多余的字符。然后,你可以测试JS SDK是否正常工作。

当然也可以用我们之前提到的在线测试公众号。

结语

通过本文提供的详细教程,你可以顺利进行微信公众号开发并在本地环境中进行调试。确保配置准确无误,并随时检查常见错误以确保开发顺利进行。龙哥祝你在微信公众号开发中取得成功!



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3