【微信开发】本地调试微信网页授权

本篇介绍一下，微信公众号开发过程中，在微信开发者工具中如何进行本地调试网页授权功能。

1. 如果没有nginx，需先安装nginx

// 可以先查询是否有安装过
brew search nginx

// 如果未安装，执行以下命令安装
brew install nginx

// 检查nginx是否安装成功
nginx -v

2. 修改nginx配置文件

cd /usr/local/etc/nginx
vim /nginx.conf

// 修改nginx.conf文件
server {
        listen       80;
        server_name  xxx.xxx.com; // 把这里改成微信公众号配置的网页域名，，此处仅为举例

        access_log  /tmp/host.access.log  main;
        
        // 把本地的页面转发到配置的域名上
        location / {
            // 这里配置页面的域名+端口号，此处仅为举例
            proxy_pass http://xxx.xxx.com:3000/;  
        }
        
        // 这里可以配置接口转发代理
        location /xxx/ {
            proxy_pass http://xxx.xxx.xxx.xxx:8887; // 接口的域名+端口号，此处仅为举例
        }
    }

3. 修改hosts文件

//  打开host文件
vim /etc/hosts

// 插入域名配置
127.0.0.1       xxx.xxx.com

4. 启动nginx

// 启动nginx
[sudo] nginx

// 更改配置文件需重启nginx
[sudo] nginx -s reload

// 停止nginx
[sudo] nginx -s stop

5. 打开微信开发者工具，选择“WeChat Web Pages”开发模式

在地址栏中输入公众号配置的网页域名，然后回车，就会跳转授权页面。

如果想要在手机上调试，只需要将手机连接Charles代理，然后直接访问域名即可

本地调试的这个方法，主要利用了nginx反向代理来实现。