结合微信登录以及微信支付的案例：= =||| （案例比较奇葩复杂）
简述项目流程：
1.获取用于公众号支付的openid（公众平台）：在微信内置浏览器中打开网页链接，刚进入页面就通过微信公众平台获取该微信用户的code，拿到code传给后台，换取用户的openid。
2.微信登录（开放平台）：微信登录通过微信开放平台，由于第一步公众平台拿到的code会混淆开放平台的code，导致用户使用微信登录失败，就需要使用该插件将url参数重置。
3.微信支付（公众平台）：像后台传输步骤一获取的openid，以及其他参数，完成微信公众号支付。
代码如下：
1.获取用于公众号支付的openid：
1 $(function() {
2
3 function isWeiXin() { //判断是否为微信环境
4 var ua = window.navigator.userAgent.toLowerCase();
5 if(ua.match(/MicroMessenger/i) == ‘micromessenger‘) {
6 return true;
7 } else {
8 return false;
9 }
10 }
11 if(isWeiXin()) { //只在微信环境中获取openid，普通的浏览器也获取不到啊！
12 var openid = $.cookie("geekbar_weixinid"); // Jquery-cookie插件用于存储获取到的openid，一开始这里肯定是null。
13 if(openid != null && openid != ‘‘) {
14 return;
15 }
16 var code = $.HTTP.getUrlParam("code"); //获取当前页面链接中的参数code！一开始这里肯定是null。
17 if(code == undefined || code == null) {
18 var sendUrl = location.href; //redirect_uri（授权后重定向的回调链接地址）：当前页面。
19 sendUrl = $.HTTP.setUrlParam(sendUrl,"xz","public"); //给当前页面的url添加一个参数xz=public，提示是公众平台，避免与开放平台搞混淆。 //拼接后的地址（例）：www.baidu.com?xz=public，对链接本身没有任何影响。
20 sendUrl =encodeURIComponent(sendUrl); //处理该地址为格式要求的样式，点击查看微信公众平台文档要求。
21
22 //var sendUrl = encodeURIComponent(location.href);
23 var requrl = ‘https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect_uri=‘ +
24 sendUrl + ‘&response_type=code&scope=snsapi_base&state=wx#wechat_redirect‘;
25
26 location.href = requrl; //刷新后页面链接后便拼接了公众平台获取的code，同时进入else
27 return;
28
29 } else {
30
31 $.ajax({
32 url: ‘../common/user/wx/getopenid?code=‘ + code, //将公众平台code传给后台，获取用于公众号支付的openid
33 success: function(data) {
34 $.cookie("geekbar_weixinopenid", data.data, { //成功后将openid（代码中的data.data）存入缓存中去。使用jquery-cookie插件。
35 expires: 1
36 });
37 },
38 error: function(XMLHttpRequest, textStatus, errorThrown) {
39 var info = "XMLHttpRequest:" + JSON.stringify(XMLHttpRequest) +
40 " ;textStatus:" + textStatus + "; errorThrown:" +
41 JSON.stringify(errorThrown) + "; 【" + opt.url + "】";
42 alert(info);
43 if(opt.error != undefined)
44 opt.error(XMLHttpRequest, textStatus, errorThrown);
45 else {
46 console.error("请求错误", "系统发生请求错误，请联系管理员解决。");
47 }
48 }
49 });
50
51 }
52
53 } else {
54 console.log("当前环境不是微信环境")
55 }
56
57 });
2.微信登录（开放平台）
1 $("#wchartLogin").on("click", function() { 4 var sendUrl = location.href; //受到步骤一的影响，页面链接后拼接的是公众平台获取的code，xz参数。即xxxx.jsp?code=publiccode&xz=public&state=wx
5 sendUrl = $.HTTP.setUrlParam(sendUrl, "xz", "open"); //重置xz参数：xxxx.jsp?code=publiccode&xz=open&sate=wx
6 sendUrl = $.HTTP.deleteUrlParam(sendUrl, "code"); //删除公众平台code参数：xxxx.jsp?xz=open&state=wx (最为重要，是混淆开放平台code的元凶！)
7 sendUrl = $.HTTP.deleteUrlParam(sendUrl, "state"); //删除state参数：xxxx.jsp?xz=open
8 sendUrl = $.HTTP.setUrlParam(sendUrl, "ls", "wx"); //增添ls参数：xxxx.jsp?xz=open&ls=wx (后台设置的，没有此参数不行)
9 sendUrl = encodeURIComponent(sendUrl); //处理成redirect_uri的标准格式。
10 requrl = ‘https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect_uri=‘ + sendUrl + ‘&response_type=code&scope=snsapi_login&state=wx#wechat_redirect‘;
11 location.href = requrl; //就可以成功登录了!
12 return;
13 });
3.微信支付（公众平台）：
1 <input type="radio" value="WeiXinPub" name="payType" checked="checked">
1 <script>
2 $(function(){
3 $("#payFBtn").on("click",function(){
4 var payType=$("#payChooseList input[name=payType]:checked").val();
5 if(payType==undefined||payType==null||payType==‘‘){
6 alert("请选择支付类型！");
7 return;
8 }
9 pay(‘{{orderNo}}‘,payType);
10 })
11
12 })
13 </script>
1 function pay(orderNo, payChannel) {
2 $.HTTP.obj({
3 url: "../rest/order/pay",
4 ajaxData: {
5 orderNo: orderNo,
6 payChannel: payChannel,
7 wxOpenId: $.cookie("geekbar_weixinid"), //将获取到的公众平台的openid传给后台。只有有用户openid才能支付。
8 success_url: encodeURI(location.href)
9 },
10 success: function(data) {
11
12 if(data) {
13 switch(payChannel) {
14
15 case "AlipayWap":
16
17 var pos = JSON.stringify(data);
18 pingpp.createPayment(pos, function(result, err) {
19 alert(result);
20 alert(err.msg);
21 alert(err.extra);
22 if(result == "success") {
23
24 } else if(result == "cancel") {
25
26 }
27 });
28 break;
29
30 case "WeiXinPub":
31 var pos = JSON.stringify(data);
32
33 pingpp.createPayment(pos, function(result, err) {
34 /*alert(result);
35 alert(err.msg);
36 alert(err.extra);*/
37 if(result == "success") {
38 //alert(result);
39 } else if(result == "fail") {
40 alert(err.msg);
41 // charge 不正确或者微信公众账号支付失败时会在此处返回
42 } else if(result == "cancel") {
43 // 微信公众账号支付取消支付
44 result = ‘您已取消支付‘;
45 alert(result);
46 }
47 });
48 break;
49
50 }
51
52 } else {
53 alert("支付异常");
54 }
55
56 }
57 })
58 }
时间： 2024-08-10 19:16:47