演示下载你可以参考这里：http://www.erdangjiade.com/php/2750.html

演示下载你可以参考这里：http://www.erdangjiade.com/php/2475.html

完整代码及教程：

最近项目里用到Dcloud、官网上给的Demo是各种坑啊，于是自己整理了mui 微信支付和支付宝支付接口完美实现付款代码(PHP支付宝demo)希望用到的同学沙走些弯路。

1.先上图片，由于mui自己集成了支付宝，所以不需要配置sdk和获取appid,微信配置有些小细节，不注意就会出错，在这里微信支付只能调用一次，详情看下去在特别注意里

支付

.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;

}

第三方支付

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();

}

3.重点看这里关于配置和质疑问题

如下图

点击manifest.json文件的“代码视图”，在permissions节点下添加Payment节点：

如下图

在plus -> distribute -> plugins 节点下添加payment节点：

如下图

4.特别注意

1.由于mui集成了支付宝插件，所以支付宝支付不需要配置就可以，

2,。注意微信weixin节点下配置微信支付相关信息

appid值为在微信开放平台申请应用的AppID值。(微信开放平台不是微信公众号平台申请的appid)

因为我在微信公众号申请的也不知到什么原因只成功调取一次，其余失败。

5.由于项目需要我会等后台完善后，在总结一份