The method of obtaining the public account openId by embedding the applet in the H5 page

Step 1: Log in to the applet on the WeChat public platform and add the domain name of the h5 URL to the business domain name

Setting reason: After configuring as a business domain name, you can call the web-view component to open it in the applet

Setting path: log in to the WeChat public platform -> find the development management on the left menu bar -> development settings -> find the business domain name

Setting method:

1. Click the Modify button

2. Scan QR code verification with developer permission on WeChat

 3. Download the verification file and put it in the root directory of the server corresponding to the h5 domain name (let the backend operate after downloading the file) and then click the + sign to configure the h5 domain name as a business domain name

Step 2: Create a new blank page in the applet and use the webView component to pass in the path

let url = 'https://xxxx.com?id=' + 你需要带的参数

this.src =`https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号appid&redirect_uri=${encodeURIComponent(url)}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`

Path resolution:

1. https://open.weixin.qq.com/connect/oauth2/authorize

This is the fixed path of WeChat

2. appid: the appid of the WeChat official account 

3. redirect_uri: redirection path, put the h5 path after the equal sign of redirect_uri If the h5 page uses a hash path, you need to use encodeURIComponent to encode, because WeChat will intercept and delete all fields after # by default, which will lead to access report error

        Notice:

                a. The domain name needs to be configured as a business domain name on the WeChat official account

                b. If you need to jump with parameters, you can use it directly after the h5 path?

4. response_type: Response type, the user agrees to authorize, get the code, and fill in the code directly

5. Scope: Application authorization scope, snsapi_base (does not pop up the authorization page, directly jumps, and can only obtain the user’s official account openid), snsapi_userinfo (pops up the authorization page, and can get the nickname, gender, and location through openid. And, even in In the case of not paying attention, as long as the user authorizes, the information can also be obtained)

6. state: The state parameter will be included after redirection, and the developer can fill in the parameter value of a-zA-Z0-9, up to 128 bytes

7. #wechat_redirect: Whether you open it directly or do a page 302 redirection, you must bring this parameter

8. Attach the official WeChat document: Web Page Authorization | WeChat Open Documentation

Step 3: How to get the passed parameters on the h5 page

1. Define a function to obtain the required parameters through the address bar

getParameterByName (name, url) {
	if (!url) url = window.location.href;
	name = name.replace(/[\[\]]/g, "\\$&");
	//匹配所有符合条件的，并取最后一个
	var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)", 'g');
	var results = url.match(regex);
	var tempResults = results != null && results[results.length - 1] != undefined ? results[results.length - 1] : '';
	var finalResults = regex.exec(tempResults);
	if (!finalResults) return "";
	if (!finalResults[2]) return '';
	return decodeURIComponent(finalResults[2].replace(/\+/g, " "));
}

// name: 你需要从地址栏中获取到的数据字段，例如：id、code等等 必填
// url: 需要从什么链接中获取字段 非必填

2. Use the above functions to obtain the required data and perform the required operations

//获取openId
getOpenIds () {
    let code = this.getParameterByName('code')    // 这个code就是用户的公众号openid
    let id = this.getParameterByName('id')    // 这个id就是从小程序跳转时带的参数

    // 进行需要的操作
    this.bindOpenId(code, id).....
}