mui 微信支付和支付宝支付（由于没有后台，在这只能调取各自接口）

最新推荐文章于 2020-09-27 21:35:04 发布

chubosheng0951

最新推荐文章于 2020-09-27 21:35:04 发布

阅读量178

点赞数

文章标签： php javascript json ViewUI

原文链接：https://my.oschina.net/u/2881037/blog/790238

版权

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

2.看代码

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

转载于:https://my.oschina.net/u/2881037/blog/790238

chubosheng0951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mui 微信支付和支付宝支付（由于没有后台，在这只能调取各自接口）

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

扫一扫