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 微信支付之微信模板消息推送
微信支付之微信模板消息推送 今天我要跟大家分享的是“模板消息”的推送,这玩意呢,你说用途嘛,那还是真真的牛逼呐.原因在哪?就是因为它是依赖微信生存的呀,所以他能不 ...
随机推荐
- .NET： 配置文件
VS里项目->添加新项->应用程序配置文件 <?xml version="1.0" encoding="utf-8" ?> <co ...
- 【crunch bang】tint2配置2
# Tint2 config file # Background definitions # ID 1 rounded = 0 border_width = 0 background_color = ...
- yii2 render和renderPartial区别
1.render()方法使用到项目中的布局layout,renderPartial()不使用布局
- jquery 下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 《OpenGL着色语言》理解点记录二
别人提到“OpenGL的处理管线”时,意味着什么? 准确的讲,应该是“OpenGL图形处理管线”,“管线”带有特定的顺序,在OpenGL中就是Graphics Processing Pipeline. ...
- 图像处理工具包ImagXpress中如何定义图像显示属性
图像处理工具包ImagXpress中如何定义图像显示属性,如色彩管理.设置工具栏和工具.设置上下文&工具栏菜单.配置滚动条.鼠标和键等······ 在显示图像时的色彩管理 在ImagXpres ...
- selenium验证码处理
在爬虫过程中经常遇到验证码,如何处理验证码就显得很重要 现在来说貌似没有完美的解决方案,很多都是通过第三方平台来实现验证码的验证 将获取的验证码的url发送到第三方平台,接收平台返回的验证码,貌似很简 ...
- Android 常用工具类之LogUtil，可以定位到代码行，双击跳转
package cn.utils; import android.util.Log; public class LogUtils { public static boolean isDebug = t ...
- 转载WPF SDK研究 之 AppModel
Jianqiang's Mobile Dev Blog iOS.Android.WP CnBlogs Home New Post Contact Admin Rss Posts - 528 Artic ...
- bash环境变量读取顺序
bash环境变量读取顺序: 交互式登录的用户: /etc/profile --> /etc/profile.d/*.sh --> ~/.bash_profile --> ~/.bas ...