Sale-Phine🐑 简单的H5模块
以下是我在工作中做的一个简单的H5模块，一起看看吧....
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>众成鑫富</title>
</head>
<body>
<div id="main">
<header>
微信支付
</header>
<main>
<div class="iptBox">
<input type="text" placeholder="请输入您的充值号码!" id="ipt">
<div class="info">
<span class="errTip"></span>
</div>
</div>
<div class="pro" id="qrcode" ref="qrcode"></div>
<div class="check">充值价格: <span>10.00</span>元</div>
</main>
<footer>
<button id="payBtn">生成支付码</button>
</footer>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.19.0/js/md5.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
// 设置全局延迟调用时长
const waitDuration = 500;
// 请求地址baseUrl
const baseUrl = "http://192.168.9.34:8001";
// 设置AES加密key
const aesKey = "wRdSzczXttHFtXyC";
// 设置appSecret
const appSecret = "6cd8132a04df9592bf8fadca6061d939";
// 设置appid(支付)
const payAppId = "9t3f2twrcpl";
// 设置version版本
const version = "v1.0";
// 设置二维码生成链接
var codeUrl;
// appid=23raqkwr9ll
// appsecret=f8d81572105cb719bb1a1ecfd7fed244
// aeskey=eKJTNaCswmaikbZQ
// 获取dom节点,为按钮绑定点击事件(加入节流功能函数)
var payBtn = document.querySelector('#payBtn');
var telPhoneVal = document.querySelector('#ipt');
var errTip = document.querySelector('.errTip');
var qrcodeBox = document.getElementById('qrcode');
let pp = document.createElement('p');
pp.innerHTML = "支付二维码展示窗口";
document.querySelector('#qrcode').appendChild(pp);
// 定义两个缓存值(充值账号)
var firstLen = 0;
var lastLen = 0;
var reg = /^1(3|4|5|7|8)\d{9}$/;
// 支付按钮触发点击事件
payBtn.addEventListener("click", clickFn(clickEvent, waitDuration));
// 节流功能函数,防止用户多次触发
function clickFn(fn, delay) {
let timer;
return function () { // 这里是标签的点击事件调用该匿名函数，所以该匿名函数指向fn的DOM节点
if (timer) {
return;
}
let that = this;
let arg = arguments;
timer = setTimeout(function () {
fn.apply(that, arg);
timer = null;
}, delay)
}
};
// 支付函数,以下为支付业务功能代码
function clickEvent() {
// !!! 再点击支付的时候删除#qrcode下面的所有子节点
if (qrcodeBox.childNodes) {
for (var i = qrcodeBox.childNodes.length - 1; i >= 0; i--) {
qrcodeBox.removeChild(qrcodeBox.childNodes[i]);
}
};
qrcodeBox.style.border="1px solid #007aff";
// 请求之前创建节点告知用户二维码正在加载
let pp = document.createElement('p');
pp.innerHTML = "支付二维码正在生成中...";
document.querySelector('#qrcode').appendChild(pp);
// 设置支付参数
const data = {
openId: Math.random().toString(36).substr(2),
merPayOrderId:Math.random().toString(36).substr(2),
// merPayOrderId: '2423hf2434l3lfsdk',
amount: 1,
desc: "测试支付"
};
// 设置参数加密
var encrypt = CryptoJS.AES.encrypt(JSON.stringify(data), CryptoJS.enc.Utf8.parse(aesKey), {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
}).toString();
// 设置参数解密
var decrypt = CryptoJS.AES.decrypt(encrypt, CryptoJS.enc.Utf8.parse(aesKey), {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
}).toString(CryptoJS.enc.Utf8);
// 设置请求参数(获取微信支付二维码)
const postOBj = {
timestamp: new Date().valueOf(),
edata: encrypt,
sign: md5(JSON.stringify(data) + (new Date().valueOf()) + appSecret),
appid: payAppId,
version: version
};
// 原生请求跨域!!!!!!!!!!! this question comes from back-end;
$.ajax({
url: "http://192.168.9.34:8001/api/pay",
type: "POST",
dataType: "json",
headers: {
"content-type": 'application/json'
},
contentType: 'application/json',
data: JSON.stringify(postOBj),
success: function (res) {
console.log(res, '响应数据');
if (res.code == 10) {
setTimeout(() => {
if (qrcodeBox.childNodes) {
for (var i = qrcodeBox.childNodes.length - 1; i >= 0; i--) {
qrcodeBox.removeChild(qrcodeBox.childNodes[i]);
}
};
qrcodeBox.style.border="1px solid transparent";
// new QRCode(document.getElementById("codeBox"), res.data.QrcodeUrl); // 设置要生成二维码的链接(便捷式生成无法设置宽高)
var qrcode = new QRCode('qrcode', {
text: res.data.QrcodeUrl ? res.data.QrcodeUrl : '',
width: 256,
height: 256,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.Q
});
qrcode.makeCode();
}, 1000);
} else {
setTimeout(() => {
if (qrcodeBox.childNodes) {
for (var i = qrcodeBox.childNodes.length - 1; i >= 0; i--) {
qrcodeBox.removeChild(qrcodeBox.childNodes[i]);
}
};
let pp = document.createElement('p');
pp.innerHTML = "支付码生成失败,请重新支付!";
document.querySelector('#qrcode').appendChild(pp);
}, 1000);
}
},
error: function (err) {
console.log(err);
}
});
};
// 手机号验证
telPhoneVal.oninput = function () {
telPhoneVal.value = telPhoneVal.value.substr(0, 13); //只允许输入11位+2个空格
//用户输入满11位开始验证
if (telPhoneVal.value.length == 13) {
//将数据去掉空格后验证
if (!reg.test(telPhoneVal.value.replace(/\s/g, ''))) {
errTip.innerHTML = '*' + ' ' + '您输入的手机账号有误,请重新输入'
} else {
errTip.innerHTML = ''
}
} else {
errTip.innerHTML = ''
}
};
// 手机号四位分割
telPhoneVal.onfocus = function () {
timer = setInterval(function () {
lastLen = telPhoneVal.value.length;
if (lastLen > firstLen) {
firstLen = telPhoneVal.value.length;
if (lastLen === 4 || lastLen === 9) {
var temp1 = telPhoneVal.value.substr(0, telPhoneVal.value.length - 1);
var temp2 = telPhoneVal.value.substr(telPhoneVal.value.length - 1);
telPhoneVal.value = temp1 + ' ' + temp2;
}
} else if (lastLen <= firstLen) {
if (lastLen === 4 || lastLen === 9) {
telPhoneVal.value = telPhoneVal.value.substr(0, telPhoneVal.value.length - 1);
}
firstLen = telPhoneVal.value.length;
}
}, 10); //如果手机出现卡顿，可适当把定时器时间加大
};
</script>
<style>
* {
padding: 0;
margin: 0;
}
body,
html {
width: 100%;
height: 100%;
}
#main {
width: 100%;
height: 100%;
background-color: #f2f2f2;
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
flex-direction: column;
}
header {
height: 30px;
width: 100%;
background-color: #5298e4;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
font-family: 'Courier New', Courier, monospace;
color: #fff;
font-weight: bolder;
letter-spacing: 1px;
}
main {
flex: 1;
width: 100%;
height: 100%;
overflow-y: scroll;
background: #fff;
}
.iptBox {
display: flex;
height: 20%;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 5px 0px;
box-sizing: border-box;
}
.iptBox input {
display: inline;
height: 50px;
width: 90%;
outline: none;
border: none;
font-size: 26px;
font-weight: bolder;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border-radius: none !important;
}
.info {
width: 90%;
margin: 0 auto;
border-top: 1px solid #87aacf;
height: 40px;
margin-top: 5px;
color: #f55c64;
font-size: 13px;
padding-top: 18px;
}
.pro {
width: 256px;
margin: 0 auto;
margin-top: 15px;
display: flex;
justify-content: center;
align-items: center;
height: 256px;
border: 1px solid #007aff;
}
#qrcode>>>canvas {
width: 250px !important;
height: 250px !important;
}
#qrcode>>>img {
width: 250px !important;
height: 250px !important;
}
#qrcode p {
font-size: 18px;
color: #666;
font-family: '楷体';
font-weight: 600;
}
.check {
padding: 10px 5%;
box-sizing: border-box;
font-size: 16px;
color: #333;
font-family: '楷体';
margin-top: 30px;
}
.check span {
font-size: 22px;
color: #007aff;
}
footer {
width: 100%;
background-color: rgba(255, 255, 255, 0.4);
display: flex;
justify-content: center;
align-items: center;
padding: 15px 0px 24px 0px;
box-sizing: border-box;
}
button {
width: 160px;
line-height: 38px;
text-align: center;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px #333;
border-radius: 5px;
position: relative;
overflow: hidden;
border: 1px solid #007aff;
box-shadow: 0 1px 2px #388ae2 inset, 0 -1px 0 #498fda inset, 0 -2px 3px #b9ecc4 inset;
background: -webkit-linear-gradient(top, #2880dd, #6289b3);
background: -moz-linear-gradient(top, #2b85e6, #2680e0);
background: linear-gradient(top, #3987db, #438ddb);
}
button:hover {
background: -webkit-linear-gradient(top, #40e048, #2fcc7d);
background: -moz-linear-gradient(top, #40e048, #2fcc7d);
background: linear-gradient(top, #40e048, #2fcc7d);
}
input::-webkit-input-placeholder {
/* WebKit browsers*/
color: #ccc;
font-size: 14px;
letter-spacing: 1px;
display: table-cell;
vertical-align: top;
font-style: oblique;
padding-left: 2px;
font-family: '楷体';
}
input:-moz-input-placeholder {
/* Mozilla Firefox 4 to 18*/
color: #ccc;
font-size: 14px;
letter-spacing: 1px;
display: table-cell;
vertical-align: top;
font-style: oblique;
font-family: '楷体';
}
input::-moz-input-placeholder {
/* Mozilla Firefox 19+*/
color: #ccc;
font-size: 14px;
letter-spacing: 1px;
display: table-cell;
vertical-align: top;
font-style: oblique;
font-family: '楷体';
}
input:-ms-input-placeholder {
/* Internet Explorer 10+*/
color: #ccc;
letter-spacing: 1px;
font-size: 14px;
display: table-cell;
vertical-align: top;
font-style: oblique;
font-family: '楷体';
}
</style>
</body>
</html>
- 好了，以上的总结就到此为止了，如果
有疑问可以不问也可以联系作者。咱们下期再见! Good bye! 🌸