前端微信支付代码(公众号支付)
其他商户跳转到我们支付页面，传入参数openId,fromTradeType,订单号，流水号，借由我们页面进行微信支付。具体在小程序后台如何配置，见微信官方文档。满足1.是在微信内核进入。2.传入了openId。三.控制微信支付按钮显示隐藏的代码。引入lodash主要使用防抖功能。五.进行微信搭桥，进行环境处理。一.场景 (完成代码见附录)四.点击微信支付后的流程代码。六.环境准备好后，拉起支付。
·
一.场景 (完成代码见附录)
其他商户跳转到我们支付页面，传入参数openId,fromTradeType,订单号，流水号，借由我们页面进行微信支付。具体在小程序后台如何配置，见微信官方文档。
二.包引入部分
import _ from "lodash";引入lodash主要使用防抖功能
三.控制微信支付按钮显示隐藏的代码
this.showWxPay = this.isWeChat() && tmp.subOpenId;
isWeChat() {
let ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true; //是微信内部
} else {
return false;
}
},
满足1.是在微信内核进入。2.传入了openId
四.点击微信支付后的流程代码
wxPay: _.debounce(function () {
let url = ""; //接口获取后端timeStamp，nonceStr等微信支付拉起的参数
let data = this.wxParams;
if (!this.passJudge(data)) { //对进入的数据进行判读，必须每一个数据都是存在的
//对参数做一次校验
return;
}
this.$axios
.post({
url,
data,
headers: { "Content-Type": "application/json" },
})
.then((res) => {
this.$emit(
"getPayResult",
);
let judge =
res.hasOwnProperty("data") &&
res.data.hasOwnProperty("ERRCODE") &&
res.data.ERRCODE == "000000" &&
res.status == "SUCCESS";
if (judge) {
let _data = res.data;
this.weChatParameter = { //记录拉起支付的参数
//微信搭桥需要的数据
appid: _data.appId || "",
timeStamp: _data.timeStamp || "",
nonceStr: _data.nonceStr || "",
package: _data.package || "",
signType: _data.signType || "",
paySign: _data.paySign || "",
};
this.weixinPay(); //微信内置对象判断
} else {
this.$message({
message: res.retMsg || "提交订单失败",
type: "warning",
});
}
})
.catch((error) => {
this.$message({
message: "提交订单失败",
type: "warning",
});
});
}, 240),
其中，passJudge函数为:
passJudge(data) {
if (!data) {
this.$message.error("缺少请求参数");
return false;
}
if (!data.reOrderNo) {
this.$message.error("缺失参数:reOrderNo");
return false;
}
if (!data.tranNo) {
this.$message.error("缺失参数:tranNo");
return false;
}
if (!data.subOpenId) {
this.$message.error("缺失参数:subOpenId");
return false;
}
if (!data.fromTradeType) {
this.$message.error("缺失参数:fromTradeType");
return false;
}
return true;
},五.进行微信搭桥，进行环境处理
let that = this;
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener(
"WeixinJSBridgeReady",
that.onBridgeReady(),
false
);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", that.onBridgeReady());
}
} else {
that.onBridgeReady();
}六.环境准备好后，拉起支付
onBridgeReady() {
let that = this;
let timestamp = Math.round(this.weChatParameter.timeStamp).toString();
window.WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
appId: that.weChatParameter.appid, //公众号名称，由商户传入
timeStamp: timestamp, //时间戳，自1970年以来的秒数
nonceStr: that.weChatParameter.nonceStr, //随机串
package: that.weChatParameter.package,
signType: that.weChatParameter.signType, //微信签名方式：
paySign: that.weChatParameter.paySign, //微信签名
// jsApiList: ["chooseWXPay"],
},
function (res) {
that.$emit(
"getPayResult",
`拉起支付返回结果为:${JSON.stringify(res)}`
);
// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
if (res.err_msg == "get_brand_wcpay_request:ok") {
//支付成功
that.$emit("toSuccess");
} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
//取消支付
} else {
//支付失败
that.$emit("toFail");
}
}
);
},七.附录：完整代码
<template>
<div class="check-box" @click="wxPay">
<img src="../../../assets/images/normal/pay/phone.png" class="check-img" />
<div class="check-word">微信支付</div>
</div>
</template>
<script>
import _ from "lodash";
import Bus from "@/utils/bus.js";
export default {
data() {
return {
weChatParameter: "",
};
},
props: {
wxParams: {
type: Object,
default: {},
},
},
created() {},
mounted() {
Bus.$on("getDetail", (amount, settlementNo, reconciliationTime) => {
this.payAmount = amount;
this.amount = amount;
this.settlementNo = settlementNo;
this.reconciliationTime = reconciliationTime;
});
},
components: {},
computed: {},
watch: {},
methods: {
wxPay: _.debounce(function () {
let url = "";
let data = this.wxParams;
this.$emit("changeWay", 3);
if (!this.passJudge(data)) {
//对参数做一次校验
return;
}
this.$axios
.post({
url,
data,
headers: { "Content-Type": "application/json" },
})
.then((res) => {
this.$emit(
"getPayResult",
"进入/cashier/PublicPay，数据为：" + JSON.stringify(res)
);
let judge =
res.hasOwnProperty("data") &&
res.data.hasOwnProperty("ERRCODE") &&
res.data.ERRCODE == "000000" &&
res.status == "SUCCESS";
if (judge) {
let _data = res.data;
this.weChatParameter = {
//微信搭桥需要的数据
appid: _data.appId || "",
timeStamp: _data.timeStamp || "",
nonceStr: _data.nonceStr || "",
package: _data.package || "",
signType: _data.signType || "",
paySign: _data.paySign || "",
};
this.weixinPay(); //微信内置对象判断
} else {
this.$message({
message: res.retMsg || "提交订单失败",
type: "warning",
});
}
})
.catch((error) => {
this.$message({
message: "提交订单失败",
type: "warning",
});
});
}, 240),
weixinPay() {
let that = this;
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener(
"WeixinJSBridgeReady",
that.onBridgeReady(),
false
);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", that.onBridgeReady());
}
} else {
that.onBridgeReady();
}
},
//微信内置浏览器类
onBridgeReady() {
let that = this;
let timestamp = Math.round(this.weChatParameter.timeStamp).toString();
this.$emit(
"getPayResult",
"进入onBridgeReady，数据为：" + JSON.stringify(that.weChatParameter)
);
window.WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
appId: that.weChatParameter.appid, //公众号名称，由商户传入
timeStamp: timestamp, //时间戳，自1970年以来的秒数
nonceStr: that.weChatParameter.nonceStr, //随机串
package: that.weChatParameter.package,
signType: that.weChatParameter.signType, //微信签名方式：
paySign: that.weChatParameter.paySign, //微信签名
// jsApiList: ["chooseWXPay"],
},
function (res) {
that.$emit(
"getPayResult",
`拉起支付返回结果为:${JSON.stringify(res)}`
);
// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
if (res.err_msg == "get_brand_wcpay_request:ok") {
//支付成功
that.$emit("toSuccess");
} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
//取消支付
} else {
//支付失败
that.$emit("toFail");
}
}
);
},
passJudge(data) {
if (!data) {
this.$message.error("缺少请求参数");
return false;
}
if (!data.reOrderNo) {
this.$message.error("缺失参数:reOrderNo");
return false;
}
if (!data.tranNo) {
this.$message.error("缺失参数:tranNo");
return false;
}
if (!data.subOpenId) {
this.$message.error("缺失参数:subOpenId");
return false;
}
if (!data.fromTradeType) {
this.$message.error("缺失参数:fromTradeType");
return false;
}
return true;
},
},
};
</script>
<style lang="scss" scoped>
.check-box {
padding: 0px 10px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid rgb(220, 220, 220);
margin-left: 10px;
cursor: pointer;
.check-img {
width: 18px;
height: 18px;
}
.check-word {
margin-left: 5px;
font-size: 14px;
}
}
</style>
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
0
0- 0
已为社区贡献4条内容
所有评论(0)