在本地环境中开发微信公众号网页

微信公众号的网页开发，很大程度上依赖微信生态的用户授权体系。如果需要进行完整的调试，只能在服务器资源和后端技术的支持下进行，即项目程序需要跑在服务端才能体验和调试，然后再根据调试的结果，在线下环境中修改代码，并再次上传到服务端进行调试。虽然微信生态中新加入了云开发的概念，并且引入了devops的概念，提升了开发效率。但对于传统的前后端分离的开发团队（尤其团队中后端技术栈相对固定，没有后端技术升级计划的团队）来说，前端部门开发效率受到了很大的限制和拖累。因此，如何在本地利用好微信的授权机制，将调试过程尽可能迁移到前端开发环境中，将是本文着重探讨的内容。

背景介绍

我司采取的是前后端分离的开发模式，后端技术栈陈旧，且无法根据前端开发需求变更服务器配置。一个生产环境的https域名，根目录访问403。后端技术栈.Net，后端人员做好接口后直接放置到服务器以供调用，前端开发页面后也放置在同样的目录下进行访问。

前端开发的痛点：每次开发过程为线下编写页面，盲绑数据后，包装成aspx上传到服务器运行看调试结果，根据结果再进行本地代码的更改，然后再上传，再调试……周而复始，费时费力。

btw：团队也有小程序开发，但因为前端页面不需要部署在自有服务器，因此开发体验会好很多。

解决思路

在本地开发中，使用webpack-dev-server，一般在localhost:port进行访问。在开发者工具中亦然。但是因为域名认证的问题，在wx.config()的时候会报错误（系统错误，错误码：40048,invalid url domain）。这是因为访问的域名跟appid所对应的安全域名有出入，所以配置失败。

那么，我们如果通过某种方式，访问一个安全域名，同时操作该访问指向本地开发环境，那么在开发者工具中是否能够通过配置呢？

这里想到了反向代理，通过在本地建立一个代理机制，当我们在访问域名的时候，将该域名的访问代理到我们本地，而不是放出去到真实的网络环境里。

于是又马上想到了nginx，但是nginx需要将系统的hosts更改，并且做大量细致的配置编写，这种模式在基础较差的前端团队中并不适合大规模推广。

本着专业事专业软件办的思路，我认识了——Charles。

环境创建准备

• 环境：Windows 10（Mac OS环境类似）
• 工具：Charles Proxy、webpack、微信开发者工具

Charles代理配置

• 安装Charles根证书，以实现https代理

首先，安装并且打开Charles，点击help=>SSL proxying=>Install Charles Root Certificate。

安装根证书

在弹出的证书窗口中，点击安装证书=>下一步。

安装根证书

打开了下面的界面，按照下图顺序点击，完成根证书的安装：

安装根证书

• 配置SSL代理

菜单中点击proxy，按如下顺序操作：

配置SSL代理

按照下图顺序填写需要进行https代理的域名和端口：

配置SSL代理

• 设置Map Remote

在Tools=>Map Remote打开配置界面：

设置Map Remote

Map Remote 配置界面：

设置Map Remote

点击Add添加Map规则：

设置Map Remote

规则解释：

Map From就是你访问的url，可以是服务器地址的https链接；Map To就是你要将前面的url代理到哪里，这里一般是webpack-dev-server所创建的本地服务器。

另外，因为webpack-dev-server会创建一个socket连接来进行热更新，而我们使用的是https，但本地的localhos是没有SSL的，除非自签名证书，但这个确实没有必要，所以需要将wss的请求，也转发到本地的dev-server上，配置示例如下图所示：

设置Map Remote

以上，Charles端的设置就已经完成。

webpack对应的代理配置

module.exports = {
  // ...
  devServer: {
    public: 'xxx.com',   // 强制指定devServer使用xxx.com域名发送请求，兼容wss链接，否则，wss会发送localhost域名请求，导致报错
    proxy: {  // 将本地以/api开头的请求直接代理转发到真实服务器上，以获得真实的数据
      '/api': {
        target: 'https://xxx.com/api',
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
    // ...
  }
  // ...
}

// 其他配置按照项目实际情况设置，与代理环境的关联不大

微信开发者工具设置

将代理地址直接指向本地的8888端口，这也是Charles的默认代理端口，按照下图进行配置即可。

微信开发者工具代理配置

最后，在shell启动dev-server，在微信开发者工具中输入https://xxx.com，此时页面的开发服务跑在本地，授权和数据来源于真实的线上服务，开发从此没有障碍。

后记

此方法适合后端环境比较固定且不易修改的情况，可以顺利的进行微信环境的前端本地开发，开发流程代码的修改直接通过热更新反映在开发者工具中，节省了在服务器之间频繁传输文件的时间，提高了开发效率。

当然，如果有省心的后端团队，可以一起商量建立一套高效的开发环境，这样才能从根本上解决开发效率和出品质量的问题。

最后，如果实在无法忍受后端，也可以直接使用云开发，提升了自己的全栈技能，也节省了后端成本。