微信公众号网页登录开发测试步骤详解

需要读者熟悉前端web开发，文章内会讲到电脑需要用到的工具软件

1. 网站项目 用到的开发工具
2. 带Chrome内核浏览器
3. 微信开发者工具

1. 用电脑浏览器访问查看公众号网页开发文档，找到测试号申请入口，JS接口安全域名处点击修改，填入自己的网站域名
   

2. 在登录网页编程下，写好的逻辑需要一个微信客户端判断，JavaScript代码如下

//判断是否是微信内置的浏览器
function isWechat() {
	return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
}
1
2
3
4

3. 还有微信登录的相关逻辑，用到的JavaScript方法代码如下，先判断有没有code，没有就访问获取code

//请求通过微信官方接口 获取code
function getWeChatCode() {
	//获取当前页面地址作为回调地址
	let local = encodeURIComponent(window.location.href);
	let appid = '';//自己填入测试号信息
	//访问设置的回调地址 redirect_uri，会重定向显示带code参数的地址
	window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + 
		"&redirect_uri=" + local +
		"&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
}

//提取地址中的参数值
function getUrlKeyVal(key) {
	let r = new RegExp('[?|&]' + key + '=' + '([^&;]+?)(&|#|;|$)');
	let arr = r.exec(location.href) || [, ''];
	let s = arr[1].replace(/\+/g, '%20');
	return decodeURIComponent(s) || null;
}

//检查地址栏中的code
function checkWeChatCode() {
	let code = this.getUrlKeyVal('code')
	if (code) {
		//TODO: 接下来，调用请求后台接口 传参code...
	}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

4. 获取到code后，访问后台接口，后台的业务逻辑，就用HTTP请求接口返回数据处理即可，以下是给出的访问接口，具体请看微信公众号开发文档

//自己填入测试号信息
let wxApp = {
	appId: "",
	appSecret: "",
};

//后台要HTTP请求url，获取openid，还有 access_token ...
let url = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${wxApp.appId}&secret=${wxApp.appSecret}&code=${code}&grant_type=authorization_code`;

let openid, access_token = "";
let url2 = `https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openid}&lang=zh_CN`;
//后台要HTTP请求url2, 获取用户信息

1
2
3
4
5
6
7
8
9
10
11
12
13

5. 模拟微信客户端访问，请打开微信开发者工具，选择公众号网页开发，输入开发中的网页登录地址，然后访问，如下图
   

6. 如果遇到错误，会出现如下图 redirect_uri 参数错误，
   

解决方法：找到 网页帐号 网页授权获取用户基本信息，点击修改，填入 自己的网站登录页面域名

7. 刷新浏览，测试登录成功后，输出控制台打印日志如下图所示，对照user数据部分
   

8. 开发过程非常顺利，完善一下登录功能，到此结束，收工！