zoukankan      html  css  js  c++  java
  • 程序ajax请求公共组件appjqueryhttp.js中url参数部分的项目应用 Cryst

    结合微信登录以及微信支付的案例:= =||| (案例比较奇葩复杂)

    简述项目流程:

    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 }
  • 相关阅读:
    Oracle+PL+SQL从入门到精通.丁士锋.清华大学出版社.2012
    《 Oracle查询优化改写 技巧与案例 》电子工业出版社
    HTML5从入门到精通(明日科技) 中文pdf扫描版
    《JavaWeb从入门到精通》(明日科技,清华大学出版社)
    JavaScript从入门到精通(附光盘1张):作者:明日科技出版社:清华大学出版社出版时间:2012年09月
    ORACLE_修改实例的内存大小
    JAVA图书管理系统汇总共27个
    IntelliJ Idea 2017 免费激活方法
    spring springMvc spring-boot spring-cloud分别是什么
    nodejs环境 + 入门 + 博客搭建
  • 原文地址:https://www.cnblogs.com/cryst/p/5869210.html
Copyright © 2011-2022 走看看