結合微信登錄以及微信支付的案例：= =||| （案例比較奇葩復雜）

簡述項目流程：

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 }

?

轉載于:https://www.cnblogs.com/cryst/p/5869210.html

總結

以上是生活随笔為你收集整理的程序ajax请求公共组件app-jquery-http.js中url参数部分的项目应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。