MUI 框架微信支付
在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 框架微信支付的更多相关文章
- 【微信支付】公众号 JSAPI支付 HTML5(使用MUI前端框架)+WebApi 实现流程
必要参数: 1) AppID,AppSecret : 在微信公众号后台管理—>(菜单栏)开发 —> 基本设置 2)商户号 :在微信公众号后台管理—>(菜单栏)微信支 ...
- ***PHP基于H5的微信支付开发详解（CI框架）
这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...
- Mui 微信支付、支付宝支付
利用mui 发起手机微信和支付宝支付 payStatement :调起微信支付接口的参数 参考文档: https://pay.weixin.qq.com/wiki/doc/api/app/app.ph ...
- Koa系框架（egg/cabloy）如何获取微信支付回调请求中的xml参数
背景 在Koa系框架(如EggJS)中进行微信支付开发时,遇到一个问题:微信支付平台会发送一个回调请求,通知支付订单的处理结果.该请求传入的参数是xml格式,而Koa中间件koa-bodyparser ...
- 微信支付——基于laravel框架的php实现
现在经手的几乎每个项目都支持微信支付,简单记录下接入的大致流程. 1.首先商户等申请各种账号,微信支付商户号,APPID,API密钥,Appsecret 2.app端上传支付需要的各个字段 3.后台收 ...
- 【原创分享·微信支付】C# MVC 微信支付教程系列之现金红包
微信支付教程系列之现金红包 最近最弄这个微信支付的功能,然后扫码.公众号支付,这些都做了,闲着无聊,就看了看微信支付的其他功能,发现还有一个叫“现金红包”的玩意,想 ...
- 【原创分享·微信支付】 C# MVC 微信支付教程系列之扫码支付
微信支付教程系列之扫码支付 今天,我们来一起探讨一下这个微信扫码支付.何为扫码支付呢?这里面,扫的码就是二维码了,就是我们经常扫一扫的那种二维码图片,例如,我们自己添 ...
- 【原创分享·微信支付】 C# MVC 微信支付教程系列之公众号支付
微信支付教程系列之公众号支付 今天,我们接着讲微信支付的系列教程,前面,我们讲了这个微信红包和扫码支付.现在,我们讲讲这个公众号支付.公众号支付的应用环境常见的用户通过公众号,然后再通 ...
- 【原创分享·微信支付】C# MVC 微信支付之微信模板消息推送
微信支付之微信模板消息推送 今天我要跟大家分享的是“模板消息”的推送,这玩意呢,你说用途嘛,那还是真真的牛逼呐.原因在哪?就是因为它是依赖微信生存的呀,所以他能不 ...
随机推荐
- yii框架中邮箱激活（数字签名）
控制器: //发送邮箱,激活账号 public function actionEmail() { $email=Yii::$app->request->get('em ...
- 复习课程jdbc:使用配置文件properties进行连接数据库,数据库存取图片，批处理，时间戳，事物回滚等等
使用配置文件properties进行连接数据库 首先创建一个file自定义文件名,但是后缀名必须改为.properties(不分大小写):如config.properties: 然后双击config. ...
- 动画--过渡函数 transition-timing-function
transition-timing-function属性指的是过渡的“缓动函数”.主要用来指定浏览器的过渡速度,以及过渡期间的操作进展情况,其中要包括以下几种函数: (单击图片可放大) 案例展示: 在 ...
- Css3中的变形与动画
新的转换属性 下面的表格列出了所有的转换属性: 属性 描述 CSS transform 向元素应用 2D 或 3D 转换. 3 transform-origin 允许你改变被转换元素的位置. 3 2D ...
- hdu4918 Query on the subtree
树分治,设当前树的分治中心为x,其子树分治中心为y,则设father[y]=x,分治下去则可以得到一颗重心树,而且树的深度是logn. 询问操作(x,d),只需要查询重心树上x到重心树根节点上的节点的 ...
- Kafka集群模式部署
环境:kafka 0.8.1.1 基本概念 Kafka维护按类区分的消息,称为主题(topic) 生产者(producer)向kafka的主题发布消息 消费者(consumer)向主题注册,并且接收发 ...
- paper 1：图像特征提取
特征提取是计算机视觉和图像处理中的一个概念.它指的是使用计算机提取图像信息,决定每个图像的点是否属于一个图像特征.特征提取的结果是把图像上的点分为不同的子集,这些子集往往属于孤立的点.连续的曲线或者连 ...
- canvas基本画图
<img src="img/lamp.gif" id="lamp"/> <img src="img/eg_tulip.jpg&quo ...
- ThinkPHP讲解（二）控制器
在这一节,具体讲解控制器,以Jiaowu应用目录为例. 1.如何写控制器,如何写操作方法? 在模块控制器目录Controller下新建一个控制器文件MainController.class.php,写 ...
- javascript和jquery中获取列表的索引
网页中的图片预览一般都需要获取图片列表的索引,或则图片对应的标签的索引,以此达到点击相应的标签获取索引,显示相应的图片 列表有很多种表达的方式,一种是 <ul> <li>苹果& ...