Wechat H5 official account to get openid climbing account

Before ： The authorization of official account that has been done before is usually at the time of login , Recently, I came across a direct wechat to open the link sent by the enterprise wechat to enter the appointment page , When you need to enter, check whether the current wechat user has made an appointment for the corresponding application , If so, jump to index List page for , If not, leave it on the current appointment page ！ Therefore, wechat users need to access wechat's internal applet / The unique identification of the user generated by the official account openid To query whether there is a corresponding data list ！

In fact, when I didn't pay attention to the official account , User access to official account page , It will also produce a unique user and official account. OpenID

preparation ：
1、 Certified official account （ Enterprise number can , Personal number cannot be bound H5 Of ）, And get the official account appid
2、https Authentication domain name , The callback address cannot be configured in wechat without authenticated domain name , And the relevant domain name authorized by the webpage is configured in the background of official account , If not redirect_uri The domain name is still inconsistent with the background configuration 10003
3、 Wechat public platform certification passed , And create app
4、 Logic diagram ：

Implementation steps ：
1、 Finally, the address that needs to be spliced ：

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

2、 Enter wechat to get code, It can only be initiated in wechat client , There are two ways ,scope=snsapi_base（ Can only get openid, And it is obtained silently , There is no pop-up window ）,scope=snsapi_userinfo（ There are pop ups , You can not only get openid, You can also get the basic information of users' wechat ）
3、 obtain code Intercept the link after success ！ Use code Exchange with the backend openid!

The final code ：

// This is a layer of judgment that must be processed in order to be compatible with other business logic 
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); //  Whether the mobile terminal 
	var isWx = /micromessenger/i.test(navigator.userAgent); //  Wechat or not 
	var isComWx = /wxwork/i.test(navigator.userAgent); //  Is it enterprise wechat 
			            
	if (options.id) {
    
			this.id = options.id;
			this.getDetail(options.id)
	} else if (!options.id && !options.type && isWx && isMobile) {
    
			this.getCode()
	}
}

getCode() {
    
	let appid = "XXXXXXXX"; // Personal developers appid 
	let redirect = encodeURIComponent(`https://XXXXXXX.com/pindex.html#/visitor/appointment/appointment`); 
	let wx_code = this.getUrlParam("code"); //  Intercept url Medium code
	if (!wx_code) {
    
	    // The return address will be in redirect On the basis of carrying a splice code Redirected back 
		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); // hold code Send it to the background to get users 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;
},

Pit summary ：
1、 The first mistake you will make ： The background domain name is not configured 、appid Wrong writing 、redirect If you make a mistake, you will not be redirected back 、 Every time I come in, it's wrong wx_code Judgment will continue to flash …
2、480001：api Function not authorized ：scope=snsapi_base Time is silent , The authorization interface does not pop up , Only users can be obtained openid, here api Not authorized by user , So you have to pull user information , It will pop up 480001. If you want to pull user information, please use snsapi_userinfo, When the user enters the page, the authorization confirmation interface will pop up
3、 obtain openid The requested backend domain name is http Of , Android system can adjust the background interface , And you can get openid Come back ！ But in Apple system
Will request timeout ！ Compared with most days , All parameters are the same , Later, it was changed back to https The agreement will do ！