前言

之前做微信code获取的调试都是部署到服务器上比较麻烦。这次总结了一下前端怎么在本地就能获取微信code。本项目是在mac上用react开发，所以教程内容偏向这俩。内容仅供参考，有更好的办法可以留言，互相学习一下～

准备工作

1. 有资质的公众号。并加入你为开发者。
2. 备案的域名。
3. 微信开发者工具。
4. 查看微信文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

教程

以上工作准备全，前端就需要实现

其中我们要解决的就是本地项目启动地址改为https+域名，才能调试redirect_uri重定向。

如何将本地项目启动的ip改为域名

修改hosts

找到电脑hosts路径 打开后将127.0.0.1改为 127.0.0.1 域名。

mac系统推荐一个小软件配置hosts很方便 【SwitchHosts】

	//路径
	win C:\Windows\System32\drivers\etc\hosts
	mac  usr/etc/hosts
1
2
3

修改项目配置

在webpack中加入刚配好的域名， 找到node_modules/webpack-dev-server/lib 的Server.js 找到如下处添加修改

 // always allow localhost host, for convience
  // if (hostname === 'localhost') return true;
  if(hostname === "127.0.0.1" || hostname === "localhost" || hostname === "域名") return true;
1
2
3

修改端口号

将本地项目启动的端口号改为443，这样不加端口号也能访问本地项目。
我是react 项目 ，找到scripts/start.js

// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 443;
1
2

package.json

    "start": "set PORT=443  node scripts/start.js",
1

重启项目即可用域名访问本地项目。

如何将本地项目http改为https

https需要证书，所以我们通过在本地配置一个证书来实现https。

配置过程

macOS 使用 brew 安装 mkcert
安装 brew 命令

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"  //推荐1中科大
1

安装mkcert

brew install mkcert
brew install nss
1
2

windows 使用 scoop 安装 mkcert

scoop bucket add extras
scoop install mkcert
1
2

创建 CA 证书到本地

在终端中执行：

mkcert -install
1

生成证书（ localhost 127.0.0.1 后面还可以空格添加其他域名或IP地址）

mkcert localhost 127.0.0.1 域名
1

找到证书 rootCA.pem

mkcert -CAROOT
1

将CA证书放到react项目中
在项目根目录下新建一个 .cert 文件夹，将 rootCA.pem 文件放入文件夹中
在项目根目录的终端中执行：

mkcert -key-file ./.cert/key.pem -cert-file ./.cert/rootCA.pem “localhost”
1

效果如下

修改react项目中的启动命令

在启动命令中添加：

HTTPS=true SSL_CRT_FILE=./.cert/rootCA.pem SSL_KEY_FILE=./.cert/key.pem
1

最终代码如下

  "scripts": {
    "start": "set PORT=443 && HTTPS=true SSL_CRT_FILE=./.cert/rootCA.pem SSL_KEY_FILE=./.cert/key.pem node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },
1
2
3
4
5

重启项目即可，效果如下。

到此为止，你已经可以无需部署服务器，在本地调用微信授权获取code后再重定向回到本地项目了。

获取到code后，我的项目还需调用微信支付，这块目前还的部署服务器在真机上测试。最近发现一个免部署的可以真机测试的内网穿透，研究好再发上来，大家一起讨论。