脚本宝典收集整理的这篇文章主要介绍了html5教程-html5+jquery获取微信openid(代码教程),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
最近在修改一个移动商城,由于wap端是HTML5的,还大量使用了art模板技术,一开始修改很不适应,而且实现HTML5取oPEnid一直没能实现很好的实现,经过对获取原理的理解和学习,终于还是实现了HTML获取微信openid,而且改动不大,闲话少说,直接上干货:
一、写个js,用于取accesscode,并直接通过openid读取用户表中的注册信息
[javascript] view plain copy
$(function () {
VAR wxopenid=getcookie('wxopenid');
var key=getcookie('key');
if (key==''){
var access_code=GetQueryString('code');
if (wxopenid==""){
if (access_code==null)
{
var url='https://open.weixin.QQ.COM/connect/oauth2/authorize?appid=填你自已的appid哟&redirect_uri='+encodeURIcomponent(fromurl)+'&response_type=code&scope=snsapi_base&state=STATE%23wechat_redirect&connect_redirect=1#wechat_redirect';
location.href=url;
}
else
{
$.ajax({
type:'get',
url:ApiUrl+'/index.php?act=payment&op=getopenid',
async:false,
cache:false,
data:{code:access_code},
dataType:'json',
success:function(result){
if (result!=null && result.hasOwnProperty('openid') && result.openid!=""){
addcookie('wxopenid',result.openid,360000);
getlogininfo(result.openid);
}
else
{
alert('微信身份识别失败 /n '+result);
location.href=fromurl;
}
}
});
}
}else{
if (key=='' && wxopenid!='')
getLOGininfo(wxopenid);
}
function getlogininfo(wxopenid){
$.ajax({
type:'get',
url: ApiUrl + '/index.php?act=login&op=autologininfo',
data: { wxopenid:wxopenid},
dataType:'json',
async:false,
cache:false,
success: function (result) {
if (result.return_code=='OK'){
addcookie('key',result.memberinfo.key);
addcookie('username',result.memberinfo.username);
}else{
alert(result.return_msg);
location.href=WapSITeUrl+'/tmpl/member/login.html';
}
}
});
}
}
});
第二步:在html页的head中加载js文件
[html] view plain copy
<head>
<meta charset="UTF-8">
<title>麦斯卡商城</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/member.css">
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/template.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/getwxopenid_index.js"></script>
</head>
第三步:实现openid的后台方法,这个方法不详列了,官方有示例
[php] view plain copy
/**
* 获取openid
* @return type
*/
public function getopenidOp(){
$jsApi=new JsApi_pub();
$code = $_GET['code'];
$jsApi->setCode($code);
echo $jsApi->getOpenId();
}
[php] view plain copy
function getOpenid()
<span style="white-space:PRe"> </span>{
$url = $this->createOauthUrlForOpenid();
return $this->httpGet($url);
<span style="white-space:pre"> </span>}
[php] view plain copy
/**
<span style="white-space:pre"> </span> * <span style="white-space:pre"> </span>作用:生成可以获得openid的url
<span style="white-space:pre"> </span> */
<span style="white-space:pre"> </span>function createOauthUrlForOpenid()
<span style="white-space:pre"> </span>{
<span style="white-space:pre"> </span>$urlObj["appid"] = WxpayConf_pub::APPID;
<span style="white-space:pre"> </span>$urlObj["secret"] = WxPayConf_pub::APPSECRET;
<span style="white-space:pre"> </span>$urlObj["code"] = $this->code;
<span style="white-space:pre"> </span>$urlObj["grant_type"] = "authorization_code";
<span style="white-space:pre"> </span>$bizString = $this->formatBizQueryParaMap($urlObj, false);
//api.weixin.qq.com=101.226.90.58
<span style="white-space:pre"> </span>return "https://api.weixin.qq.com/sns/oauth2/access_token?".$bizString;
<span style="white-space:pre"> </span>}
[javascript] view plain copy
function addcookie(name,value,expireHours){
var cookieString=name+"="+escape(value)+"; path=/";
//判断是否设置过期时间
if(expireHours>0){
var date=new Date();
date.setTime(date.getTime+expireHours*3600*1000);
cookieString=cookieString+"; expire="+date.toGMTString();
}
document.cookie=cookieString;
}
function getcookie(name){
var strcookie=document.cookie;
var arrcookie=strcookie.split("; ");
for(var i=0;i<arrcookie.length;i++){
var arr=arrcookie[i].split("=");
if(arr[0]==name)return decodeURIComponent(arr[1]); //增加对特殊字符的解析
}
return "";
}
function delCookie(name){//删除cookie
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getcookie(name);
if(cval!=null) document.cookie= name + "="+cval+"; path=/;expires="+exp.toGMTString();
}
另外,js文件中的变量,尽量不要用全局的,当多个js加载时,变量可能冲突,造成一些不可预则的问题;
最近在修改一个移动商城,由于wap端是HTML5的,还大量使用了art模板技术,一开始修改很不适应,而且实现HTML5取openid一直没能实现很好的实现,经过对获取原理的理解和学习,终于还是实现了HTML获取微信openid,而且改动不大,闲话少说,直接上干货:
一、写个js,用于取accesscode,并直接通过openid读取用户表中的注册信息
[javascript] view plain copy
$(function () {
var wxopenid=getcookie('wxopenid');
var key=getcookie('key');
if (key==''){
var access_code=GetQueryString('code');
if (wxopenid==""){
if (access_code==null)
{
var fromurl=location.href;
var url='https://open.weixin.qq.com/connect/oauth2/authorize?appid=填你自已的appid哟&redirect_uri='+encodeURIComponent(fromurl)+'&response_type=code&scope=snsapi_base&state=STATE%23wechat_redirect&connect_redirect=1#wechat_redirect';
location.href=url;
}
else
{
$.ajax({
type:'get',
url:ApiUrl+'/index.php?act=payment&op=getopenid',
async:false,
cache:false,
data:{code:access_code},
dataType:'json',
success:function(result){
if (result!=null && result.hasOwnProperty('openid') && result.openid!=""){
addcookie('wxopenid',result.openid,360000);
getlogininfo(result.openid);
}
else
{
alert('微信身份识别失败 /n '+result);
location.href=fromurl;
}
}
});
}
}else{
if (key=='' && wxopenid!='')
getlogininfo(wxopenid);
}
function getlogininfo(wxopenid){
$.ajax({
type:'get',
url: ApiUrl + '/index.php?act=login&op=autologininfo',
data: { wxopenid:wxopenid},
dataType:'json',
async:false,
cache:false,
success: function (result) {
if (result.return_code=='OK'){
addcookie('key',result.memberinfo.key);
addcookie('username',result.memberinfo.username);
}else{
alert(result.return_msg);
location.href=WapSiteUrl+'/tmpl/member/login.html';
}
}
});
}
}
});
第二步:在html页的head中加载js文件
[html] view plain copy
<head>
<meta charset="UTF-8">
<title>麦斯卡商城</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/member.css">
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/template.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/getwxopenid_index.js"></script>
</head>
第三步:实现openid的后台方法,这个方法不详列了,官方有示例
[php] view plain copy
/**
* 获取openid
* @return type
*/
public function getopenidOp(){
$jsApi=new JsApi_pub();
$code = $_GET['code'];
$jsApi->setCode($code);
echo $jsApi->getOpenId();
}
[php] view plain copy
function getOpenid()
<span style="white-space:pre"> </span>{
$url = $this->createOauthUrlForOpenid();
return $this->httpGet($url);
<span style="white-space:pre"> </span>}
[php] view plain copy
/**
<span style="white-space:pre"> </span> * <span style="white-space:pre"> </span>作用:生成可以获得openid的url
<span style="white-space:pre"> </span> */
<span style="white-space:pre"> </span>function createOauthUrlForOpenid()
<span style="white-space:pre"> </span>{
<span style="white-space:pre"> </span>$urlObj["appid"] = WxPayConf_pub::APPID;
<span style="white-space:pre"> </span>$urlObj["secret"] = WxPayConf_pub::APPSECRET;
<span style="white-space:pre"> </span>$urlObj["code"] = $this->code;
<span style="white-space:pre"> </span>$urlObj["grant_type"] = "authorization_code";
<span style="white-space:pre"> </span>$bizString = $this->formatBizQueryParaMap($urlObj, false);
//api.weixin.qq.com=101.226.90.58
<span style="white-space:pre"> </span>return "https://api.weixin.qq.com/sns/oauth2/access_token?".$bizString;
<span style="white-space:pre"> </span>}
[javascript] view plain copy
function addcookie(name,value,expireHours){
var cookieString=name+"="+escape(value)+"; path=/";
//判断是否设置过期时间
if(expireHours>0){
var date=new Date();
date.setTime(date.getTime+expireHours*3600*1000);
cookieString=cookieString+"; expire="+date.toGMTString();
}
document.cookie=cookieString;
}
function getcookie(name){
var strcookie=document.cookie;
var arrcookie=strcookie.split("; ");
for(var i=0;i<arrcookie.length;i++){
var arr=arrcookie[i].split("=");
if(arr[0]==name)return decodeURIComponent(arr[1]); //增加对特殊字符的解析
}
return "";
}
function delCookie(name){//删除cookie
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getcookie(name);
if(cval!=null) document.cookie= name + "="+cval+"; path=/;expires="+exp.toGMTString();
}
另外,js文件中的变量,尽量不要用全局的,当多个js加载时,变量可能冲突,造成一些不可预则的问题;
这样就实现了在html5页面直接取accesscode,再通过ajax方法在后台取openid;
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! html5教程,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的html5教程-html5+jquery获取微信openid(代码教程)全部内容,希望文章能够帮你解决html5教程-html5+jquery获取微信openid(代码教程)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。