前言
之前做微信code获取的调试都是部署到服务器上比较麻烦。这次总结了一下前端怎么在本地就能获取微信code。本项目是在mac上用react开发,所以教程内容偏向这俩。内容仅供参考,有更好的办法可以留言,互相学习一下~
准备工作
- 有资质的公众号。并加入你为开发者。
- 备案的域名。
- 微信开发者工具。
- 查看微信文档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
修改项目配置
在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;
修改端口号
将本地项目启动的端口号改为443,这样不加端口号也能访问本地项目。
我是react 项目 ,找到scripts/start.js
// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 443;
package.json
"start": "set PORT=443 node scripts/start.js",
重启项目即可用域名访问本地项目。
如何将本地项目http改为https
https需要证书,所以我们通过在本地配置一个证书来实现https。
配置过程
macOS 使用 brew 安装 mkcert
安装 brew 命令
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" //推荐1中科大
安装mkcert
brew install mkcert
brew install nss
windows 使用 scoop 安装 mkcert
scoop bucket add extras
scoop install mkcert
创建 CA 证书到本地
在终端中执行:
mkcert -install
生成证书( localhost 127.0.0.1 后面还可以空格添加其他域名或IP地址)
mkcert localhost 127.0.0.1 域名
找到证书 rootCA.pem
mkcert -CAROOT
将CA证书放到react项目中
在项目根目录下新建一个 .cert 文件夹,将 rootCA.pem 文件放入文件夹中
在项目根目录的终端中执行:
mkcert -key-file ./.cert/key.pem -cert-file ./.cert/rootCA.pem “localhost”
效果如下
修改react项目中的启动命令
在启动命令中添加:
HTTPS=true SSL_CRT_FILE=./.cert/rootCA.pem SSL_KEY_FILE=./.cert/key.pem
最终代码如下
"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"
},
重启项目即可,效果如下。
到此为止,你已经可以无需部署服务器,在本地调用微信授权获取code后再重定向回到本地项目了。
获取到code后,我的项目还需调用微信支付,这块目前还的部署服务器在真机上测试。最近发现一个免部署的可以真机测试的内网穿透,研究好再发上来,大家一起讨论。