当前位置: 首页 > news >正文

微信点金计划(服务商角度)

时间: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里面

相关文章:

微信点金计划(服务商角度)

时间&#xff1a;2023/2/17 背景&#xff1a;微信在推出点金计划后&#xff0c;原本window.WeixinJSBridge.invoke方法的回调失效了&#xff0c;需要在微信支付服务商平台&#xff5c;平台开放更多能力&#xff0c;与服务商一起成长这里进行配置&#xff0c;配置流程跟着官方给…...

2023年美赛 MCM B题 重新构想马赛马拉岛

背景肯尼亚的野生动物保护区最初主要是为了保护野生动物和其他自然资源。肯尼亚议会于2013 年通过了《野生动物保护和管理法》&#xff0c;以提供更公平的资源共享&#xff0c;并允许进行替代的、以社 区为基础的管理工作[1].此后&#xff0c;肯尼亚增加了修正案&#xff0c;以…...

指标体系的应用与搭建

一、指标体系的介绍 体系泛指一定范围内同类事物按照一定的顺序或内在联系而组成的整体。指标体系也一样&#xff0c;指的是不同指标按照一定的顺序及内部联系而组成的整体。此外&#xff0c;在指标体系中&#xff0c;除了以应用为出发点搭建&#xff0c;还会加入使用指南&…...

固态继电器的五大优势

固态继电器的优点和五个关键优势&#xff0c;现代电气控制系统因二极管、晶体管和晶闸管等固态器件的发明而得到极大的增强。对于加热器和电机等大负载设备&#xff0c;固态继电器可能比传统的机械继电器具有巨大的优势。 虽然并非适用于所有情况&#xff0c;但它们具有许多吸引…...

特征检测之HOG特征算法详解及Opencv接口使用

1. HOG特征简介 特征描述符是图像或图像补丁的表示形式&#xff0c;它通过提取有用信息并丢弃无关信息来简化图像。 通常&#xff0c;特征描述符将大小W x H x 3&#xff08;通道&#xff09;的图像转换为长度为n的特征向量/数组。对于 HOG 特征描述符&#xff0c;输入图像的…...

一款好的低代码开发平台应该是什么样?

一款好的低代码开发平台应该是什么样&#xff1f; 以企业级应用构建来讲&#xff0c;完成一个应用复杂度随着技术的进步、需求的细化、业务要求的变化并不是逐渐降低&#xff0c;而是逐渐提升。用户想要有更好的体验&#xff0c;复杂度更是成倍提升。 基于此&#xff0c;低代码…...

基于Spring cloud搭建oauth2

1&#xff0c;OAuth2.0简介 OAuth&#xff08;开发授权&#xff09;是一个开放标准&#xff0c;允许用户授权第三方应用访问他们存储在另外的服务提供者上的信息&#xff0c;而不需要将用户名和密码提供给第三方应用或分享他们数据的所有内容。 OAuth2.0是OAuth的延续&#xf…...

实现一个小程序分享图 wxml2canvas

我们经常会遇上动态生成海报的需求&#xff0c;而在小程序中&#xff0c;生成图片非Canvas莫属。但是在实际工作当中&#xff0c;为了追求效率&#xff0c;我们会不可避免地去使用一些JS插件&#xff0c;而 wxml-to-canvas 就是一款官方推荐且非常优秀的插件&#xff0c;它可以…...

基于matlab设计x波段机载SAR系统

一、前言此示例说明如何设计在 X 波段工作的合成孔径雷达 &#xff08;SAR&#xff09; 传感器并计算传感器参数。SAR利用雷达天线在目标区域上的运动来提供目标区域的图像。当SAR平台在目标区域上空行进时&#xff0c;当脉冲从雷达天线发送和接收时&#xff0c;会产生合成孔径…...

WPF学习:Slider — 冒泡显示值

想做一个下图所示的Slider&#xff0c;以冒泡的方式显示其Value值&#xff0c;该怎么做呢&#xff1f; 功能要求&#xff0c;当鼠标放在滑块上的时候&#xff0c;冒“泡”显示值&#xff1b;当滑块移动的时候&#xff0c;“泡”跟随移动。 看似简单的功能&#xff0c;但要完美…...

Vue实战第4章:主页设计之中部内容设计

前言 本篇在讲什么 接上篇文章&#xff0c;我们制作了一个自定义的网页导航栏&#xff0c;本篇文章我们简单制作一个内容页 仅介绍简单的应用&#xff0c;仅供参考 本篇适合什么 适合初学Vue的小白 适合想要自己搭建网站的新手 适合没有接触过vue-router的前端程序 本篇…...

数据结构代码总结(C语言实现)

目录如何应对数据结构的代码题&#xff1f;采取的学习流程①首先对C语言的语法的熟悉②学习掌握基本代码的写法&#xff0c;做到熟练2.1插入排序2.2快速排序2.3二分查找2.4树的遍历③跟着网上视频开始熟悉对一些问题的解答④结合真题的代码&#xff0c;寻找其中的结题规律如何应…...

zookeeper 复习 ---- chapter04

