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

前言

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

缘由一

微信公众号配置的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… 就会访问电脑上的前端服务，而且是热重载。经过更改前端服务器的转发地址就能够变化访问后端服务器。 这样就很方便调试了。