Dcloud中mui 微信支付接口完美实现付款代码(PHP微信支付demo)

来源:互联网 发布:安卓软件免费源码 编辑:程序博客网 时间:2024/05/16 17:44

Dcloud中mui 微信支付接口完美实现付款代码(PHP微信支付demo):http://www.erdangjiade.com/php/2750.html

1.先上图片,由于mui自己集成了支付宝,所以不需要配置sdk和获取appid,微信配置有些小细节,不注意就会出错,在这里微信支付只能调用一次,详情看下去在特别注意里<!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <title>支付</title>         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />         <link rel="stylesheet" href="css/mui.min.css" />         <script type="text/javascript" src="js/mui.min.js"></script>         <style type="text/css">             .top {                  margin-top: 40px;              }              .weixin {                  width: 200px;                         height: 50px;                   margin-left: 50px;                  background: url(../images/icon-weixin.png);                 }              .zhifubao {                  width: 200px;                  height: 50px;                               margin-left: 50px;                  background: url(../images/alipay.jpg);                }               #jine{                 -webkit-user-select:text;                 text-align:right;                 padding:0 1em;                 border: 0px;                 border-bottom:1px solid #ECB100;                 border-radius: 0;                 font-size:16px;                 width:30%;                 outline:none;                 text-align:center;             }                      </style>     </head>     <body>          <hrader 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>          </hrader>                    <div class="mui-content">                                               捐赠金额:<input id="jine" type="number" value="1" /><div class="top" id="testLogin" >                     <input type="button" class="weixin" id="weixin1" value="微信支付" />                     <input type="button" class="zhifubao" id="zhifubao" value="支付宝支付" />                                      </div>                              </div>            <script>                var wxChannel = null; // 微信支付              var aliChannel = null; // 支付宝支付              var channel = null;   //支付通道             mui.init({                  swipeBack:true //启用右滑关闭功能              });                            mui.plusReady(function() {                // 获取支付通道                  plus.payment.getChannels(function(channels){                  for (var i in channels) {                         if (channels[i].id == "wxpay") {                              wxChannel=channels[i];                          }else{                             aliChannel=channels[i];                          }                     }                     },function(e){                   alert("获取支付通道失败:"+e.message);                  });          })            document.getElementById('weixin1').addEventListener('tap',function() {              console.log("微信");              pay('wxpay');          })          document.getElementById('zhifubao').addEventListener('tap',function() {              console.log("zhifubao");              pay('alipay');           })            var ALIPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/alipay.php?total=';          var WXPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/wxpay.php?total=';                  // 2. 发起支付请求          function pay(id){                  // 从服务器请求支付订单                  var PAYSERVER='';                  if(id=='alipay'){                  PAYSERVER=ALIPAYSERVER;                  channel = aliChannel;              }else if(id=='wxpay'){                      PAYSERVER=WXPAYSERVER;                      channel = wxChannel;                  }else{                      plus.nativeUI.alert("不支持此支付通道!",null,"捐赠");                      return;               }                  var xhr=new XMLHttpRequest();                   var amount = document.getElementById('jine').value;                                 xhr.onreadystatechange=function(){                      switch(xhr.readyState){                          case 4:                          if(xhr.status==200){                              plus.payment.request(channel,xhr.responseText,function(result){                                  plus.nativeUI.alert("支付成功!",function(){                                  back();                              });                              },function(error){                                  plus.nativeUI.alert("支付失败:" + error.code);                              });                          }else{                              alert("获取订单信息失败!");                          }                          break;                      default:                      break;                  }           }              xhr.open('GET',PAYSERVER+amount);              xhr.send();                  }                  </script>        <script type="text/javascript" src="js/immersed.js" ></script>     </body> </html>3.重点看这里关于配置和质疑问题如下图点击manifest.json文件的“代码视图”,在permissions节点下添加Payment节点:如下图在plus -> distribute -> plugins 节点下添加payment节点:如下图4.特别注意1.由于mui集成了支付宝插件,所以支付宝支付不需要配置就可以,  2,。注意微信weixin节点下配置微信支付相关信息  appid值为在微信开放平台申请应用的AppID值。(微信开放平台不是微信公众号平台申请的appid)  因为我在微信公众号申请的也不知到什么原因只成功调取一次,其余失败。  5.由于项目需要我会等后台完善后,在总结一份霞浦县人民政府网