首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前后端分离状态下,如何搭建微信公众号网页的本地开发环境?

前后端分离状态下,如何搭建微信公众号网页的本地开发环境?

作者头像
房东的狗丶
发布2023-03-09 14:58:14
5450
发布2023-03-09 14:58:14
举报
文章被收录于专栏:友人a的笔记丶友人a的笔记丶

需求分析

进行微信公众号网页开发的时候,微信平台一般有如下几个要求:

  1. 必须是https协议
  2. 通过验证的可信域名

开发过程中一般有如下几个需求:

  1. 本地开发,正常调用微信API,实时调试。
  2. 和正常浏览器一样的开发体验。

开发环境配置

1.基础设置

构建工具都自带了web服务器,但是对于配置https以及自定义域名不是很友好。所以一般通过反向代理来实现自定义域名以及https:

假设开发服务器地址为:http://192.168.2.3:8081,通过Nginx进行反向代理,Nginx配置如下:

location / {
	proxy_pass http://192.168.2.3:8081;
}

将指定域名解析到局域网IP或者127.0.0.1,然后绑定到本地Nginx站点,这样就可以通过Nginx绑定的指定域名访问开发服务器了。

然后把这个域名添加到微信公众号的可信域名,同时在Nginx配置好https。

此时已经可以在微信开发者工具内,正常访问开发环境,并调用微信js Api。

2.问题解决

通过反向代理服务器访问后,会导致用于实时刷新的websocket无法正常链接,所以我还需要对开发服务器的websocket进行反向代理。

为了避免和上一个反向代理配置产生冲突,我们需要对websocket的访问地址进行一些调整,vite配置为例:

server: {
        host: "0.0.0.0",
        port: 8081,
        hmr: {
            path: "/ws"
        }
}

上面将websocket地址调整到了ws目录,所以可以在Nginx内新增一个配置块进行反向代理:

location /ws {
     proxy_pass http://192.168.2.3:8081;
     proxy_http_version 1.1;
     proxy_read_timeout 3600s;
     proxy_send_timeout 300s;
     proxy_set_header Upgrade $http_upgrade;
     proxy_set_header Connection "upgrade";
}

Ok,大功告成! 尝试一下你会发现微信公众号网页开发原来也可以如此丝滑!

3.手机端访问

将手机(wifi)和用于开发的电脑连接到同一个局域网,将指定域名解析到你本地的局域网IP,一切准备妥当之后,可以直接在手机微信端访问本地开发环境的服务器地址。

相关拓展

同样的企业微信开发也可以通过同样的方法来实现上述需求!

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 需求分析
  • 开发环境配置
    • 1.基础设置
      • 2.问题解决
        • 3.手机端访问
        相关产品与服务
        云开发 CLI 工具
        云开发 CLI 工具(Cloudbase CLI Devtools,CCLID)是云开发官方指定的 CLI 工具,可以帮助开发者快速构建 Serverless 应用。CLI 工具提供能力包括文件储存的管理、云函数的部署、模板项目的创建、HTTP Service、静态网站托管等,您可以专注于编码,无需在平台中切换各类配置。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档