目录
这个活动页已经完成有一段时间了、功能点也比较单一、重点还是在PC端和H5端微信支付这一块、H5端在生成环境下调试也比较麻烦、我把前端的代码列出来给大家参考参考、希望对大家有点帮助
pc端比较简单,主要请求后端返回的二维码展示并去轮询用户是否完成支付、改变支付状态实现完整的完成支付流程
3.Pc端完整的实现代码、样式部分我就不贴出来了、主要是实现逻辑
2.功能描述:h5端主要的一点还是跟后端去联调配置参数这一块、在微信端调起支付、后端一般会出两个接口给前端这边、获取openid的接口、调起支付的回调接口
获取code--请求获取openid--请求支付回调--支付成功
三、总结:以上是我实现H5端、PC端完整的代码和逻辑、希望对各位同学有帮助
前言
这个活动页已经完成有一段时间了、功能点也比较单一、重点还是在PC端和H5端微信支付这一块、H5端在生成环境下调试也比较麻烦、我把前端的代码列出来给大家参考参考、希望对大家有点帮助
一、PC端微信扫码支付功能
1.功能描述:
pc端比较简单,主要请求后端返回的二维码展示并去轮询用户是否完成支付、改变支付状态实现完整的完成支付流程
2.示例图片
3.Pc端完整的实现代码、样式部分我就不贴出来了、主要是实现逻辑
import React, { useState, useEffect } from 'react';
import request from '@/utils/request';
import api from '@/api';
import stores from '@/stores';
function YourComponent() {
const [isPollingActive, setIsPollingActive] = useState(false);
const [resultCode, setResultCode] = useState('');
const [returnCode, setReturnCode] = useState('');
const [tradeState, setTradeState] = useState('');
const startPolling = (outTradeNo) => {
setIsPollingActive(true); // 设置标志变量为 true
const pollingTimer = setInterval(async () => {
await getQueryOrder(outTradeNo);
if (isPollingActive) {
if (resultCode === 'SUCCESS' && returnCode === 'SUCCESS' && tradeState === 'SUCCESS') {
handleSuccessPayment();
}
}
}, 1000); // 每隔 1秒轮询一次
return pollingTimer;
};
const getQueryOrder = async (outTradeNo) => {
try {
const response = await request({
method: 'POST',
url: api.queryOrderStatus,
data: { outTradeNo },
});
if (response.code === 200) {
const { resultCode, returnCode, tradeState } = response.data;
setResultCode(resultCode);
setReturnCode(returnCode);
setTradeState(tradeState);
}
} catch (error) {
stores.Frame.warning(error.message);
}
};
const handleSuccessPayment = () => {
// 处理支付成功逻辑
handleCancelQrcodeModal(true);
stores.Frame.success('支付成功');
if (!mechanismUnpaidtype) {
mechanismTemplatesList = [{ id: generateUniqueId(), unpaidState: false }];
}
setTimeout(() => {
setIsPollingActive(false); // 将标志变量设置为 false,停止轮询
getMyPaintings();
stopPolling();
}, 3000); // 设置延时时间,单位为毫秒
};
useEffect(() => {
const pollingTimer = startPolling(outTradeNo);
// 在组件卸载时停止轮询
return () => {
clearInterval(pollingTimer);
setIsPollingActive(false); // 将标志变量设置为 false,停止轮询
};
}, []);
return (
// Your component JSX
);
}
export default YourComponent;
二、H5端自动调起微信支付功能
1.示例图
2.功能描述:h5端主要的一点还是跟后端去联调配置参数这一块、在微信端调起支付、后端一般会出两个接口给前端这边、获取openid的接口、调起支付的回调接口
3.H5端实现过程:
获取code--请求获取openid--请求支付回调--支付成功
4.完整代码
import React, { useEffect } from 'react';
import axios from 'axios';
import stores from './stores'; // 你的数据存储
import utils from './utils'; // 你的工具函数
function YourPaymentComponent() {
const isWechatBrowser = () => {
// 判断是否在微信内置浏览器中
return /MicroMessenger/i.test(navigator.userAgent);
};
// 1. 跳转重定向获取code、一定要配置好相同域名的url才可以获取到code
const getWhatCodeLinks = () => {
// 获取跳转链接并调起微信支付
if (utils.IsWeixin()) {
let mLocation = this.history.location;
let rediectUrl = `${window.location.origin + mLocation.pathname}`;
const growWhatUrl = '微信开发者平台配置的获取code链接';
window.location.href = growWhatUrl;
}
};
// 2. 请求获取code并存储
const getOpenid = async (code) => {
// 获取用户的openid
const url = '获取openid的接口';
const data = {
code,
appId: '配置的appid',
};
try {
const response = await axios.post(url, data);
const responseData = JSON.parse(response.data.data);
this.openId = responseData.openid;
localStorage.setItem('openid', this.openId);
} catch (error) {
console.error('Error:', error);
}
};
// 3. 点击事件请求支付接口
const sendPostRequest = async (openid) => {
const userId = stores.Frame.userInfo && stores.Frame.userInfo.userId;
const phone = stores.Frame.userInfo && stores.Frame.userInfo.phone;
const url = '支付接口';
const timestamp = Date.now();
const requestData = {
wayCode: 'WX_JSAPI',
amount: 0.1, // 支付金额
appId: '配置的appid',
mchOrderNo: `M${timestamp}`,
payDataType: 'codeImgUrl',
authCode: '',
divisionMode: 0,
orderTitle: `活动名称${phone}`,
mchId: 'M1686658386',
openId: openid,
body: userId,
};
try {
const response = await axios.post(url, requestData);
const responseData = JSON.parse(response.data.data.payData);
invokeWechatPayPhone(responseData);
} catch (error) {
console.error('Error:', error);
}
};
// 4. 请求微信支付回调、原生自带的API
const invokeWechatPayPhone = (prepayData) => {
if (!isWechatBrowser()) {
console.error('Not in WeChat browser');
successCopy();
return;
}
if (typeof WeixinJSBridge === 'undefined') {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
} else {
WeixinJSBridge.invoke('getBrandWCPayRequest', prepayData, function (res) {
if (res.err_msg === 'get_brand_wcpay_request:ok') {
console.log('Payment successful');
stores.Frame.success('支付成功');
} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
console.log('Payment cancelled');
stores.Frame.warning('取消支付');
} else {
stores.Frame.warning('支付失败');
console.error('Payment failed');
}
});
}
};
useEffect(() => {
// 在组件加载时执行的初始化逻辑
const code = 'your_wechat_code'; // 你的微信code
getOpenid(code);
}, []);
return (
// Your component JSX
);
}
export default YourPaymentComponent;