1.前置知识点
1.1 默认端口为80
localhost === localhost:80
www.baidu.com === www.baidu.com:80
微信安全域名不能带上端口号 所以我们得将前端项目在80端口上访问
即监听80端口然后转发到npm run dev 时真正的端口
1.1.1 这里要解决两个问题
- 80端口
- 跨域
这里提供两个解决方法，本篇教程将使用nginx的方法解决
- 将webpack的devServer配置成 在80端口上访问然后在node后台上设置 cros *
- 前端和后台不做额外配置 将nginx监听80端口然后转发前端页面和后台接口到相应的端口
1.2 微信sdk在配置了安全域名后才能使用
1.2.1 解决方法
natapp可以将本地访问前端项目的地址穿透到外网
1.2.2 注意点
因为我们使用了nginx转发 所以我们前端项目下在本地的访问地址的端口号80
image
2.主要有一下几步
- 安装微信sdk
- 配合natapp配置微信安全域名
- 使用nodejs编写微信后台
- 使用nginx转发接口
- 微信开发者工具上测试
- 将配置微信分享的代码发布到npm包
2.1 安装微信sdk
yarn add weixin-js-sdk
2.2 配合natapp配置微信安全域名
natapp可以穿透本地端口
将http://iamtyt.natappfree.cc/ 穿透到本地前端开发时的端口 127.0.0.1:80
这边<b>注意</b>要将本地端口号改为<b>80</b>因为在“4.使用nginx转发接口”中项目将在80端口上进行开发
2.3 使用nodejs编写微信后台
2.4 使用nginx转发接口
这里说一下为什么要使用nginx
微信安全域名不能带上端口号（默认为80）所以要讲默认端口号转发到开发时（npm run dev）的端口
当项目在80端口上打开时发生请求会出现跨域问题，所以将/api/开头的地址也转发到node服务（node index.js）的端口
nginx的配置
server {
# 监听80端口号
listen 80;
location / {
# 把页面的请求转发到前端服务所在的端口
proxy_pass http://192.168.4.13:8081;
}
location /api/ {
# 把接口的请求转发到后端服务所在的端口
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://192.168.4.13:3000;
}
}
