H5页面分享到微信获取用户信息

注意：我们要求调试微信网页授权，必须开发者微信号与公众号建立绑定关系
需求背景：将H5页面分享到微信，页面中的功能需要登录，所以再进行功能操作前需要调起登录

授权登录

1、微信登录的几种情况：
PC端：

PC端微信浏览器 -> 网页内嵌二维码方式（需要扫码，使用微信服务号的 appid 和 appsecret）

PC端其他浏览器 -> 跳转微信的扫码登录页面（需要扫码，使用微信开放平台注册的PC应用 appid 和 appsecret）

移动端：

微信客户端打开 -> 直接调用微信授权（不扫码，使用微信服务号的 appid 和 appsecret）

其他手机浏览器打开 -> 跳转微信的扫码登录页面（需要扫码，使用微信开放平台注册的PC应用 appid 和 appsecret）

2、区分是否是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";};

获取用户信息流程

  1. 获取微信中的code
// 获取微信用户codegetWxCode() {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 去获取codeif (this.code == null) {window.location.href = url;} else {//获取到code后的逻辑console.log("code", this.code);this.login();}},

2.截取url中的code

// 截取url中的codegetUrlCode() {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.调用登录接口

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;}});},