Comparta la página H5 con WeChat para obtener información del usuario
Nota: Necesitamos depurar la autorización de la página web de WeChat, y la cuenta de WeChat del desarrollador debe establecer una relación vinculante con la cuenta oficial.Antecedentes del
requisito: para compartir la página H5 con WeChat, las funciones de la página deben iniciar sesión, por lo que se debe invocar el inicio de sesión antes de la operación de la función.
Inicio de sesión autorizado
1. Varias situaciones de inicio de sesión de WeChat:
lado de la PC:
Navegador WeChat del lado de la PC -> Código QR incrustado en la página web (necesita escanear el código, usar el appid y appsecret de la cuenta del servicio WeChat)
Otros navegadores en el lado de la PC -> Vaya a la página de inicio de sesión del código QR de WeChat (requiere escanear el código QR, use la aplicación de la aplicación de la PC y el secreto de la aplicación registrados en la plataforma abierta de WeChat)
Terminal móvil:
Abra el cliente de WeChat -> llame directamente a la autorización de WeChat (no escanee el código, use el appid y appsecret de la cuenta de servicio de WeChat)
Abra otros navegadores móviles -> salte a la página de inicio de sesión del código de escaneo de WeChat (requiere código de escaneo, use la aplicación de la aplicación de PC y el secreto de la aplicación registrados en la plataforma abierta de WeChat)
2. El método para distinguir si se trata de un entorno de PC:
function IsPC(){
var userAgentInfo = navigator.userAgent;
var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false; break; }
}
return flag;
}
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
//alert(navigator.userAgent);
window.location.href ="iPhone.html";
} else if (/(Android)/i.test(navigator.userAgent)) {
//alert(navigator.userAgent);
window.location.href ="Android.html";
} else {
window.location.href ="pc.html";
};
Proceso de obtención de información del usuario
- Obtener el código en WeChat
// 获取微信用户code
getWxCode() {
let appid = "公众号appid"; // 一定是小程序和微信公众号进行了绑定，否则不生效
let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${
appid}&redirect_uri=${
encodeURIComponent(
location.href
)}&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect`;
this.code = this.getUrlCode().code;
//如果没有code 去获取code
if (this.code == null) {
window.location.href = url;
} else {
//获取到code后的逻辑
console.log("code", this.code);
this.login();
}
},
2. Interceptar el código en la url
// 截取url中的code
getUrlCode() {
var url = location.search;
var theRequest = new Object();
if (url.indexOf("?") !== -1) {
var str = url.substr(1);
var strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
}
}
return theRequest;
},
3. Llame a la interfaz de inicio de sesión
async login() {
console.log("开始登录");
const data = {
code: this.code,
udid: "081cvZ280Toa1F1VfB180Jv8380cvZ2i",
appletType: 4
};
ajaxMethod.doAjax("接口地址", data, (res) => {
if (res.success) {
if (res.datas.token) {
setLocalStorageBykey("ticket", res.datas.token);
console.log("登录后进行Ticket缓存");
}
return;
}
});
},