Dcloud中mui 微信支付和支付宝支付接口完美实现付款代码（PHPdemo）

演示下载你可以参考这里：http://www.erdangjiade.com/php/2750.html
演示下载你可以参考这里：http://www.erdangjiade.com/php/2475.html
完整代码及教程：
最近项目里用到Dcloud、官网上给的Demo是各种坑啊，于是自己整理了mui 微信支付和支付宝支付接口完美实现付款代码（PHP支付宝demo）希望用到的同学沙走些弯路。

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.由于项目需要我会等后台完善后，在总结一份

Dcloud中mui 微信支付和支付宝支付接口完美实现付款代码（PHPdemo）

4 个评论

目录

公告

相关问题