微信H5公众号获取openid爬坑记

前要： 之前做过的公众号授权一般是在登录时的，最近遇到一个直接微信打开企业微信发过来的链接进去预约页面，需要进来时查询当前微信的用户有没有预约过对应的申请，如果有就跳转到index的列表页，没有的话留在当前的预约页！所以需要用到微信用户访问微信内部的小程序/公众号产生的用户唯一标识openid来查询有没有对应的数据列表！

其实在未关注公众号时，用户访问公众号的网页，也会产生一个用户和公众号唯一的OpenID

准备工作：
1、已经认证的公众号（企业号可以，个人号是不能绑定H5的），并且获取公众号的appid
2、https认证域名，没有认证的域名微信中不能配置回调地址，并且公众号后台配置网页授权的相关域名，要不会报redirect_uri域名还是与后台配置不一致 10003
3、微信公众平台认证通过，并创建app
4、逻辑图：

实现步骤：
1、最终需要拼接成的地址：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect}&response_type=code&scope=snsapi_base&state=#wechat_redirect
1

2、进来微信获取code,只能在微信客户端中发起，其中有两种方式，scope=snsapi_base（只能获取openid,并且是静默获取的，没有弹窗），scope=snsapi_userinfo（有弹窗，不仅仅可以获取openid，还可以获取用户微信的基本信息）
3、获取code成功后对链接进行截取！使用code去和后端换取openid!

最终代码：

//这为了兼容其他业务逻辑必须要处理的一层判断
onLoad(options) {
    var isMobile = window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i); // 是否手机端
	var isWx = /micromessenger/i.test(navigator.userAgent); // 是否微信
	var isComWx = /wxwork/i.test(navigator.userAgent); // 是否企业微信
			            
	if (options.id) {
			this.id = options.id;
			this.getDetail(options.id)
	} else if (!options.id && !options.type && isWx && isMobile) {
			this.getCode()
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13

getCode() {
	let appid = "XXXXXXXX"; //个人开发者appid 
	let redirect = encodeURIComponent(`https://XXXXXXX.com/pindex.html#/visitor/appointment/appointment`); 
	let wx_code = this.getUrlParam("code"); // 截取url中的code
	if (!wx_code) {
	    //回来的地址中会在redirect基础上携带拼接上一个code重定向回来的
		window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect}&response_type=code&scope=snsapi_base&state=#wechat_redirect`;    
	} else {
			this.getOpenId(wx_code); //把code传给后台获取用户openid
	}
},
getUrlParam: function(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	var r = window.location.search.substr(1).match(reg);
	if (r != null) return unescape(r[2]);
		return null;
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

踩坑总结：
1、第一次会犯的错：没有配置后台域名、appid写错、redirect 写错会重定向不回来、每一次进来不对wx_code进行判断会不断得闪…
2、480001：api功能未授权：scope=snsapi_base时是静默的，不弹出授权界面，只能获取用户openid，此时api未获得用户授权，所以你要拉取用户信息，就会弹出480001.如果要拉取用户信息请用snsapi_userinfo,当用户进入页面会弹出授权确认界面
3、获取openid时请求的后端域名是http的，安卓系统可以调后台的接口，并且可以获取openid回来！但是在苹果系统中
会请求超时的！对比了大半天，所有参数一样的，后来改回https协议就可以了！