网站建设需求文案郑州网络公司
时间：2023/2/17
背景：微信在推出点金计划后，原本window.WeixinJSBridge.invoke方法的回调失效了，需要在微信支付服务商平台｜平台开放更多能力，与服务商一起成长这里进行配置，配置流程跟着官方给出的文档一步步进行就好。
一.坑点：
①如果想要跳回原来商家页面，必须要根据官方文档配置“商家小票”页面，不然只有自己手动关掉网页。
②“商家小票”调试工具里面的，“从业机构商户号”是银行/服务商的商户号，底部的2个单号，可以在微信支付的“账单”里面点进去查询到。
③“商家小票”页面是微信用iframe嵌入的一个模块，要注意是否根据文档要求，将微信设置为了白名单（我们这里是通过nginx配置）
二.前端代码
tips：因为各种原因，手撸了一个html页面，其实用vue页面也是可以的
<!-- 此页面是放到服务器下，可以直接访问，供微信支付回调 -->
<!DOCTYPE html>
<html lang="cn"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="referrer" content="origin"><meta name="viewport"content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /><title>砼联数科支付</title><script type="text/javascript" charset="UTF-8" src="https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js"></script><script src="./jsapiResult/jsFiles/vue.js"></script><script type="text/javascript" src="./jsapiResult/jsFiles/element.js"></script><script type="text/javascript" src="./jsapiResult/jsFiles/axios.js"></script><link rel="stylesheet" href="./jsapiResult/cssFiles/jsapiResult.css"><link rel="stylesheet" href="./jsapiResult/cssFiles/theme.css">
</head><body><div class="gold-pay-result" id="goldPayResult"><div class="top-logo middle-center"><el-button type="success" icon="el-icon-check" circle size="large"></el-button></div><div class="custom-name middle-center">{{ pageInfo.payerName }}</div><div class="co-line vertical-center"><div class="left-title">订单状态</div><div class="right-info">支付成功</div></div><div class="co-line vertical-center"><div class="left-title">支付流水尾号</div><div class="right-info">{{pageInfo.txnNo}}</div></div><div class="cut-line"></div><div class="co-line vertical-center"><div class="left-title">支付总额</div><div class="right-info money-cl">￥{{ pageInfo.amount }}</div></div><div class="bottom-btn middle-center"><el-button class="return-btn" type="primary" icon="el-icon-position" size="small" @click="backBusiness">返回商家平台</el-button></div><script>let app = new Vue({el: '#goldPayResult',data: {pageInfo: {payerName: '',txnNo: '',amount: ''}},mounted: function () {this.openCustomPage();this.getTraderInfo();},methods: {getTraderInfo() {const out_trade_no = this.glGetUrlParam('out_trade_no');const sub_mch_id = this.glGetUrlParam('sub_mch_id');const check_code = this.glGetUrlParam('check_code');// 判断如果字段都有值try {if (out_trade_no && sub_mch_id && check_code) {let url = "";let postData = {pmcNo: sub_mch_id}axios({method: 'POST',url: url, // data: postData, //加密,headers: {"Content-Type": "application/json"},}).then((res) => {_re = res.data.message;_re.txnNo = _re.txnNo.substr(-4);Object.assign(this.pageInfo, _re);}).catch(err => {this.$message.error('调取信息接口异常!')})} else {this.$message.error('微信订单信息缺失!')}} catch (error) {this.$message.error('获取订单基本信息异常!');}},backBusiness() {// 跳转到指定的h5页面/小程序，智选平台要做特殊化处理，小程序直接跳网页let _addr = "";let jsapiJump = [];if (this.pageInfo.tradeType == 'JSAPI' || jsapiJump.indexOf(this.pageInfo.channelNo) !=-1) {_addr = this.pageInfo.jumpAddress1;} else {_addr =`` //跳小程序}this.$message.info(`即将跳回的地址信息为:${_addr}`);const mchData = {action: "jumpOut",jumpOutUrl: _addr,}; // 跳转到指定的页面并携带参数const postData = JSON.stringify(mchData);window.parent.postMessage(postData, "*");},openCustomPage() {let mchData = {action: 'onIframeReady',displayStyle: 'SHOW_CUSTOM_PAGE'}let postData = JSON.stringify(mchData)window.parent.postMessage(postData, '*')},glGetUrlParam(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配var context = "";if (r != null)context = decodeURIComponent(r[2]);reg = null;r = null;return context == null || context == "" || context == "undefined" ? "" : context;}},})</script>
</body></html>引入的头部文件，除了./jsapiResult/cssFiles/jsapiResult.css这个文件外，其他直接去网上扒拉资源就好，我这里都是自己下载下来放置为静态文件调用,这个样式文件如下
.gold-pay-result {padding: 10px 20px 20px 20px;width: calc(100% - 40px);font-size: 14px;margin-bottom: 10px;background: white;
}.gold-pay-result .top-logo {width: 100%;margin: 10px 0px;
}.gold-pay-result .success-cl {font-size: 20px;font-weight: bold;
}.gold-pay-result .custom-name {width: 100%;margin: 10px 0px 25px 0px;
}.gold-pay-result .cut-line {height: 2px;width: 100%;margin: 5px 0px;border-bottom: 1px solid lightgray;
}.gold-pay-result .co-line {width: 100%;margin: 12px 0px;
}.gold-pay-result .left-title {color: gray;
}.gold-pay-result .return-btn {font-size: 14px;margin-top: 15px;
}.gold-pay-result .right-info {margin-left: auto;
}.gold-pay-result .money-cl {font-size: 18px;}.gold-pay-result.bottom-btn {width: 100%;margin-top: 25px;
}.vertical-center {display: flex;align-items: center;
}.middle-center {display: flex;align-items: center;justify-content: center;
}三.因为微信的前端回调没有跳转小程序的方法，所以设置了一个空白页面，先跳转到空白页面，空白页面再跳转到小程序，空白页面代码如下
<!-- 小程序的结果页面，空白页，主要负责跳转回小程序 -->
<template><div class="mini-pay-result full-page"></div>
</template><script setup>
import { onMounted } from "vue";
import { getUrlParam } from "@/utils/tools.js"
import { ElMessage } from 'element-plus';
onMounted(() => {jumpToMiniPro();
});function jumpToMiniPro() {try {let params = getUrlParam('jumpAddress');if (!params.jumpAddress) {ElMessage.error('获取小程序跳转地址失败，请关闭后重新进入!');return;}wx.miniProgram.redirectTo({ url: params.jumpAddress });} catch (error) {ElMessage.error('小程序跳转失败，即将关闭当前页');setTimeout(() => {window.close();}, 2000);}
}
</script><style lang="scss" scoped>
.mini-pay-result {}
</style>getUrlParam方法就是一个很普通的获取url参数的方法
wx.miniProgram.redirectTo需要引入
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
这个文件，我目前是放置在index.html里面