一、背景介绍
最近接到一个项目，需要在微信公众号菜单中集成一个vue系统，支持下单、微信支付等功能，下面就微信支付核心部分做一下记录。
二、对接流程图
1）对接流程图
2）涉及接口
（接口地址：API列表-JSAPI支付 | 微信支付商户平台文档中心）
三、微信支付相关申请及配置
在正式编码之前，需要进行各种微信相关的申请和配置，下面简单介绍一下
1）注册微信商户平台账号
注册地址：接入微信支付 - 微信商户平台
2）微信商户平台配置
微信商户平台接口文档：微信支付接入指引 - 微信支付商户平台
按接口文档配置各种参数（内容很多，仔细看）
3）注册微信公众号账号
地址：https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN
4）微信公众号配置
域名配置
微信公众号与商户平台建立关联
四、编码相关
1、微信支付无非是接口对接，逻辑其实不复杂，复杂的是签名及验签，这个是编码前需要重点突破的点
2、在微信支付对接中证书是有2份的，如流程图中所示：微信商户服务平台下发的证书、定期获取的平台证书
下图中的证书全部来自：微信商户服务平台下发的证书（证书查看地址：证书查看，可通过连接查看证书内容）
1）前端：JSAPI下单及调起支付代码
<template>
<div style="width:100%;" class="OrderPayClass" >
<IfcaNavbar :navTitle="'微信支付'"></IfcaNavbar>
<div style="width:100%;margin-top:50px">
正在转向中，请稍候...
<br>
<div style="width:100%;">
如果系统长时间无响应，请<div @click="GoToDetail()" style="color:blue">单击此处</div>查看订单状态
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.OrderPayClass {
.tab-panel {
display: flex;
background-color: #fff;
padding: 10px 0px;
.tab {
flex: 1;
text-align: center;
.tab-name {
margin-top: 7px;
}
}
}
}
</style>
<script>
import IfcaNavbar from "../../components/IfcaNavbar.vue";
import { reactive, ref, createApp, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { postHttp ,postWeiXinApiHttp} from "../../assets/js/httpApi.js";
import { showLoadingToast, closeToast, showFailToast, showToast, showDialog, showSuccessToast, Uploader } from 'vant';
export default {
components: {
IfcaNavbar
},
data() {
const orderguid = this.$route.query.orderguid;
const wxcode = this.$route.query.code;
const wxopenid = this.$route.query.wxopenid;
return {
orderguid:orderguid,
wxcode: wxcode,
wxopenid: wxopenid,
}
},
created() {
this.WXPayCore();
},
methods: {
GoToDetail() {//跳转详情查看支付进度
this.$router.push({
path: "/OrderDetial",
query: { orderId: this.orderguid }
})
},
/**
* 微信JSAPI下单
*/
WXPayCore() {
let params = {
orderguid:this.orderguid,
wxcode: this.wxcode,
openid:this.wxopenid,
requesturl:location.href//备用，暂时没用到
}
showLoadingToast({
message: '正在处理，请稍后...',
forbidClick: true,
overlay: true,
duration: 0,
loadingType: 'spinner',
});
console.log(JSON.stringify(params));
this.$postWeiXinApiHttp("AppWebService", "WXPaymentJsApi", JSON.stringify(params)).then(e => {
closeToast();
console.log(e.data.Success);
//showFailToast('e.data.Success;'+e.data.Success);
if (e.data.Success) {
let dataSource = JSON.parse(e.data.Data);
//showFailToast('dataSource.appId;'+dataSource.appId);
console.log(dataSource);
this.callpay(dataSource);
} else {
showFailToast('操作失败，请重试:'+e.data.Message);
}
}).catch(err => {
console.log(`AppWebService,WXPaymentJsApi 接口请求失败。`);
showFailToast('操作失败，请重试;');
})
},
callpay (data){
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
//监听没起作用
document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(data), false)
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(data))
document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(data))
}
} else {
this.onBridgeReady(data)
}
},
/* eslint-disable */
//这里的代码不会被eslint规则校验
onBridgeReady(data) {
console.log("onBridgeReady:"+data);
console.log("onBridgeReady:data.package:"+data.package);
WeixinJSBridge.invoke('getBrandWCPayRequest', {
"appId": data.appId, //公众号ID，由商户传入
"timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数
"nonceStr": data.nonceStr, //随机串
"package": data.package,
"signType":data.signType, //微信签名方式：
"paySign": data.paySign//微信签名
},
function(res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
//返回订单详情页面
setTimeout(() =>{
window.location.href="https://xxx/homeshopping/#/OrderDetial?orderId="+data.orderGuid;
}, 5000);
//this.$router.push({
// path: "/OrderList",
// query: { type: "0" }
//})