HTML5教程

MUI APP微信支付前端代码示例

本文主要是介绍MUI APP微信支付前端代码示例，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

MUI APP微信支付前端代码示例

开发工具：HbuilderX

manifest.json文件配置：勾选OAuth登录权限，填写appid和appsecret的值；在Payment支付中勾选微信支付，填写appic值

发布页面中：填写包名称，私钥密码（微信支付建议用私钥）

mui 支付页面：zf.html代码如下

<!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" /> 
<!--标准mui.css-->
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="css/swiper.css" />
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/swiper.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/icons-extra.css" />
    <link rel="stylesheet" type="text/css" href="css/iconfont.css" />
     <!-- <link rel="stylesheet" type="text/css" href="css/app.css" /> -->
    <script src="js/mui.min.js"></script>
    <script type="text/javascript" src="js/config.js"></script>
        <script>
            $(document).ready(function(){

                
                
                Date.prototype.Format = function (fmt) { // author: meizz
                  var o = {
                    "M+": this.getMonth() + 1, // 月份
                    "d+": this.getDate(), // 日
                    "h+": this.getHours(), // 小时
                    "m+": this.getMinutes(), // 分
                    "s+": this.getSeconds(), // 秒
                    "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
                    "S": this.getMilliseconds() // 毫秒
                  };
                  if (/(y+)/.test(fmt))
                    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                  for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                      return fmt;
                }
                
                var time2 = new Date().Format("yyyyMMddhhmmss");
                var x = 100,y = 999;
                var rdomstr=Math.round(Math.random()*(y-x)+x);
                var ddnomstr="cz"+time2+rdomstr;
                document.getElementById('Ddnom').innerText=ddnomstr;
                //上述代码获生成订单号，充值订单号组成：cz+时间+3位随机码
                
            });
        </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"> 
               <div class="wyPay-df-title">
                   <ul>
                       <li>
                           支付订单号:
                           <span id="Ddnom"></span>
                       </li>
                   </ul>
               </div>
               <div>
                捐赠金额：<input id="jine" type="text" style="width: 200px; color: #0033FF;" value="12500" /> 元 
             </div>
               
                <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://127.0.0.1:999/AppServer.aspx?TotalAmount=';  
        var WXPAYSERVER='http://127.0.0.1:999/AppServer.aspx?TotalAmount=';   
        
        // 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; 
                var ddnoms=document.getElementById('Ddnom').innerText;
                alert(ddnoms);
                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+"&PayDdnom="+ddnoms);  
            xhr.send();  
            
    }  
     
           </script>   
     <script type="text/javascript" src="js/immersed.js" ></script> 
    </body> 
</html>

 

这篇关于MUI APP微信支付前端代码示例的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航