最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/php/2750.html 沐浴春风 2017-06-26 10:38浏览(24322)

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

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。 在线 充值

Dcloud中mui 微信支付接口完美实现付款代码(PHP微信支付demo)
分类:PHP > 插件 难易:高级
查看演示 下载资源:

加我微信,拉你进VIP群学习:

下载资源 下载积分: 1200 积分

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.由于项目需要我会等后台完善后,在总结一份
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/php/2750.html
评论21
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 20楼
    04-17 17:55
    yang0621
    作者大大,为啥回调函数不走呀
  • 头像 19楼
    08-29 15:31
    lonely_wind
    怎么后面的源码图片看不了。
  • 头像 18楼
    06-26 17:21
    biubiu08
    糗大了积分不够
  • 头像 17楼
    05-15 14:06
    萌妹子卡哇伊
    楼主,为什么我的微信支付,总是支付失败-100
    1
    箫声灬巷陌

    对啊,我的也一直是-100<br />我把APP里面需要的微信开放平台的APPid也填了

  • 头像 16楼
    04-19 13:58
    ZDY123
    为什么看不了?<br />
  • 头像 15楼
    04-10 09:03
    ngu137
    积分不够啊。。。
  • 头像 14楼
    02-14 17:59
    findqgzs
    积分不够流泪
  • 头像 13楼
    10-27 10:00
    织梦猫猫哥
    非常不错。。。
  • 头像 12楼
    09-30 16:03
    mdgg007
    积分老贵下不了
  • 头像 11楼
    09-25 08:16
    小张111
    非常不错,忒漂亮
1 2