首先说明一下，本文借鉴了多位博主的文章，所以会看到很多一样的代码。
写这篇博客主要目的是为了便于后期查看（不好之处，敬请留言吐槽），案例经本人测试，是可以使用的。
先上效果图
前端HTML代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>支付</title> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 <link rel="stylesheet" href="css/mui.min.css" /> 8 <link rel="stylesheet" href="css/pay.css" /> 9 </head> 10 11 <body> 12 <hrader class="mui-bar mui-bar-nav"> 13 <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> 14 <h1 class="mui-title">第三方支付</h1> 15 </hrader> 16 <div class="mui-content"> 17 支付金额： 18 <input id="jine" type="number" value="0.01" /> 元 19 <div class="top oauth-area" id="testLogin"> 20 <input type="button" id="wxpay" class="weixin pay" value="微信支付" /> 21 <input type="button" id="alipay" class="zhifubao pay" value="支付宝支付" /> 22 </div> 23 </div> 24 <ul class="mui-table-view"> 25 <li class="mui-table-view-cell"> 支付方式: <span id="channel"></span> </li> 26 <li class="mui-table-view-cell"> 订单号: <span id="bill_no"></span> </li> 27 <li class="mui-table-view-cell"> 支付金额: <span id="total_fee"></span> </li> 28 <li class="mui-table-view-cell"> 支付状态:<span id="status"></span> </li> 29 <textarea name="" id="status_msg" cols="20" rows="5"></textarea> 30 </ul> 31 </body> 32 </html> 33 <script type="text/javascript" src="js/mui.min.js"></script> 34 <script type="text/javascript" src="js/beecloud.js"></script> 35 <script> 36 mui.init({ 37 swipeBack: true //启用右滑关闭功能 38 }); 39 mui('.mui-content').on('tap', '.pay', function() { // 获取 点击效果微信还是支付平台 40 var channel_id = null; 41 switch(this.id) { 42 case 'alipay': 43 channel_id = 'ALI_APP'; 44 break; 45 case 'wxpay': 46 channel_id = 'WX_APP'; 47 break; 48 default: 49 break; 50 } 51 beecloudPay(channel_id); 52 document.getElementById("channel").innerHTML = channel_id; 53 document.getElementById("total_fee").innerHTML = document.getElementById('jine').value; 54 document.getElementById("bill_no").innerHTML = beecloud.genBillNo(); 55 }) 56 57 function beecloudPay(bcChannel) { 58 //因DCloud尚未申请银联账号，故支付宝、微信使用的是DCloud的appid，银联暂时使用BeeCloud的appid，开发者这里无需判断，直接写一个appid即可； 59 var _appid = bcChannel == "UN_WEB" ? "c37d661d-7e61-49ea-96a5-68c34e83db3b" : "44f01a13-965f-4b27-ba9f-da678b47f3f5" 60 /* 61 * 构建支付参数 62 * app_id: BeeCloud控制台上创建的APP的appid，必填 63 * title: 订单标题，32个字节，最长支持16个汉字；必填 64 * total_fee: 支付金额，以分为单位，大于0的整数，必填 65 * bill_no: 订单号，8~32位数字和/或字母组合,确保在商户系统中唯一，必填 66 * optional: 扩展参数,可以传入任意数量的key/value对来补充对业务逻辑的需求;此参数会在webhook回调中返回; 选填 67 * bill_timeout: 订单失效时间,必须为非零正整数，单位为秒，必须大于360。选填 68 */ 69 var payData = { 70 app_id: _appid, 71 channel: bcChannel, 72 title: "DCloud项目捐赠", 73 total_fee: document.getElementById('jine').value * 100, 74 bill_no: beecloud.genBillNo(), 75 optional: { 76 'uerId': 'beecloud', 77 'phone': '4006280728' 78 }, 79 bill_timeout: 360, 80 return_url: "http://www.dcloud.io/demo/pay" //wap支付成功后的回跳地址 81 }; 82 /* 发起支付 83 * payData: 支付参数 84 * cbsuccess: 支付成功回调 85 * cberror: 支付失败回调 86 */ 87 beecloud.payReq(payData, function(result) { 88 document.getElementById("status").innerHTML = 'success'; 89 document.getElementById("status").style.color = 'green' 90 document.getElementById("status_msg").innerHTML = "-------- 支付成功 --------" + "\n感谢您的支持,我们会继续努力完善产品"; 91 console.log(result); 92 }, function(e) { 93 document.getElementById("status").innerHTML = 'failed'; 94 document.getElementById("status").style.color = 'red' 95 document.getElementById("status_msg").innerHTML = "-------- 支付失败 --------\n" + "错误码：" + e.code + '\n' + e.message; 96 }); 97 } 98 </script>