zookeeper 复习 ---- chapter04zookeeper 的精髓是什么&#xff1f; 1&#xff1a;它有四个节点类型 持久无序的节点 临时无序的节点 持久有序的节点 临时有序的节点 临时的节点的特征&#xff1a;当客户端和服务器端断开连接&#xff0c;当前客户端创建的节点被服务器端自动删…...

thinkphp6.0连接MYSQL

目录8.连接多个数据库7.多级控制器不存在6.分页5.非法请求4.关于路由**3.初体验页面****2.加入fileheader添加注释****1.配置mysql0. 官方开发手册一些网址 http://127.0.0.1:8000/index 原桌面 http://127.0.0.1:8000/hello/fsh hello,fsh&#xff08;index中hello方法&#x…...

商家必读!超店有数分享,tiktok达人营销变现如何更快一步?

近几年来&#xff0c;“粉丝经济”发展越来越迅猛&#xff0c;“网红带货”已经成为了一种营销的方式。这种方式让商家能基于达人的影响下迅速抢占自己的私域流量池。消费者会基于对达人的信任&#xff0c;购买达人推荐的产品。达人效应可以助力品牌走出营销困境。如果商家想要…...

操作系统(day11)--快表,两级页表

具有快表的地址变换机构 时间局限性&#xff1a;会有大量连续的指令需要访问同一个内存块的数据的情况&#xff08;程序中的循环&#xff09; 空间局限性&#xff1a;一旦程序访问了某个存储单元&#xff0c;在不久之后&#xff0c;其附近的存储单元也很有可能被访问。&#xf…...

预告| 亮点抢先看!第四届OpenI/O启智开发者大会主论坛24日启幕!

2023年2月24日至25日&#xff0c;第四届OpenI/O启智开发者大会将在深圳隆重举行。“算网筑基、开源启智、AI赋能”作为今年大会的主题&#xff0c;吸引了全球业界关注的目光。大会集结中国算力网资源基座、开源社区治理及AI开源生态建设、国家级开放创新应用平台、NLP大模型等前…...

猪齿鱼(Choerodon UI )的通用提交的封装 —— 两种方案,A.使用dataSet的自身的submit,B.使用axios.post来提交

submit组件&#xff08;otherSubmit/axiosSubmit&#xff09; 一、背景与简介 1、首先我们申请表提交&#xff0c;分为【保存】提交与【其他】提交&#xff1b; 1.1【保存】提交&#xff0c;要求表单必须要有变更&#xff0c;DataToJSON默认为dirty&#xff08;只转换变更的…...

CISCN(Web Ezpentest)GC、序列化、case when

目录 REGEXP的一个点&#xff08;正则&#xff09; like&#xff08;默认不区分大小写&#xff09; 当禁用了空格 regexp&#xff0c;like的区分大小写的使用方法 [CISCN 2022 初赛]ezpentest 卡点 2022 HFCTF babysql 最近又学到了一道新知识&#xff0c;case when的错…...

OSG三维渲染引擎编程学习之五十七:“第六章:OSG场景工作机制” 之 “6.1 OSG访问器”

目录 第六章 OSG场景工作机制 6.1 OSG访问器 6.1.1 访问器模式 6.1.2 osg::NodeVisitor 6.1.3 访问器示例...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

【UE5 C++】通过文件对话框获取选择文件的路径

目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 &#xff0c;这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器&#xff0c;右键点击 .uproject 文件&#xff0c;选择 "Generate Visual Studio project files"&#xff0c;重…...

自然语言处理——文本分类

文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益&#xff08;IG&#xff09; 分类器设计贝叶斯理论&#xff1a;线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别&#xff0c; 有单标签多类别文本分类和多…...

小智AI+MCP

什么是小智AI和MCP 如果还不清楚的先看往期文章 手搓小智AI聊天机器人 MCP 深度解析&#xff1a;AI 的USB接口 如何使用小智MCP 1.刷支持mcp的小智固件 2.下载官方MCP的示例代码 Github&#xff1a;https://github.com/78/mcp-calculator 安这个步骤执行 其中MCP_ENDPOI…...

【java】【服务器】线程上下文丢失 是指什么

目录 ■前言 ■正文开始 线程上下文的核心组成部分 为什么会出现上下文丢失&#xff1f; 直观示例说明 为什么上下文如此重要&#xff1f; 解决上下文丢失的关键 总结 ■如果我想在servlet中使用线程&#xff0c;代码应该如何实现 推荐方案&#xff1a;使用 ManagedE…...

Axure零基础跟我学:展开与收回

亲爱的小伙伴,如有帮助请订阅专栏!跟着老师每课一练,系统学习Axure交互设计课程! Axure产品经理精品视频课https://edu.csdn.net/course/detail/40420 课程主题:Axure菜单展开与收回 课程视频:...

uniapp获取当前位置和经纬度信息

1.1. 获取当前位置和经纬度信息&#xff08;需要配置高的SDK&#xff09; 调用uni-app官方API中的uni.chooseLocation()&#xff0c;即打开地图选择位置。 <button click"getAddress">获取定位</button> const getAddress () > {uni.chooseLocatio…...