脚本宝典收集整理的这篇文章主要介绍了js实例教程-vue.js代码实现微信开放平台扫码登录，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
1、首先到微信开放平台申请，获取到appid和APPSECRET，前台显示页面如下
<!DOCTYPE htML> <html> <head> <;meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <script src="https://res.wx.QQ.COM/connect/zh_CN/htmledITion/js/wxLogin.js"></script> <script> VAR obj = new WxLOGin({ id: "login_container", appid: "wxed782be999f86e0e", scope: "snsapi_login", redirect_uri: encodeURIcomponent("https://" + window.location.host + "/login.php"), state: Math.ceil(Math.random()*1000), style: "black", href: ""}); </script> </body> </html> 2、PHP处理代码页面 /* require_once('weixin.class.php'); $weixin = new class_weixin(); */ define('APPID’, “wx19ba77624e083e08”); define('APPSECRET’, “c1a56a5c4247dd44c320c9719c5ceb90”); class class_weixin{ var $appid = APPID; var $appsecret = APPSECRET; //构造函数，获取Access Token public function __construct($appid = NULL, $appsecret = NULL) { if($appid && $appsecret){ $this->appid = $appid; $this->appsecret = $appsecret; } //扫码登录不需要该Access Token, 语义理解需要 //1. 本地写入 $res = file_get_contents('access_token.json'); $result = json_decode($res, true); $this->expires_time = $result["expires_time"]; $this->access_token = $result["access_token"]; if (time() > ($this->expires_time + 3600)){ $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$this->appid."&secret=".$this->appsecret; $res = $this->http_request($url); $result = json_decode($res, true); $this->access_token = $result["access_token"]; $this->expires_time = time(); file_put_contents('access_token.json', '{"access_token": "'.$this->access_token.'", "expires_time": '.$this->expires_time.'}'); } } /* * PART1 网站应用 */ /* header("Content-type: text/html; charset=utf-8"); require_once('wxopen.class.php'); $weixin = new class_weixin(); if (!isset($_GET["code"])){ $redirect_url = 'https://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; $jumpurl = $weixin->qrconnect($redirect_url, "snsapi_login", "123"); Header("Location: $jumpurl"); }else{ $oauth2_info = $weixin->oauth2_access_token($_GET["code"]); $userinfo = $weixin->oauth2_get_user_info($oauth2_info['access_token'], $oauth2_info['openid']); var_dump($userinfo); } */ //生成扫码登录的URL public function qrconnect($redirect_url, $scope, $state = NULL) { $url="https://open.weixin.qq.com/connect/qrconnect?appid=".$this->appid."&redirect_uri=".urlencode($redirect_url)."&response_type=code&scope=".$scope."&state=".$state."#wechat_redirect"; return $url; } //生成OAuth2的Access Token public function oauth2_access_token($code) { $url="https://api.weixin.qq.com/sns/oauth2/access_token?appid=".$this->appid."&secret=".$this->appsecret."&code=".$code."&grant_type=authorization_code"; $res = $this->http_request($url); return json_decode($res, true); } //获取用户基本信息（OAuth2 授权的 Access Token 获取 未关注用户，Access Token为临时获取） public function oauth2_get_user_info($access_token, $openid) { $url = "https://api.weixin.qq.com/sns/userinfo?access_token=".$access_token."&openid=".$openid."&lang=zh_CN"; $res = $this->http_request($url); return json_decode($res, true); }
1、首先到微信开放平台申请，获取到appid和APPSECRET，前台显示页面如下
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script> <script> var obj = new WxLogin({ id: "login_container", appid: "wxed782be999f86e0e", scope: "snsapi_login", redirect_uri: encodeURIComponent("https://" + window.location.host + "/login.php"), state: Math.ceil(Math.random()*1000), style: "black", href: ""}); </script> </body> </html> 2、PHP处理代码页面 /* require_once('weixin.class.php'); $weixin = new class_weixin(); */ define('APPID’, “wx19ba77624e083e08”); define('APPSECRET’, “c1a56a5c4247dd44c320c9719c5ceb90”); class class_weixin{ var $appid = APPID; var $appsecret = APPSECRET; //构造函数，获取Access Token public function __construct($appid = NULL, $appsecret = NULL) { if($appid && $appsecret){ $this->appid = $appid; $this->appsecret = $appsecret; } //扫码登录不需要该Access Token, 语义理解需要 //1. 本地写入 $res = file_get_contents('access_token.json'); $result = json_decode($res, true); $this->expires_time = $result["expires_time"]; $this->access_token = $result["access_token"]; if (time() > ($this->expires_time + 3600)){ $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$this->appid."&secret=".$this->appsecret; $res = $this->http_request($url); $result = json_decode($res, true); $this->access_token = $result["access_token"]; $this->expires_time = time(); file_put_contents('access_token.json', '{"access_token": "'.$this->access_token.'", "expires_time": '.$this->expires_time.'}'); } } /* * PART1 网站应用 */ /* header("Content-type: text/html; charset=utf-8"); require_once('wxopen.class.php'); $weixin = new class_weixin(); if (!isset($_GET["code"])){ $redirect_url = 'https://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; $jumpurl = $weixin->qrconnect($redirect_url, "snsapi_login", "123"); Header("Location: $jumpurl"); }else{ $oauth2_info = $weixin->oauth2_access_token($_GET["code"]); $userinfo = $weixin->oauth2_get_user_info($oauth2_info['access_token'], $oauth2_info['openid']); var_dump($userinfo); } */ //生成扫码登录的URL public function qrconnect($redirect_url, $scope, $state = NULL) { $url="https://open.weixin.qq.com/connect/qrconnect?appid=".$this->appid."&redirect_uri=".urlencode($redirect_url)."&response_type=code&scope=".$scope."&state=".$state."#wechat_redirect"; return $url; } //生成OAuth2的Access Token public function oauth2_access_token($code) { $url="https://api.weixin.qq.com/sns/oauth2/access_token?appid=".$this->appid."&secret=".$this->appsecret."&code=".$code."&grant_type=authorization_code"; $res = $this->http_request($url); return json_decode($res, true); } //获取用户基本信息（OAuth2 授权的 Access Token 获取 未关注用户，Access Token为临时获取） public function oauth2_get_user_info($access_token, $openid) { $url = "https://api.weixin.qq.com/sns/userinfo?access_token=".$access_token."&openid=".$openid."&lang=zh_CN"; $res = $this->http_request($url); return json_decode($res, true); } 觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的js实例教程-vue.js代码实现微信开放平台扫码登录全部内容，希望文章能够帮你解决js实例教程-vue.js代码实现微信开放平台扫码登录所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。