前端微信公众号本地开发授权全过程（图文）

最近用uni-app开发公司的公众号项目，授权这块踩了不少坑，在这记录一下本地开发授权的全过程。

一般做登录验证的时候前端都需要给后端传一个code，这个code需要授权才能取，在本地开发时授权这一步要做的准备工作比较麻烦。

1、准备开发的测试号

1.1、登录公司的公众号看一下接口权限

确保这里有权限，再点修改填公司项目域名（这一块一般给后端填）
个人的服务号没有这个权限，需要企业认证才行

1.2、把用来开发的微信账号添加为开发者

1.3、申请一个测试号，直接用你用来开发的微信扫码

进入到测试号管理页面，接口配置信息可以写，可以不写。

JS接口安全域名的ip填写你本机的ip要加端口号，不加http。

把用来开发的微信账号扫这个码，扫出来的测试号关注一下就可以。

其他没提到的地方就不用管了。

1.4、修改网页授权的地址

还是一样填写本机ip加端口号，不加http。

2、授权代码

我是写在路由钩子里，每次跳转页面都会检查授权，未授权先授权；授权后拿用户的code做登录验证，未注册跳转注册页，注册后跳转信息页。

2.1、检查授权

//从路径中把用户的code截取出来的方法
const getUrlParam=(name)=> { //封装方法
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
	var r = window.location.search.substr(1).match(reg); //匹配目标参数
	if (r != null) return unescape(r[2]);
	return null; //返回参数值

}
let code = getUrlParam('code')
复制代码

如果code不为空就是用户已授权，接下来做登录验证操作，一般都是用后端的登录验证接口，把获取的code传过去；如果code为空，就证明用户没授权，接下来进行授权操作。

2.2、授权

//授权
let appid = 'xxx'  //在上一步你用来注册成测试号的appid
let local = 'http://192.168.1.33:8080' //要加http，要加端口号
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid +
			'&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
//登录验证
if(code){...}
复制代码

会跳出来一个页面请求你的授权，由于我授权过，这一步就不截图了，授权完就可以继续登录验证了。

3、常见错误

3.1、redirect_uri 参数错误

Ⅰ、微信测试号上没有配置授权回调域名
    回看1.4步
Ⅱ、配置的授权回调页面域名跟请求时带着的参数不一样
    回看2.2步
Ⅲ、本地开发有端口，配置的回调域名没有带着端口
    回看第1步全过程
复制代码