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>
