MUI APP微信支付前端代码示例
MUI APP微信支付前端代码示例
开发工具：HbuilderX
manifest.json文件配置：勾选OAuth登录权限，填写appid和appsecret的值；在Payment支付中勾选微信支付，填写appic值
发布页面中：填写包名称，私钥密码（微信支付建议用私钥）
mui 支付页面：zf.html代码如下
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>支付title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" type="text/css" href="css/swiper.css" />
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery.js">script>
<script type="text/javascript" src="js/swiper.min.js">script>
<link rel="stylesheet" type="text/css" href="css/icons-extra.css" />
<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
<script src="js/mui.min.js">script>
<script type="text/javascript" src="js/config.js">script>
<script>
$(document).ready(function(){
Date.prototype.Format = function (fmt) { // author: meizz
var o = {
"M+": this.getMonth() + 1, // 月份
"d+": this.getDate(), // 日
"h+": this.getHours(), // 小时
"m+": this.getMinutes(), // 分
"s+": this.getSeconds(), // 秒
"q+": Math.floor((this.getMonth() + 3) / 3), // 季度
"S": this.getMilliseconds() // 毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
var time2 = new Date().Format("yyyyMMddhhmmss");
var x = 100,y = 999;
var rdomstr=Math.round(Math.random()*(y-x)+x);
var ddnomstr="cz"+time2+rdomstr;
document.getElementById('Ddnom').innerText=ddnomstr;
//上述代码获生成订单号，充值订单号组成：cz+时间+3位随机码
});
script>
<style type="text/css">
.top {
margin-top: 40px;
}
.weixin {
width: 200px;
height: 50px;
margin-left: 50px;
background: url(../images/icon-weixin.png);
}
.zhifubao {
width: 200px;
height: 50px;
margin-left: 50px;
background: url(../images/alipay.jpg);
}
#jine{
-webkit-user-select:text;
text-align:right;
padding:0 1em;
border: 0px;
border-bottom:1px solid #ECB100;
border-radius: 0;
font-size:16px;
width:30%;
outline:none;
text-align:center;
}
style>
head>
<body>
<hrader 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>
hrader>
<div class="mui-content">
<div class="wyPay-df-title">
<ul>
<li>
支付订单号:
<span id="Ddnom">span>
li>
ul>
div>
<div>
捐赠金额：<input id="jine" type="text" style="width: 200px; color: #0033FF;" value="12500" /> 元
div>
<div class="top" id="testLogin" >
<input type="button" class="weixin" id="weixin1" value="微信支付" />
<input type="button" class="zhifubao" id="zhifubao" value="支付宝支付" />
div>
div>
<script>
var wxChannel = null; // 微信支付
var aliChannel = null; // 支付宝支付
var channel = null; //支付通道
mui.init({
swipeBack:true //启用右滑关闭功能
});
mui.plusReady(function() {
// 获取支付通道
plus.payment.getChannels(function(channels){
for (var i in channels) {
if (channels[i].id == "wxpay") {
wxChannel=channels[i];
}else{
aliChannel=channels[i];
}
}
},function(e){
alert("获取支付通道失败："+e.message);
});
})
document.getElementById('weixin1').addEventListener('tap',function() {
// console.log("微信");
pay('wxpay');
})
document.getElementById('zhifubao').addEventListener('tap',function() {
// console.log("zhifubao");
pay('alipay');
})
var ALIPAYSERVER='http://127.0.0.1:999/AppServer.aspx?TotalAmount=';
var WXPAYSERVER='http://127.0.0.1:999/AppServer.aspx?TotalAmount=';
// 2. 发起支付请求
function pay(id){
// 从服务器请求支付订单
var PAYSERVER='';
if(id=='alipay'){
PAYSERVER=ALIPAYSERVER;
channel = aliChannel;
}else if(id=='wxpay'){
PAYSERVER=WXPAYSERVER;
channel = wxChannel;
}else{
plus.nativeUI.alert("不支持此支付通道！",null,"捐赠");
return;
}
var xhr=new XMLHttpRequest();
var amount = document.getElementById('jine').value;
var ddnoms=document.getElementById('Ddnom').innerText;
alert(ddnoms);
xhr.onreadystatechange=function(){
switch(xhr.readyState){
case 4:
if(xhr.status==200){
plus.payment.request(channel,xhr.responseText,function(result){
plus.nativeUI.alert("支付成功！",function(){
back();
});
},function(error){
plus.nativeUI.alert("支付失败：" + error.code);
});
}else{
alert("获取订单信息失败！");
}
break;
default:
break;
}
}
xhr.open('GET',PAYSERVER+amount+"&PayDdnom="+ddnoms);
xhr.send();
}
script>
<script type="text/javascript" src="js/immersed.js" >script>
body>
html>