MUI 框架微信支付

時間 2019-11-20

標籤 mui 框架微信支付简体版

原文原文鏈接

在MUI 框架中實現了支付寶支付後，覺得MUI微信支付，也沒什麼大問題，結果這個問題困擾了我幾天，後面再同事的提醒下終於弄出來了，javascript

問題出在，開始使用Dcloud 公有證書怎麼也付不了。。。。，後面改爲本身就OK了。。。。但願後來者看到此博，能節約一點時間。php

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <script src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet" />
        <script type="text/javascript" charset="utf-8">
            mui.init();
            mui.plusReady(function() 
            {
                //定義支付通道
                var channel = null;
                //獲取支付通道
                getChannels();
                //獲取支付通道的方法
                function getChannels() 
                {
                    plus.payment.getChannels(function(channels) {
                        for (var i = 0; i < channels.length; i++) {
                            if (channels[i].id == "wxpay") {
                                channel = channels[i];
                            }
                        }
                        plus.ui.toast("使用支付方式:" + channel.id);
                    }, function(e) {
                        plus.ui.toast("獲取支付通道失敗!");
                        console.log("獲取支付通道失敗!");
                    })
                }
                
                //發起微信支付請求的方法
                function pay(){
                    //獲取微信支付參數的url
                    //var basic_url="http://microtivo.chinacloudapp.cn:9202/";
                 var basic_url='http://www.m.rfvip.cn:20677/WX/index?';
                    mui.ajax(basic_url,{
                        data:"",
                        dataType:"json",
                        type:"get",
                        success:ajax_success_callback,
                        error:ajax_error_callback
                    })
                }
                
                //獲取微信支付參數成功的回調函數
                function ajax_success_callback(resObj)
                {
                    console.log("請求微信支付參數成功,返回的json:");
                    var res_str=JSON.stringify(resObj);
                    console.log(res_str);
                    //用返回參數 發起微信支付請求
                    plus.payment.request(channel,res_str,wxpay_success,wxpay_error);
                }
                //獲取微信支付參數失敗的回調函數
                function ajax_error_callback(e){
                    console.log("ajax獲取參數失敗");
                }
                //微信支付成功回調
                function wxpay_success(result){
                    plus.ui.alert("支付成功!",function()
                    {
                        back();
                    })
                }
                //微信支付失敗回調
                function wxpay_error(error){
                    plus.ui.alert("支付失敗!");
//                    plus.ui.alert(JSON.stringify(error));
//                    console.log(JSON.stringify(error));
                }
                //微信支付按鈕 發起微信支付
                document.getElementById("btn_pay").addEventListener("tap",function()
                {
                    pay();
                })
            });
        </script>
    </head>

    <body>
        <button id="btn_pay" class="mui-btn mui-btn-blue" style="margin-top: 400px;margin-left: 30%;">微信支付</button>
    </body>

</html>

View Code

以前測試預留css

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
          mui.init();
            var channel = null;
            var channels = null;
             // 1. 獲取支付通道
            function plusReady() {
                // 獲取支付通道
                plus.payment.getChannels(function(cs) {
                    channels = cs;
                   
                },
                function(e) {
                    alert("獲取支付通道失敗：" + e.message);
                });
            }
            document.addEventListener('plusready', plusReady, false);
           // var ALIPAYSERVER = 'http://demo.dcloud.net.cn/helloh5/payment/alipay.php?total=';
     //var WXPAYSERVER = 'http://www.m.rfvip.cn:20677/WX/index?payid=wxpay&appid=wx84f0ceea370f1748&total=1';
     // var WXPAYSERVER = 'http://www.m.rfvip.cn:20677';
    var WXPAYSERVER = 'http://demo.dcloud.net.cn/payment/?payid=wxpay&appid=HBuilder&total=1';
             // 2. 發起支付請求
            function pay(id) {
                // 從服務器請求支付訂單
                var PAYSERVER = '';
             if (id == 'wxpay') { PAYSERVER = WXPAYSERVER; }
               console.log("id==>"+id);
             console.log("payserver==>"+WXPAYSERVER);
               for (var i in channels)
                {
                    if (channels[i].id == id) 
                    {
                       channel = channels[i];
                  }
                }
                mui.get(PAYSERVER, function(data) {
                    var varpay = {
                        appid: "wx0411fa6a39d61297",
                        noncestr: "oUn3BJl37NhyEPgf",
                        package: "Sign=WXPay",
                        partnerid: "1230636401",
                        prepayid: "wx20151203182611a03572a62d0054237692",
                        timestamp: "1449138371",
                        sign: "313966BE242897F2A82090190630A2D0"
                    }


                  
                   console.log("appid==>"+varpay.appid);
                   console.log("noncestr==>"+varpay.noncestr);
                   console.log("package==>"+varpay.package);
                   console.log("partnerid==>"+varpay.partnerid);
                   console.log("prepayid==>"+varpay.prepayid);
                   console.log("timestamp==>"+varpay.timestamp);
                   console.log("sign==>"+varpay.sign);
                  
                    plus.payment.request(channel, varpay, function(result) {
                        plus.nativeUI.alert("支付成功！", function() {
                            back();
                        });
                    }, function(e) {
                        plus.nativeUI.alert("支付失敗：" + e.code + "支付失敗：" + e.message);
                        console.log(e.code);
                        console.log(e.message);
                    });
                }, "json");

                    /*          xhr.open('GET',PAYSERVER);
                                xhr.send();*/
            }
    </script>
</head>
<body>
     <header 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>
        </header>
        <div class="mui-content">
            <input type="button" class="btn btn-lg" id="pay" value="微信支付" onclick="pay('wxpay')" />
        </div>

</body>
</html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。