主要原理解析:
先根据是否有code来进行判断,如果有code的话,根据code换取openid,如果没有code的话,发送请求到微信授权页,微信授权页会带着code转发到当前的页面,然后根据code换取openid
==========================================================================================
wx-data.js:
var wxdata = {
redirect_uri: window.location.href,
openid:"",
openid_url :function(){
return "http://www.badqh.cn/jeeplus_union/wx/setting/openid";
},
// 获取openid
get_openid : function(){
//若openid未过期,返回缓存的openid
if(getCache("openid",1000*60*60*24*30)){
return getCache("openid",1000*60*60*24*30);
}
var code = $.getUrlParam('code');
$.ajax({
type : "GET",
url : wxdata.openid_url(),
data:{code:code,reUrl:wxdata.redirect_uri},
async : false,
success : function(rtnData) {
//放到缓存
console.log(rtnData);
if(rtnData.errCode==1){
wxdata.openid = rtnData.data.openid;
//放到缓存
setCache("openid",rtnData.data.openid);
}else if(rtnData.errCode==0){
//跳转页面
window.location.href=rtnData.data.reUrl;
}else{
console.log(rtnData.errMsg);
}
},
error : function(msg){
alert("get openid error!!! ");
}
});
return wxdata.openid;
}
//其他
}
==========================================================================================
common.js:
/**
* 设置缓存
* @param {Object} key 键
* @param {Object} value 值
*/
function setCache(key,value){
var curTime = new Date().getTime();
localStorage.setItem(key,JSON.stringify({data:value,time:curTime}));
console.log(key+"==>"+localStorage.getItem(key));
}
/**
* 获取缓存
* @param {Object} key 键
* @param {Object} exp 1000*60*60*24 24小时
*/
function getCache(key,exp){
var data = localStorage.getItem(key);
if(!data){
return null;
}
var dataObj = JSON.parse(data);
if (new Date().getTime() - dataObj.time>exp) {
localStorage.removeItem(key);
//alert("信息已过期")
return null;
}else{
return dataObj.data;
}
}
/**
* 获取永久对象
* @param {Object} key
*/
function getCache(key){
var data = localStorage.getItem(key);
if(!data){
return null;
}
var dataObj = JSON.parse(data);
return dataObj.data;
}
/**
* 删除缓存
* @param {Object} key
*/
function delCache(key){
localStorage.removeItem(key);
}
==========================================================================================
get-url.js:
/*获取到Url里面的参数*/
(function($) {
//只能是英文
$.getUrlParam = function(key) {
var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r != null) return unescape(r[2]);
return null;
}
//可以是中文,可以是英文
$.getCNUrlParam = function(key) {
// 获取参数
var url = window.location.search;
// 正则筛选地址栏
var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
// 匹配目标参数
var result = url.substr(1).match(reg);
//返回参数值
return result ? decodeURIComponent(result[2]) : null;
}
})(jQuery);
==========================================================================================
jeeplus_union/wx/setting/openid:
public void openid() throws Exception {
String code=getPara("code");
String reUrl=getPara("reUrl");
Map<String ,Object> rsMap = new HashMap<String ,Object>();
//1.根据code 获取 access_token,从而获取 openid
//2.没有code,有refresh_token,获取openid
//3.跳转页面,获取code
String openid="";
if(StringUtils.isNotEmpty(code)){
HttpClientUtils httpUtils = new HttpClientUtils();
//解析成Json格式
JSONObject jsonObject=JSONObject.fromObject(httpUtils.doGet(Constant.WEIXIN_UNIION_OAUTH2_ACCESS_TOKEN_URL+"&code="+code+"&grant_type=authorization_code"));
if(jsonObject.containsKey("errcode")){
renderJson(new WxRtnMap(Integer.valueOf(jsonObject.getString("errcode")),jsonObject.getString("errmsg")));
}else{
Redis.use("gc_wx").setex(Constant.WEIXIN_UNIION_REDIS_PREFIX+"AUTH_REFRESH_TOKEN", 7200,jsonObject.getString("refresh_token"));
openid = jsonObject.getString("openid");
rsMap.put("openid", openid);
renderJson(new WxRtnMap(1,"获取成功",rsMap));
}
}else if(StringUtils.isNotEmpty(reUrl)){
rsMap.put("reUrl", Constant.WEIXIN_UNIION_OAUTH2_AUTHORIZE_URL+"&redirect_uri="+URLEncoder.encode(reUrl,"utf8")+"&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect");
renderJson(new WxRtnMap(0,"跳转url",rsMap));
}else{
renderJson(new WxRtnMap(3,"出错啦"));
}
}
==============================================================================================
Constant.java:
//appid
public static final String WEIXIN_UNIION_APPID = "";
//app_secret
public static final String WEIXIN_UNIION_APPSECRET = "";
//oauth2-获取用户信息
public static final String WEIXIN_UNIION_OAUTH2_ACCESS_TOKEN_URL = Constant.WEIXIN_UNIION_ROOT_URL +
"/sns/oauth2/access_token?appid="+WEIXIN_UNIION_APPID+"&secret="+WEIXIN_UNIION_APPSECRET;
//微信接口-访问前缀
public static final String WEIXIN_UNIION_ROOT_URL = "https://api.weixin.qq.com"; //正式地址
//redis前缀
public static final String WEIXIN_UNIION_REDIS_PREFIX = "GC_UNION_";
public static final String WEIXIN_UNIION_OAUTH2_AUTHORIZE_URL =
"https://open.weixin.qq.com/connect/oauth2/authorize?appid="+WEIXIN_UNIION_APPID;
================================================================================================前端页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水电用度查询</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<!--App自定义的css-->
<!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
</head>
<body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript" ></script>
<script src="js/jquery.min.js"></script>
<script src="js/common/common.js"></script>
<script src="js/common/get-url.js"></script>
<script src="js/common/qrcode.min.js"></script>
<script src="js/wx-data.js"></script>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">水电用度查询</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="webpage/activelist.html">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">活动列表</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<div class="mui-media-body">问题上报</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">获取微信头像</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">我的</div></a></li>
</ul>
</div>
</body>
<script src="js/mui.min.js"></script>
<script>
mui.init({
swipeBack:true //启用右滑关闭功能
});
$(function() {
//根据openid,获取会员信息
var openid = wxdata.get_openid(); //oMzRhuAauQa3kRP4DGctG8JyTON8
alert("openid==>"+openid);
// var
})
</script>
</html>
================================================================================================WxRtnMap.java
package cn.jbolt.common.model;
import java.util.Map;
public class WxRtnMap {
private Integer errCode;
private String errMsg;
private Map<String ,Object> data;
public WxRtnMap(){
}
public WxRtnMap(Integer errCode,String errMsg){
this.errCode = errCode;
this.errMsg = errMsg;
}
public WxRtnMap(Integer errCode,String errMsg,Map<String ,Object> data){
this.errCode = errCode;
this.errMsg = errMsg;
this.data = data;
}
public Integer getErrCode() {
return errCode;
}
public void setErrCode(Integer errCode) {
this.errCode = errCode;
}
public String getErrMsg() {
return errMsg;
}
public void setErrMsg(String errMsg) {
this.errMsg = errMsg;
}
public Map<String, Object> getData() {
return data;
}
public void setData(Map<String, Object> data) {
this.data = data;
}
}