在MUI 框架中实现了支付宝支付后，以为MUI微信支付，也没什么大问题，结果这个问题困扰了我几天，后面再同事的提醒下终于弄出来了，

问题出在，开始使用Dcloud 公有证书 怎么也付不了。。。。，后面改成自己就OK了。。。。希望后来者看到此博，能节约一点时间。

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

之前测试预留

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

MUI 框架微信支付的更多相关文章

  1. 【微信支付】公众号 JSAPI支付 HTML5(使用MUI前端框架)+WebApi 实现流程

    必要参数:      1) AppID,AppSecret : 在微信公众号后台管理—>(菜单栏)开发 —> 基本设置     2)商户号 :在微信公众号后台管理—>(菜单栏)微信支 ...

  2. ***PHP基于H5的微信支付开发详解（CI框架）

    这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...

  3. Mui 微信支付、支付宝支付

    利用mui 发起手机微信和支付宝支付 payStatement :调起微信支付接口的参数 参考文档: https://pay.weixin.qq.com/wiki/doc/api/app/app.ph ...

  4. Koa系框架（egg/cabloy）如何获取微信支付回调请求中的xml参数

    背景 在Koa系框架(如EggJS)中进行微信支付开发时,遇到一个问题:微信支付平台会发送一个回调请求,通知支付订单的处理结果.该请求传入的参数是xml格式,而Koa中间件koa-bodyparser ...

  5. 微信支付——基于laravel框架的php实现

    现在经手的几乎每个项目都支持微信支付,简单记录下接入的大致流程. 1.首先商户等申请各种账号,微信支付商户号,APPID,API密钥,Appsecret 2.app端上传支付需要的各个字段 3.后台收 ...

  6. 【原创分享·微信支付】C# MVC 微信支付教程系列之现金红包

            微信支付教程系列之现金红包           最近最弄这个微信支付的功能,然后扫码.公众号支付,这些都做了,闲着无聊,就看了看微信支付的其他功能,发现还有一个叫“现金红包”的玩意,想 ...

  7. 【原创分享·微信支付】 C# MVC 微信支付教程系列之扫码支付

    微信支付教程系列之扫码支付                  今天,我们来一起探讨一下这个微信扫码支付.何为扫码支付呢?这里面,扫的码就是二维码了,就是我们经常扫一扫的那种二维码图片,例如,我们自己添 ...

  8. 【原创分享·微信支付】 C# MVC 微信支付教程系列之公众号支付

    微信支付教程系列之公众号支付         今天,我们接着讲微信支付的系列教程,前面,我们讲了这个微信红包和扫码支付.现在,我们讲讲这个公众号支付.公众号支付的应用环境常见的用户通过公众号,然后再通 ...

  9. 【原创分享·微信支付】C# MVC 微信支付之微信模板消息推送

    微信支付之微信模板消息推送                    今天我要跟大家分享的是“模板消息”的推送,这玩意呢,你说用途嘛,那还是真真的牛逼呐.原因在哪?就是因为它是依赖微信生存的呀,所以他能不 ...

随机推荐

  1. JavaOOP项目 CMS内容管理系统

    数据库里创建一个News表,要有标题.作者.时间.内容等列. 1:首先要使用JDBC进行数据库连接,得先在项目里新建一个Folder,把Sqlserver 的驱动jar包导入. 2:使用MyEclip ...

  2. linux时间的查看与修改

    1.查看时间和日期 date 2.设置时间和日期 将系统日期设定成1996年6月10日的命令 date -s 06/22/96 将系统时间设定成下午1点52分0秒的命令 date -s 13:52:0 ...

  3. sql 查看 锁定的表 或者 未提交 的事务

    --查看锁定的 表select request_session_id spid,OBJECT_NAME(resource_associated_entity_id) tableName from sy ...

  4. JQuery获取和设置Select选项常用方法总结

    1.获取select 选中的 text: $("#cusChildTypeId").find("option:selected").text(); $(&quo ...

  5. oracle添加日志表

    --创建表 CREATE TABLE KNET_DOMAIN_DNS_FORWARDED ( ID BYTE) DEFAULT sys_guid() NOT NULL , KEYWORD BYTE) ...

  6. zw版【转发·台湾nvp系列Delphi例程】HALCON DirectFile

    zw版[转发·台湾nvp系列Delphi例程]HALCON DirectFile unit Unit1;interfaceuses Windows, Messages, SysUtils, Varia ...

  7. DIB位图文件的格式、读取、保存和显示（转载）

    一.位图文件结构 位图文件由三部分组成:文件头 + 位图信息 + 位图像素数据 1.位图文件头:BitMapFileHeader.位图文件头主要用于识别位图文件.以下是位图文件头结构的定义: type ...

  8. Three.js - 网页3D应用的普及已经指日可待了

    Three.js可以高效实现3D效果,真不赖.

  9. SQL SERVER 2008 中三种分页方法与总结

    建立表: CREATE TABLE [TestTable] ( , ) NOT NULL , ) COLLATE Chinese_PRC_CI_AS NULL , ) COLLATE Chinese_ ...

  10. Dijkstra 算法、Kruskal 算法、Prim算法、floyd算法

    1.dijkstra算法 算最短路径的,算法解决的是有向图中单个源点到其他顶点的最短路径问题. 初始化n*n的数组. 2.kruskal算法 算最小生成树的,按权值加入 3.Prim算法 类似dijk ...