微信公众号本地调试

背景

最近在搞微信公众号开发,代码写完之后,需要测试是吧?但有个问题,微信测试的话只能通过域名去测试,这样的话,我们必须要将代码部署到服务器上,并且买个域名映射到服务器地址上。对于个人开发而言,这种方式其实是挺烦的,比如我习惯在本地(本机)进行debug调试,那该如何是好呢?有没有这种方法呢?

前期准备

  1. https://ngrok.com/

内网穿透的工具。(简而言之就是将内网IP映射成对外可访问的域名)也就是将你本地ip改为域名访问

  1. http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

微信公众号测试的帐号,微信登录,只供测试使用

ngrok使用

1. 为什么要使用ngrok

在进行微信开发的时候,需要填写与微信服务器相连接的url才能授权,而且这个url必须是外网域名,也就是我们需要把应用部署到一个外网域名对应的ip服务器上
,本地是没法调试的。所有我们这里需要使用 ngrok获取一个外网域名,然后就可以本地调试。

2.安装ngrok

  1. 下载地址:安装
  2. 注册一个ngrok帐号: 拿到对应的token值(如下图)
    在这里插入图片描述
    3.执行命令
    下载完成后,解压,cmd到对应的目录
    执行:
    ngrok authtoken 1SoZzUAukBLpJGMNNsfHhmSHljx_5ncjqxJzgyWnxZKRYwzzm(自己的token值)
    在这里插入图片描述
    4.启动:
    ngrok http 80(启动成功,如下所示)

在这里插入图片描述
这时候ngrok已经生成了一个外网域名http://d27ee46b.ngrok.io 访问本机localhost:80

微信公众号测试帐号

地址:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
直接微信登录进去。

  1. 验证服务器的正确性:
    在这里插入图片描述
  2. 调用需要的接口(获取token、获取用户信息之类的)

总结

多看看,多研究,总有办法能解决问题

### 微信公众号H5页面本地开发与调试方法 为了实现在本地环境中顺利测试微信公众号的H5页面,需利用微信公众平台提供的Web开发者工具来完成这一过程[^1]。 #### 使用微信开发者工具进行配置 - **安装并启动微信开发者工具** 安装最新版本的微信开发者工具后,在该工具内创建项目时输入公众号服务器地址以及token等必要参数。这一步骤确保了后续能够正常加载和运行H5应用逻辑。 - **设置合法域名** 进入微信公众平台后台管理界面中的“开发”-> “接口权限”,按照指引添加用于测试的URL前缀作为JS接口安全域名。注意这里的域名应指向本地环境可通过外网访问到的服务端口映射地址(例如通过ngrok实现)。此操作允许H5页面内的JavaScript API调用微信特有的功能。 - **启用HTTPS支持** 对于涉及敏感数据传输的操作,如支付等功能,则必须保证整个流程都在加密状态下执行。因此建议采用SSL证书使本地服务具备https协议的支持能力。可以考虑使用自签名证书配合Chrome浏览器的信任机制来进行初步验证。 ```bash # 启动本地HTTP服务器并将流量转发至公网可见位置(假设已安装ngrok) python3 -m http.server 8080 & ./ngrok http 8080 ``` #### 实现跨域资源共享(CORS) 由于浏览器同源策略限制,默认情况下无法直接请求不同源的数据资源。为此可以在Node.js Express框架下简单配置CORS中间件解决这个问题: ```javascript const express = require('express'); const cors = require('cors'); let app = express(); app.use(cors()); // 允许所有来源的跨域请求 // 或者指定特定白名单 // app.use(cors({ origin: 'http://example.com' })); app.get('/api/data', (req, res) => { res.json({ message: "This is a test response from server." }); }); app.listen(process.env.PORT || 3000); ``` 当完成了上述准备工作之后,便能够在微信客户端内部打开由本地搭建起来的网页链接,并借助微信开发者工具实时查看渲染效果、网络请求状态乃至控制台日志输出等内容,从而达到高效便捷地开展H5页面迭代优化工作的目的。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值