h5 微信公众号本地调试【内网穿透】前端uniapp 后端java springboot

2024-06-04 6828阅读

一、开发工具

二、前端域名转发（比如浏览器访问www.baidu.com 实际访问的是本地 ip）

三、服务器内网穿透（比如接口访问www.baidu.com 实际访问的是本地 ip）

四、前端接口转发代理

先看效果

背景：本地开发，怎么使用微信开发者工具调试本地接口呢，因为微信开发者以及微信后台都是需要https认证的域名，否则code和openId无法获取

一、使用微信开发者，切换公众号开发模式

二、本地前端映射因为微信公众号开发本地调试不方便，如果使用ip访问，则无法调用后台服务，需要映射

1、修改本地hosts文件

查看本机的内网ip

找到 C:\Windows\System32\drivers\etc 下的hosts文件，修改如下

如果提示没有权限保存，将hosts文件拖拉至桌面，用编辑工具打开后，编辑，保存，再拖拉回 C:\Windows\System32\drivers\etc

2、刷新DNS缓存

cmd执行 ipconfig /flushdns ，这样可以刷新DNS缓存，使刚刚修改的hosts文件及时生效

ipconfig /flushdns

最终效果，访问www.abc.com:81 将会访问到的是你本地的localhost:81

三、后台代码启动后

1、编写服务代码，完成微信服务器配置

如图

代码如下

/**
 * 微信服务调用接口
 */
@Controller
@RequestMapping("/wechat")
public class WeChatTest {
    private static String wxToken="flzabc123";
    @GetMapping("")
    public void weChatTestV(HttpServletRequest request, HttpServletResponse response) {
        // 1、验证消息的确来自微信服务器
        String signature = request.getParameter("signature");
        String timestamp = request.getParameter("timestamp");
        String nonce = request.getParameter("nonce");
        String echostr = request.getParameter("echostr");
        //将微信echostr返回给微信服务器
        try(OutputStream os = response.getOutputStream()) {
            String sha1 = getSHA1(wxToken, timestamp, nonce, "");
            //和signature进行对比
            if (sha1.equals(signature)){
            // 返回echostr给微信
                os.write(URLEncoder.encode(echostr, "UTF-8").getBytes());
                os.flush();
                
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    /**
     * 用SHA1算法生成安全签名
     *
     * @param token     票据
     * @param timestamp 时间戳
     * @param nonce     随机字符串
     * @param encrypt   密文
     * @return 安全签名
     * @throws Exception
     */
    public static String getSHA1(String token, String timestamp, String nonce, String encrypt) throws Exception {
        try {
            String[] array = new String[]{token, timestamp, nonce, encrypt};
            StringBuffer sb = new StringBuffer();
            // 字符串排序
            Arrays.sort(array);
            for (int i = 0; i  
编写好接口后,接着启动服务,启动springboot,这里暴露的是8882端口  
2、内网穿透 
这里我们使用cpolar内网穿透，将本地服务映射到公网，无需公网ip，也不用设置路由器，操作非常简单。【cpolar.cn已备案】 
2.1 下载cpolar 并安装 
 
 cpolar官网：cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站 
 
访问cpolar官网，注册一个账号，并下载安装cpolar客户端。详细可以参考文档教程进行下载安装.  
 
2.2 cpolar安装成功后，我们在浏览器上访问本地9200端口，登录Cpolar的web ui界面:http://localhost:9200。 
点击左侧仪表盘的隧道管理——创建隧道，我们来创建一条隧道，将在本地8882端口下的web服务映射到公网：

隧道名称：可自定义，注意不要与已有隧道名称重复
协议：http协议
本地地址：8882
域名类型：免费选择随机域名
地区：选择China VIP

提示隧道创建成功后，页面自动跳转至隧道列表，可以看到刚刚创建成功的tunnel-1隧道，状态active，表示为正常在线，注意无需再次点击启动。

点击左侧仪表盘的状态——在线隧道列表，可以看到刚刚创建的隧道已经有生成了相应的公网地址，一个http协议，一个https协议（免去配置ssl证书的繁琐步骤），均可以访问到本地web服务，复制公网地址。

2.3、测试公网访问

打开微信公众平台公众号页面,点击下面的基本配置,在URL框中填写复制的公网地址,

注意

如果这里你用的是接口级，如 xxx:8882/wx/wx，则平台公众号页面基本配置要填接口级别的，否则微信后台会提示保存失败，url错误



并且确保你的服务已经启动，否则微信后台会提示校验失败

点击启用服务器配置,出现操作成功表示启用成功



四、前端接口域名转发
- 打开uniapp的公众号项目，打开manifest.json文件的源码视图，将以下配置项配入其中
```
    "h5" : {
        "devServer" : {
            "port" : 80, //端口号
            "disableHostCheck" : true,
            "proxy" : {
                "/hailiaowenan" : {
                    "target" : "https://xxxx", // 后台服务器的ip地址 - 内网穿透
                    "changeOrigin" : true, //是否跨域
                    "secure" : false, // 设置支持https协议的代理
                    "pathRewrite" : {
                        "^/hailiaowenan" : ""
                    }
                }
            }
        }
    },
```
  遇到的其他坑
  
  
  
  因为本地启动了多个项目，一开始使用的是www.xxx.com:81，但是注意，这里不能携带端口，要
  
  确保你的项目是默认使用80端口，这样域名访问的时候，就不用携带端口了
  
  此外，还要在微信公众号后台配置
  
  
  
  至此，大功告成
  
  
  
  参考文章
  
  uniapp公众号进行本地授权与调试_choosewxpay:没有此sdk或暂不支持此sdk模拟-CSDN博客
  
  开发微信公众号本地调试【内网穿透】_公众号调试-CSDN博客
  
  微信公众号授权登录后报redirect_uri参数错误的问题-CSDN博客