最近项目里用到Dcloud、官网上给的Demo是各种坑啊，于是自己整理了mui 微信支付和支付宝支付接口完美实现付款代码（PHP支付宝demo）希望用到的同学沙走些弯路。
0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。 在线 充值
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.由于项目需要我会等后台完善后，在总结一份
友情提示：垃圾评论一律封号 加我微信：826096331拉你进VIP群学习群