前言

微信公众号网页开发的真机调试一直是很头疼的事情。

原因一

微信公众号配置的JS安全域名只有三个，一个大中型的公众号这三个JS安全域名都是生产的域名，不可能预留域名用于开发和调试。

原因二

在微信里面只有访问正确的安全域名才能调用wx.config用来调用微信的接口。调试器和真机有差异。

原因三

在实际的开发中我们不可能写一部分代码上传到生产的服务器上再用真机调试，这样是非常麻烦的事情。

解决方案

通过微信里面的链接访问本地的前端服务进行真机调试。

step1

假如我们用vue-cli3.0作为开发框架，我们需要把端口号改成80端口，则需要配置vue.config.js里面的devServer。

  devServer: {port: 80, // 前端服务端口disableHostCheck: true,proxy: { // 转发配置'/evcard-ams/api': {target: 'http://csms-st.vip:180', // 测试或者开发服务器ws: true,changeOrigin: true,pathRewrite: {'^/evcard-ams/api': '/evcard-ams/api',},},},},
复制代码

我们在安装好依赖包后，npm run dev的时候终端会显示出本地ID。在终端运行IPconfig也可以获取到。

图片中 10.2.11.150 是本地IP地址。

step2

改变 hosts 文件

hosts的文件目录 C:\Windows\System32\drivers\etc

这样本地可以访问 csms.xxx.vip/you-app-name 就可以访问前端项目了。

step3

安装 Fiddler

如图进行设置将端口号设置成8888

step4

手机和电脑必须在同一个局域网下面，手动更改手机代理。

10.2.11.150 是电脑的本地IP地址， 8888 是Fiddler的端口地址。

step5

现在手机微信里面访问 csms.xxx.vip/you-app-nam… 就会访问电脑上的前端服务，并且是热重载。通过更改前端服务器的转发地址就可以变化访问后端服务器。这样就很方便调试了。

微信公众号网页开发——实用真机调试相关推荐

前端对接微信公众号网页开发流程，前期配置
微信公众号网页开发,其实就是我们开发的h5网页需要放到微信浏览器环境中使用,但是需要对接公众号授权,授权之后可以获取到用户的个人信息,以及可以使用公众号提供的一些API,如:图片上传.图片预览.获取位 ...
前端对接微信公众号网页开发流程，授权对接
前面讲到前端对接微信公众号网页开发流程,前期配置,本篇文章主要详细介绍关于公众号的授权对接. 一.引入微信js-sdk 在需要调用 JS 接口的页面引入如下 JS 文件 http://res.wx. ...
前端对接微信公众号网页开发流程，JSSDK使用
前面两篇文章讲解了前端对接微信公众号网页开发流程,前期配置和前端对接微信公众号网页开发流程,授权对接,本篇文章讲解关于微信JSSDK的使用,官方文档地址一.通过 config 接口注入权限验证配 ...
php公众号开发配置网页域名,微信公众号网页开发授权配置流程
1.配置 1.1 公众号配置 1.2 开发者账号配置选择开发者工具->web开发者工具->绑定开发者微信账号. 1.3 开发域名配置选择公众号设置->功能设置,根据需求设置:业务 ...
微信公众号网页开发：播放视频，在列表中滑动会脱离文档流
项目场景: antd移动端端开发微信公众号移动端网页开发问题描述: video-react有问题,在跑马灯中第一次白屏,在列表中滑动会脱离文档流原因分析: 未知解决方案: 直接上代码 < ...
有关于微信公众号网页开发的流程（自己的看法）
微信官方文档 (真的很详细) 第一步: 网页授权回调域名网页服务内容这个网页回调域名是非常关键的,后面会讲解这个回调的域名的使用,回调字面意思就是会跳转的. 第二步: 使用微信官方的api进行co ...
企业微信公众号网页开发之引入高德地图API
test.jsp 页面文件 WxController.java 后端Controller层代码 WxService.java 后端Service层代码 WxDao.java 后端Dao层代码一.JS ...
微信小程序云开发路由模块真机调试报错
问题一:没有npm i在文件夹目录下npm i一下问题二:更新完后没有上传云函数问题三:在package.json导入tcb-router版本. 简易演示云函数路由化 npm install -- ...
vue3+vant开发微信公众号网页爬坑不完全指北
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群前言 8月底的时候接到了一个微信公众号网页开发的任务, 在此之前我从没开发过微信公众号网页的项目, 心想这回又能学到新东西了, 然后又是移 ...

微信公众号网页开发——实用真机调试

前言

原因一

原因二

原因三