最近在用react开发一个公众号产品。以前没有过开发公众号的经验,在这里记录一下过程中踩过的坑。
这个项目是前后端开发的。本篇文章只站在前端的视角,希望给大家一个参考
一.授权回调
微信授权过程
- 进入你的程序
- 跳转至微信授权接口
- 用户确定授权
- 重定向至你的程序
访问微信授权接口
这里注意使用window.location.href 而不是window.open去访问接口,不然可能会拦截弹出的新窗口
授权接口的路由需要和重定向的页面不同
如果调用授权的页面和配置的redirect_uri是同一个页面,会出现从redirect_uri页面后退时,又重新进入到调用授权页,导致无法退出的问题。
解决办法:可以写一个auth.js专门用于访问授权接口
http://pppercywang.com/auth -> 授权接口 -> http://pppercywang.com/home
Auth.jsx
componentWillMount(){
let uuid = ""
if(sessionStorage.getItem("uuid")!=null){
uuid = sessionStorage.getItem("uuid")
}else{
uuid = this.uuid(32,8)
}
window.location.href = `http://zb.weaaacc369.com/api/Activity/auth.html?uuid=${uuid}`
sessionStorage.setItem("uuid",uuid)
}
访问授权页面时会出现请在微信客户端打开链接。我门可以使用微信开发者工具的公众号网页访问你的程序即可。
二.内网穿透
开发公众号一定要解决的一个问题就是内网穿透,不然后端每次都重定向到你部署前端程序的那台服务器。那你每次修改代码都需要重新部署。让其重定向至你本地的程序。这里大家可以使用花生壳进行内网穿透。是免费的
但是在本地肯定是需要设置跨域代理的。react可以直接在package.json中添加
"proxy":"http://zb.aaa.com/",
但是当你访问:26072r546n.qicp.vip时会出现Invalid Host header
因为新版的webpack-dev-server出于安全考虑,默认检查hostname,如果hostname不是配置内的,将中断访问。
解决办法:
1.在webpackDevServer.config.js中将disableHostCheck=true
2.在package.json配置的proxy会与其冲突,导致配置不生效。将其删除。使用http-proxy-middleware进行跨域代理
安装 http-proxy-middleware 插件:
$ npm install http-proxy-middleware --save
$ # 或
$ yarn add http-proxy-middleware
创建 src/setupProxy.js 并将以下内容放入该文件中(配置修改成自己的):
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(proxy("/api",{
"secure": false,
"target": "http://zb.weikes2369.com/",
"changeOrigin": true
}));
};