頻道欄目
首頁 > 資訊 > HTML/CSS > 正文

MUI框架下微信支付功能實現教程

18-06-14        來源:[db:作者]  
收藏   我要投稿

在MUI 框架中實現了支付寶支付后,以為MUI微信支付,也沒什么大問題,結果這個問題困擾了我幾天,后面再同事的提醒下終于弄出來了,

問題出在,開始使用Dcloud 公有證書 怎么也付不了。。。。,后面改成自己就OK了。。。。希望后來者看到此文章,能節約一點時間。

https://img1.mukewang.com/5b1f56c600012bd805470574.jpg

<!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>

https://img4.mukewang.com/5b1f56fa0001ac2507201280.jpg

之前測試預留

<!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>
相關TAG標簽
上一篇:臺積電:絕大多數7nm客戶都會轉向6nm_IT新聞_博客園
下一篇:最后一頁
相關文章
圖文推薦

關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

美女MM131爽爽爽毛片